"EditorFor" () und html-Eigenschaften

Question

Asp.Net MVC 2.0-Vorschau-builds bereitstellen Helfer wie

Html.EditorFor(c => c.propertyname)

Wenn der name der Eigenschaft ist eine Zeichenfolge, der obige code erzeugt eine texbox.

Was wenn ich möchten zu übergeben MaxLength Größe und Eigenschaften auf das Feld text oder eigene css-Klasse Eigenschaft?

Brauche ich zum erstellen einer Vorlage für jede Größe und Länge-Kombinationen, die meine Anwendung?Wenn dem so ist, bedeutet das nicht, stellen Sie die Standard-Vorlagen, die nutzbar sind.

Answer 1

Ich schrieb einen Blog-Eintrag meine eigene Frage zu beantworten

html Hinzufügen von Attributen Unterstützung für Vorlagen - ASP.Net MVC 2.0 Beta

Answer 2

In MVC3 können Sie Breite wie folgt festgelegt:

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

Answer 3

Ich löste dies durch eine EditorTemplate Schaffung namens String.ascx in meinem / Ansicht / Shared / EditorTemplates Ordner:

<%@ 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, ich benutze

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

Funktioniert wie ein Zauber für mich!

Answer 4

Keine der Antworten in diesem oder einem anderen Thread auf HTML Einstellung Attribute für @ Html.EditorFor waren große Hilfe für mich. Allerdings habe ich eine große Antwort auf

finden

Styling ein @ Html.EditorFor Helfer

habe ich den gleichen Ansatz und es funktionierte wunderbar, ohne viel zusätzlichen Code zu schreiben. Beachten Sie, dass das id-Attribut der HTML-Ausgabe von Html.EditorFor gesetzt. Der View-Code

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

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

Das Modell Eigenschaft mit Datenaufbelichtung und Datumsformat als „dd MMM yyyy“

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

arbeitet wie ein Charme, ohne eine ganze Menge zusätzlichen Code zu schreiben. Diese Antwort verwendet ASP.NET MVC 3 Razor C #.

Answer 5

Auch unter Kiran Chands Blog post , er verwendet benutzerdefinierte Metadaten auf dem view-Modell wie zum Beispiel:

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

Dies ist mit benutzerdefinierten Vorlagen kombiniert die Nutzung der Metadaten machen. Ein sauberer und einfacher Ansatz meiner Meinung nach, aber ich möchte diesen häufigen Anwendungsfall sehen, eingebaut in mvc.

Answer 6

Ich bin überrascht, erwähnte niemand es in „additionalViewData“ vorbei und es auf der anderen Seite zu lesen.

(mit Zeilenumbrüchen für Klarheit):

<%= 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"])) %>

Answer 7

Das problem ist, Ihre Vorlage können mehrere HTML-Elemente, so dass MVC nicht wissen, an welche eine um Ihre Größe/Klasse.Sie müssen definieren Sie Sie selbst.

Machen Sie Ihre Vorlage stammen aus Ihrer eigenen Klasse namens TextBoxViewModel:

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, die Sie dies tun können:

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

In Ihrer Ansicht können Sie tun:

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

Die erste form wird das Rendern Standard-Vorlage für string.Die zweite form wird das Rendern der benutzerdefinierten Vorlage.

Alternative syntax verwenden fluent interface:

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 statt dies zu tun, der Ansicht ist, Sie kann auch im controller oder viel besser in der ViewModel:

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 machen können, base TemplateViewModel Klasse - eine gemeinsamkeit, die für alle view-templates - enthält grundlegende Unterstützung für Attribute/etc.

Aber im Allgemeinen denke ich, dass MVC v2 braucht eine bessere Lösung.Es ist immer noch Beta - gehen Sie Fragen für es ;-)

Answer 8

Ich denke, mit CSS ist der Weg zu gehen. Ich wünschte, ich könnte mehr mit .NET-Codierung tun, wie in XAML, aber im Browser CSS ist 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

Answer 9

Wie bei MVC 5, wenn Sie irgendwelche Attribute hinzufügen möchten, können Sie einfach tun

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

Informationen gefunden von diesem Blog

Answer 10

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

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

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

Mit freundlichen Grüßen, Carlos

Answer 11

Dies ist möglicherweise nicht die slickest Lösung sein, aber es ist einfach. Sie können eine Erweiterung der HtmlHelper.EditorFor Klasse schreiben. In dieser Erweiterung können Sie einen Optionsparameter liefern, um die Optionen das Bildschirmtextsystem für die Helfer schreiben. Hier einige Code:

Zuerst wird die Erweiterung Methode:

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 werden die Optionen Objekt:

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 schließlich ist hier die Linie von der String.ascx Vorlage:

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

