EditorFor () - und HTML-Eigenschaften

Asp.Net MVC 2.0 Preview Builds bieten Hilfen wie

Html.EditorFor(c => c.propertyname)

Wenn der Eigenschaftsname string ist, wird mit dem obigen Code eine Texbox gerendert.

Was ist, wenn ich die Eigenschaften MaxLength und Size an das Textfeld oder meine eigene CSS-Klasseneigenschaft übergeben möchte?

Muss ich für jede Größen- und Längenkombination in meiner Anwendung eine Vorlage erstellen? Wenn ja, werden die Standardvorlagen dadurch nicht verwendet.

In MVC3 können Sie die Breite wie folgt einstellen:

@Html.TextBoxFor(c => c.PropertyName, new { style = "width: 500px;" })

Ich habe dieses Problem gelöst, indem ich eine EditorTemplate mit dem Namen String.ascx in meinem Ordner / Views / Shared / EditorTemplates erstellt habe:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<% int size = 10;
   int maxLength = 100;
   if (ViewData["size"] != null)
   {
       size = (int)ViewData["size"];
   }
   if (ViewData["maxLength"] != null)
   {
       maxLength = (int)ViewData["maxLength"];
   }
%>
<%= Html.TextBox("", Model, new { Size=size, MaxLength=maxLength }) %>

Aus meiner Sicht benutze ich

<%= Html.EditorFor(model => model.SomeStringToBeEdited, new { size = 15, maxLength = 10 }) %>

Funktioniert wie ein Zauber für mich!

Keine der Antworten in diesem oder einem anderen Thread zum Festlegen von HTML-Attributen für @ Html.EditorFor hat mir sehr geholfen. Allerdings habe ich bei eine gute Antwort gefunden

Styling eines @ Html.EditorFor-Helfers

Ich habe den gleichen Ansatz verwendet und es hat wunderbar funktioniert, ohne viel zusätzlichen Code zu schreiben. Beachten Sie, dass das ID-Attribut der HTML-Ausgabe von Html.EditorFor festgelegt ist. Der Ansichtscode

<style type="text/css">
#dob
{
   width:6em;
}
</style>

@using (Html.BeginForm())
{
   Enter date: 
   @Html.EditorFor(m => m.DateOfBirth, null, "dob", null)
}

Die Modelleigenschaft mit Datenanmerkung und Datumsformatierung als "TT MMM JJJJ"

[Required(ErrorMessage= "Date of birth is required")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd MMM yyyy}")]
public DateTime DateOfBirth { get; set; }

Arbeitete wie ein Zauber, ohne viel zusätzlichen Code zu schreiben. Diese Antwort verwendet ASP.NET MVC 3 Razor C #.

Vielleicht möchten Sie sich Kiran Chands Blog-Beitrag ansehen. Er verwendet benutzerdefinierte Metadaten für das Ansichtsmodell wie:

[HtmlProperties(Size = 5, MaxLength = 10)]
public string Title { get; set; }

Dies wird mit benutzerdefinierten Vorlagen kombiniert, die die Metadaten verwenden. Meiner Meinung nach ein sauberer und einfacher Ansatz, aber ich würde mir wünschen, dass dieser allgemeine Anwendungsfall in mvc integriert ist.

Ich bin überrascht, dass niemand erwähnt hat, dass er es in "AdditionalViewData" weitergegeben und auf der anderen Seite gelesen hat.

Ansicht (aus Gründen der Übersichtlichkeit mit Zeilenumbrüchen):

<%= Html.EditorFor(c => c.propertyname, new
    {
        htmlAttributes = new
        {
            @class = "myClass"
        }
    }
)%>

Editor-Vorlage:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<%= Html.TextBox("", Model, ViewData["htmlAttributes"])) %>

Das Problem ist, dass Ihre Vorlage mehrere HTML-Elemente enthalten kann, sodass MVC nicht weiß, auf welches Ihre Größe / Klasse angewendet werden soll. Sie müssen es selbst definieren.

