2012-05-22 9 views
9

Ich habe die folgenden zwei Arten von mehrzeiligen Textareas in meinen Ansichten:Wie kann ich mehr als eine Editorvorlage für eine mehrzeilige Textbox in MVC3 erstellen?

<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> 

I Vorteil von benutzerdefinierten Editor Vorlagen nutzen möchten, behalten aber die Möglichkeit, Attribute anders angeben (zB die rows zwei zwischen den verschieden sind über).

Ist es für mich möglich, zwei verschiedene Arten von Vorlagen für das gleiche Feld zu deklarieren und zu verwenden? Wenn ja, wie sollte ich die Vorlage deklarieren und wie gebe ich die verschiedenen Vorlagen an?

Auch wie kann ich die verschiedenen Spalten und Zeilen deklarieren. Kann ich Spalten, Zeilen oder sollte ich Höhe und Breite in CSS wie width=500px, height=600px oder 400px angeben?

Antwort

16

könnten Sie überschreiben die default editor template (~/Views/Shared/EditorTemplates/MultilineText.cshtml):

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

und dann vorausgesetzt, Sie ein Ansichtsmodell definiert haben:

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

innerhalb der Hauptansicht können Sie dies tun:

@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" }) 

, die die erwartete Ausgabe wiedergeben wird:

<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> 

Auch Sie könnten den Editor-Vorlage verbessern, so dass Sie bei jeder nicht das @class Attribut angeben müssen EditorFor wie folgt aufrufen:

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

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

und jetzt konnte man:

@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" }) 

Oh, und vergessen Sie nicht, dass IDs in HTML eindeutig sein müssen, so dass diese id = "dialogText" offensichtlich für das zweite Textfeld anders sein sollte.

+0

Danke Darin. Ich werde alles, was Sie gesagt haben, überprüfen und testen und als beantwortet markieren, wenn ich die Gelegenheit hatte, es zu testen. Wie immer war deine Antwort sehr detailliert. Nur eine kurze Frage. Denken Sie, dass es in Ordnung ist, die Spalten und Zeilen zu verwenden, oder sollte ich die Breite in px angeben. Wenn es px wäre, wie könnte ich das machen? –

+0

Beide sind möglich. Ich bin kein CSS-Spezialist, aber ich habe von meinen Freunden Designer gehört, dass sie CSS dafür bevorzugen. Verwenden Sie also die style -Eigenschaft: '@ Html.EditorFor (x => x.Text, neu {style =" width: 100px; height: 50px; "})'. Oder wenden Sie eine vordefinierte CSS-Klasse an. –

+0

Diese Lösung sieht bis Version 6 nicht wie möglich aus. Https://github.com/aspnet/Mvc/issues/965 –

3

Sie können eine Editorvorlage erstellen MultiLine1.cshtml und MultiLine2.cshtml und in Ihrem Ansichtsmodell können Sie UIHint verwenden, um anzugeben, welche Editorvorlage Sie für diese bestimmte Eigenschaft verwenden möchten. Sie können jedoch nur eine Vorlage für eine Eigenschaft angeben. Bei verschiedenen Eigenschaften desselben Typs können Sie jedoch verschiedene Vorlagen verwenden.

Verwandte Themen