Ehrlich gesagt, ich glaube, das einfach und klar, die arme Seele ist, die den Code auf der Straße zu halten hat. Und es ist leicht für verschiedene andere Bits von Informationen erweitern Sie Ihre Vorlagen passieren möchten. Es funktioniert gut für mich bisher in einem Projekt, wo ich versuche, so viel wie ich in einer Reihe von Vorlage kann wickeln die umgebende HTML zu helfen, zu standardisieren, ein la http://bradwilson.typepad.com/blog/2009/10/ aspnet-mvc-2-Vorlagen-Teil-5-Master-Seite-templates.html .

Answer 12

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

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

... und auch die Validierung funktioniert.

Answer 13

In meiner Praxis fand ich, dass es am besten ist EditorTemplates zu verwenden, um mit nur einem Htmlhelper in ihm - TextBox, die in den meisten Fällen. Wenn ich eine Vorlage für komplexere HTML-Struktur will, werde ich eine separate Htmlhelper schreiben.

Da wir das ganze Objekt Viewdata anstelle von Htmlattributes des TextBox haften können. Darüber hinaus können wir einige Anpassungscode für einige der Eigenschaften des Viewdata schreiben, wenn sie eine besondere Behandlung benötigen:

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

Im Folgenden sind die Beispiele für die Syntax in der Ansicht und der ausgegebenen 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">

Answer 14

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

Für einzelne Eingabefelder ändern, können Sie die Ausgabe des EditorFor Verfahren 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, wie es sich herausstellt MVC die Klasse der EditorFor Textfelder mit setzt .text-box , daher können Sie einfach diesen Stil zu überschreiben, in Ihrem Stylesheet oder auf Die Seite.

.text-box {
    width: 80em;
}

Darüber hinaus können Sie den Stil für

gesetzt

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

• Diese Direktive überschreibt .text-Box und wird alle Eingabetextfelder, EditorFor oder anderweitig ändern.

Answer 15

Ich hatte auch Probleme mit der Breite der TextBox in MVC3 Einstellung, während das Attribut Clsss Einstellung für TextArea- Steuerung gearbeitet, aber nicht für TextBoxFor Kontrolle oder EditorFor Steuerung:

Ich habe versucht folgende & arbeitete für mich:

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

Auch in diesem Fall Validierungen arbeitet perfekt.

Answer 16

Eine Möglichkeit, um sie herum bekommen könnte, ist von den Delegierten auf dem View-Modell mit dem Druck aus speziellen Rendering wie diese zu behandeln. Ich habe dies für eine Paging-Klasse getan, ich eine öffentliche Eigenschaft auf dem Modell Func<int, string> RenderUrl belichten damit zu umgehen.

So definieren, wie die benutzerdefinierte Bit geschrieben werden:

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

Ausgabe der Blick für die Paging Klasse:

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

... und für die eigentliche Paging Ansicht:

@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 so zu verkomplizieren Dinge zu sehen, aber ich benutze diese überall Pagern und nicht den gleichen Text sehen Code aushielt bekommen sie gemacht werden.

Answer 17

UPDATE: hm, offensichtlich wird dies nicht funktionieren, weil Modell von Wert übergeben wird, um Attribute nicht beibehalten werden; aber ich lasse diese Antwort als eine Idee.

Eine andere Lösung, glaube ich, wäre eine eigene TextBox / etc Helfer hinzuzufügen, die für Ihre eigenen Attribute auf Modell überprüfen.

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

Dies ist einfacher, aber nicht als convinient / flexibel.

Answer 18

Dies ist die sauberste und elegant / einfache Art und Weise hier eine Lösung zu erhalten.

Brilliant Blog-Post und nicht chaotisch Overkill in schriftlicher Form benutzerdefinierter Erweiterung / Hilfsmethoden wie ein verrückter Professor.

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

Answer 19

ich wirklich @tjeerdans mag Antwort, die die EditorTemplate namens String.ascx in dem / Ansichten / Shared / EditorTemplates Ordner verwendet. Es scheint auf diese Frage die straight-forward Antwort. Allerdings wollte ich eine Vorlage mit Razor-Syntax. Darüber hinaus scheint es, dass MVC3 den String Template als Standard verwendet (siehe die Frage Stackoverflow „ mvc Anzeigeschablone für Strings für ganze Zahlen verwendet wird "), so müssen Sie das Modell setzen, anstatt String-Objekt . Meine Vorlage scheint so weit zu arbeiten:

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

Answer 20

Ich löste es !!
Für Razor ist die Syntax:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" }) dies stellt den Textbereich Breite die Breite, die ich im Stil Parameter definiert.
Für ASPx die Syntax ist:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
dies wird den Trick