Lassen Sie Ihre Vorlage von Ihrer eigenen Klasse namens TextBoxViewModel ableiten:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
  }
  public string GetAttributesString()
  {
     return string.Join(" ", moreAttributes.Select(x => x.Key + "='" + x.Value + "'").ToArray()); // don't forget to encode
  }

}}

In der Vorlage können Sie dies tun:

<input value="<%= Model.Value %>" <%= Model.GetAttributesString() %> />

Aus Ihrer Sicht tun Sie:

<%= Html.EditorFor(x => x.StringValue) %>
or
<%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue, new IDictionary<string, object> { {'class', 'myclass'}, {'size', 15}}) %>

Das erste Formular rendert die Standardvorlage für die Zeichenfolge. Das zweite Formular rendert die benutzerdefinierte Vorlage.

Alternative Syntax verwenden fließende Schnittstelle:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
    moreAttributes = new Dictionary<string, object>();
  }

  public TextBoxViewModel Attr(string name, object value)
  {
     moreAttributes[name] = value;
     return this;
  }

}}

   // and in the view
   <%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) %>

Beachten Sie, dass Sie dies nicht in der Ansicht, sondern auch im Controller oder viel besser im ViewModel tun können:

public ActionResult Action()
{
  // now you can Html.EditorFor(x => x.StringValue) and it will pick attributes
  return View(new { StringValue = new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) });
}

Beachten Sie auch, dass Sie die Basis-TemplateViewModel-Klasse erstellen können - eine gemeinsame Grundlage für alle Ihre Ansichtsvorlagen -, die grundlegende Unterstützung für Attribute / etc. Enthält.

Aber im Allgemeinen denke ich, dass MVC v2 eine bessere Lösung braucht. Es ist immer noch Beta - frag danach ;-)

Ich denke, CSS ist der richtige Weg. Ich wünschte, ich könnte mehr mit .NET-Codierung tun, wie in XAML, aber im Browser ist CSS König.

Site.css

#account-note-input { 
  width:1000px; 
  height:100px; 
} 

.cshtml

<div class="editor-label"> 
  @Html.LabelFor(model => model.Note) 
</div> 
<div class="editor-field"> 
  @Html.EditorFor(model => model.Note, null, "account-note-input", null) 
  @Html.ValidationMessageFor(model => model.Note) 
</div>

Joe

Wenn Sie wie bei MVC 5 Attribute hinzufügen möchten, können Sie dies einfach tun

 @Html.EditorFor(m => m.Name, new { htmlAttributes = new { @required = "true", @anotherAttribute = "whatever" } })

Informationen aus diesem Blog gefunden

Sie können Attribute für Ihre Eigenschaften definieren.

[StringLength(100)]
public string Body { get; set; }

Dies ist bekannt als System.ComponentModel.DataAnnotations. Wenn Sie das benötigte nicht finden ValidationAttribute, können Sie immer benutzerdefinierte Attribute definieren.

Beste Grüße, Carlos

Dies ist möglicherweise nicht die beste Lösung, aber es ist unkompliziert. Sie können eine Erweiterung für die Klasse HtmlHelper.EditorFor schreiben. In dieser Erweiterung können Sie einen Optionsparameter angeben, der die Optionen für den Helfer in die ViewData schreibt. Hier ist ein Code:

Zunächst die Erweiterungsmethode:

public static MvcHtmlString EditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, TemplateOptions options)
{
    return helper.EditorFor(expression, options.TemplateName, new
    {
        cssClass = options.CssClass
    });
}

Als nächstes das Optionsobjekt:

public class TemplateOptions
{
    public string TemplateName { get; set; }
    public string CssClass { get; set; }
    // other properties for info you'd like to pass to your templates,
    // and by using an options object, you avoid method overload bloat.
}

Und zum Schluss noch die Zeile aus der String.ascx-Vorlage:

