2012-05-22 9 views
9

Mam następujące dwa rodzaje multilinii pola tekstowe w moich poglądów:Jak mogę utworzyć więcej niż jeden szablon edytora dla wieloliniowego pola tekstowego w MVC3?

<textarea cols="100" rows="15" class="full-width" id="dialogText" 
      name="Text">@Model.Text</textarea> 

<textarea cols="100" rows="10" class="full-width" id="dialogText" 
      name="Text">@Model.Text</textarea> 

Chciałbym skorzystać z szablonów niestandardowych redaktor, ale zachować możliwość określania atrybutów inaczej (np rows są różne między dwoma powyżej).

Czy mogę zadeklarować i użyć dwóch różnych rodzajów szablonów dla tego samego pola? Jeśli tak, to w jaki sposób powinienem zadeklarować szablon i jak określić różne szablony do użycia?

Również, jak mogę zadeklarować różne kolumny i rzędy. Czy mogę używać kolumn, wierszy lub czy należy określić wysokość i szerokość w CSS, na przykład width=500px, height=600px lub 400px?

Odpowiedz

16

mogłyby przesłonić default editor template (~/Views/Shared/EditorTemplates/MultilineText.cshtml):

@Html.TextArea(
    "", 
    ViewData.TemplateInfo.FormattedModelValue.ToString(), 
    ViewData 
) 

a następnie zakładając zdefiniowaniu modelu wyświetlania:

public class MyViewModel 
{ 
    [DataType(DataType.MultilineText)] 
    public string Text { get; set; } 
} 

wewnątrz głównego widoku można to zrobić:

@model MyViewModel 

@Html.EditorFor(x => x.Text, new { cols = "100", rows = "15", id = "dialogText", @class = "full-width" }) 
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "10", id = "dialogText", @class = "full-width" }) 

który wyświetli oczekiwany wynik:

<textarea class="full-width" cols="100" id="dialogText" name="Text" rows="15"> 
    hello world 
</textarea> 

<textarea class="full-width" cols="100" id="dialogText" name="Text" rows="10"> 
    hello world 
</textarea> 

Również można zwiększenia szablonu edytora, dzięki czemu nie ma potrzeby określania atrybutu @class na każdy EditorFor nazwać tak:

@{ 
    var htmlAttributes = ViewData; 
    htmlAttributes["class"] = "full-width"; 

} 
@Html.TextArea(
    "", 
    ViewData.TemplateInfo.FormattedModelValue.ToString(), 
    htmlAttributes 
) 

i teraz możesz:

@model MyViewModel 
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "15", id = "dialogText" }) 
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "10", id = "dialogText" }) 

No i nie zapominaj, że id musi być unikalny w HTML, więc ten id = "dialogText" powinien oczywiście być inny dla drugiego obszaru tekstowego.

+0

Dziękuję Darin. Przeanalizuję i przetestuję wszystko, co powiedziałeś, i oznaczysz jako odpowiedź, gdy będę miał okazję przetestować to. Jak zwykle twoja odpowiedź była bardzo szczegółowa. Tylko jedno szybkie pytanie. Czy uważasz, że używanie kolców i wierszy jest właściwe, czy powinienem określić szerokość w px. Jeśli to był px, to jak mogłem to zrobić? –

+0

Oba są możliwe. Nie jestem specjalistą od CSS, ale słyszałem od moich znajomych projektantów, że wolą używać CSS do tego. Tak więc użyj właściwości style: '@ Html.EditorFor (x => x.Text, new {style =" width: 100px; height: 50px; "}}'. Lub zastosuj predefiniowaną klasę CSS. –

+0

To rozwiązanie nie wygląda na możliwe do wersji 6. https://github.com/aspnet/Mvc/issues/965 –

3

Można utworzyć szablon edytora MultiLine1.cshtml i MultiLine2.cshtml, aw modelu widoku można użyć UIHint, aby określić szablon edytora, który ma być używany dla danej właściwości. Ale możesz określić tylko jeden szablon dla jednej właściwości. Na różnych właściwościach tego samego typu można jednak użyć różnych szablonów.

Powiązane problemy