<%= Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = ViewData["cssClass"] ?? "" }) %>

Ehrlich gesagt denke ich, dass dies für die arme Seele, die Ihren Code später beibehalten muss, unkompliziert und klar ist. Und es ist einfach, verschiedene andere Informationen zu erweitern, die Sie an Ihre Vorlagen weitergeben möchten. Bisher funktioniert es gut für mich in einem Projekt, in dem ich versuche, so viel wie möglich in eine Reihe von Vorlagen zu packen, um die Standardisierung des umgebenden HTML-Codes zu unterstützen, a la http://bradwilson.typepad.com/blog/2009/ 10 / aspnet-mvc-2-templates-part-5-master-page-templates.html .

Ich habe einen Blogeintrag geschrieben, um meine eigene Frage zu beantworten

Unterstützung für HTML-Attribute für Vorlagen hinzufügen - ASP.Net MVC 2.0 Beta

Ich weiß nicht, warum es für Html.EditorFor nicht funktioniert, aber ich habe TextBoxFor ausprobiert und es hat für mich funktioniert.

@Html.TextBoxFor(m => m.Name, new { Class = "className", Size = "40"})

... und auch die Validierung funktioniert.

In meiner Praxis habe ich festgestellt, dass es am besten ist, EditorTemplates mit nur einem HtmlHelper zu verwenden - TextBox, das in den meisten Fällen der Fall ist. Wenn ich eine Vorlage für eine komplexere HTML-Struktur möchte, schreibe ich einen separaten HTML-Helfer.

Vorausgesetzt, wir können das gesamte ViewData-Objekt anstelle von htmlAttributes der TextBox verwenden. Darüber hinaus können wir Anpassungscode für einige der Eigenschaften der ViewData schreiben, wenn sie einer besonderen Behandlung bedürfen:

@model DateTime?

@*
    1) applies class datepicker to the input;
    2) applies additionalViewData object to the attributes of the input
    3) applies property "format" to the format of the input date.
*@

@{
    if (ViewData["class"] != null) { ViewData["class"] += " datepicker"; }
    else { ViewData["class"] = " datepicker"; }
    string format = "MM/dd/yyyy";
    if (ViewData["format"] != null)
    {
        format = ViewData["format"].ToString();
        ViewData.Remove("format");
    }
}

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString(format) : string.Empty), ViewData)

Unten finden Sie Beispiele für die Syntax in der Ansicht und das ausgegebene HTML:

@Html.EditorFor(m => m.Date)

<input class="datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="01/08/2012">

@Html.EditorFor(m => m.Date, new { @class = "myClass", @format = "M/dd" })

<input class="myClass datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="1/08">

Da die Frage für EditorFor nicht TextBoxFor WEFX ist, funktioniert der Vorschlag nicht.

Zum Ändern einzelner Eingabefelder können Sie die Ausgabe der EditorFor-Methode verarbeiten:

<%: new HtmlString(Html.EditorFor(m=>m.propertyname).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line my500pxWideClass\"")) %>

Es ist auch möglich, ALLE Ihre EditorFors zu ändern, da MVC die Klasse der EditorFor-Textfelder mit .text-box festlegt . Daher können Sie diesen Stil einfach in Ihrem Stylesheet oder auf der Seite überschreiben.

.text-box {
    width: 80em;
}

Außerdem können Sie den Stil für festlegen

input[type="text"] {
    width: 200px;
}

• Dies überschreibt das Textfeld und ändert alle Eingabetextfelder, EditorFor oder andere.

Ich hatte auch Probleme beim Festlegen der Breite von TextBox in MVC3, während das Festlegen des Clsss-Attributs für das TextArea-Steuerelement, jedoch nicht für das TextBoxFor-Steuerelement oder das EditorFor-Steuerelement funktionierte:

Ich habe versucht zu folgen und das hat bei mir funktioniert:

@ Html.TextBoxFor (model => model.Title, new {Class = "textBox", style = "width: 90%;"})

auch in diesem Fall funktionieren Validierungen einwandfrei.

Eine Möglichkeit, dies zu umgehen, besteht darin, Delegierte im Ansichtsmodell zu haben, die das Ausdrucken eines solchen speziellen Renderings übernehmen. Ich habe dies für eine Paging-Klasse getan und eine öffentliche Eigenschaft für das Modell verfügbar gemachtFunc<int, string> RenderUrl damit umzugehen.

Definieren Sie also, wie das benutzerdefinierte Bit geschrieben wird:

Model.Paging.RenderUrl = (page) => { return string.Concat(@"/foo/", page); };

Geben Sie die Ansicht für die PagingKlasse aus:

@Html.DisplayFor(m => m.Paging)

... und für die aktuelle PagingAnsicht:

@model Paging
@if (Model.Pages > 1)
{
    <ul class="paging">
    @for (int page = 1; page <= Model.Pages; page++)
    {
        <li><a href="@Model.RenderUrl(page)">@page</a></li>
    }
    </ul>
}

Es könnte als übermäßig kompliziert angesehen werden, aber ich benutze diese Pager überall und konnte es nicht ertragen, denselben Code für das Boilerplate zu sehen, um sie zu rendern.

UPDATE: hm, das funktioniert natürlich nicht, da das Modell als Wert übergeben wird und die Attribute nicht erhalten bleiben. aber ich lasse diese Antwort als Idee.

Ich denke, eine andere Lösung wäre, Ihre eigenen TextBox / etc-Helfer hinzuzufügen, die nach Ihren eigenen Attributen im Modell suchen.

public class ViewModel
{
  [MyAddAttribute("class", "myclass")]
  public string StringValue { get; set; }
}

public class MyExtensions
{
  public static IDictionary<string, object> GetMyAttributes(object model)
  {
     // kind of prototype code...
     return model.GetType().GetCustomAttributes(typeof(MyAddAttribute)).OfType<MyAddAttribute>().ToDictionary(
          x => x.Name, x => x.Value);
  }
}

<!-- in the template -->
<%= Html.TextBox("Name", Model, MyExtensions.GetMyAttributes(Model)) %>

Dieser ist einfacher, aber nicht so praktisch / flexibel.

Dies ist der sauberste und eleganteste / einfachste Weg, um hier eine Lösung zu finden.

Genialer Blog-Beitrag und kein chaotischer Overkill beim Schreiben von benutzerdefinierten Erweiterungs- / Hilfsmethoden wie bei einem verrückten Professor.

http://geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx

Die Antwort von @tjeerdans, bei der die EditorTemplate mit dem Namen String.ascx im Ordner / Views / Shared / EditorTemplates verwendet wird, hat mir sehr gut gefallen. Es scheint die direkteste Antwort auf diese Frage zu sein. Ich wollte jedoch eine Vorlage mit Razor-Syntax. Darüber hinaus scheint MVC3 die Zeichenfolgenvorlage als Standard zu verwenden (siehe die StackOverflow-Frage " MVC-Anzeigevorlage für Zeichenfolgen wird für Ganzzahlen verwendet "), sodass Sie das Modell auf Objekt anstatt auf Zeichenfolge festlegen müssen. Meine Vorlage scheint bisher zu funktionieren:

@model object 

@{  int size = 10; int maxLength = 100; }

@if (ViewData["size"] != null) {
    Int32.TryParse((string)ViewData["size"], out size); 
} 

@if (ViewData["maxLength"] != null) {
    Int32.TryParse((string)ViewData["maxLength"], out maxLength); 
}

@Html.TextBox("", Model, new { Size = size, MaxLength = maxLength})

Ich habe es gelöst !!
Für Razor lautet die Syntax:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" })Hiermit wird die Breite des Textbereichs an die Breite angepasst, die ich im Stilparameter definiert habe.
Für ASPx lautet die Syntax:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
Dies reicht aus