Właściwości EditorFor () i html

W MVC3 możesz ustawić szerokość w następujący sposób:

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

Rozwiązałem to tworząc EditorTemplate o nazwie String.ascx w folderze my/Views/Shared / EditorTemplates:

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

Moim zdaniem używam

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

Żadna z odpowiedzi w tym lub innym wątku na ustawianie atrybutów HTML dla @Html.Edytor był dla mnie bardzo pomocny. Jednak znalazłem świetną odpowiedź na

Stylizacja @ Html.EditorFor helper

Użyłem tego samego podejścia i działało pięknie bez pisania dużo dodatkowego kodu. Zauważ, że atrybut id wyjścia html Html.EditorFor jest ustawiony. Kod widoku

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

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

Właściwość modelu z adnotacją do danych i formatowaniem daty jako " dd MMM yyyy "

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

Zadziałało jak czar bez napisania dużo dodatkowego kodu. Ta odpowiedź wykorzystuje ASP.NET MVC 3 Razor C#.

Może warto spojrzeć na wpis Kiran Chand na blogu , używa niestandardowych metadanych modelu widoku, takich jak:

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

Jest to połączone z niestandardowymi szablonami, które wykorzystują metadane. Moim zdaniem czyste i proste podejście, ale chciałbym zobaczyć ten wspólny przypadek użycia wbudowany w mvc.

Dziwię się, że nikt nie wspomniał o podawaniu go w "additionalViewData" i czytaniu go po drugiej stronie.

Zobacz (z podziałem linii, dla jasności):

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

Szablon edytora:

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

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

Problem polega na tym, że szablon może zawierać kilka elementów HTML, więc MVC nie będzie wiedział, do którego z nich zastosować rozmiar / klasę. Sam musisz to zdefiniować.

Stwórz szablon z własnej klasy o nazwie 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
  }

}

W szablonie możesz to zrobić:

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

Twoim zdaniem robisz:

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

Pierwszy formularz renderuje domyślny szablon dla string. Drugi formularz renderuje niestandardowy szablon.

Alternatywa składnia use 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) %>

Zauważ, że zamiast robić to w widoku, możesz to zrobić również w kontrolerze, lub znacznie lepiej w 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) });
}

Zauważ również, że możesz stworzyć podstawową klasę TemplateViewModel - wspólną płaszczyznę dla wszystkich szablonów widoku - która będzie zawierała podstawowe wsparcie dla atrybutów / etc.

Ale ogólnie uważam, że MVC v2 potrzebuje lepszego rozwiązania. Jest jeszcze Beta - go zapytaj o to; -)

Myślę, że użycie CSS jest dobrym rozwiązaniem. Chciałbym zrobić więcej z kodowaniem. NET, jak w XAML, ale w przeglądarce CSS jest królem.

#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

Jak w MVC 5, jeśli chcesz dodać jakieś atrybuty możesz po prostu zrobić

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

Informacje Znalezione z tego bloga

Możesz zdefiniować atrybuty dla swoich właściwości.

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

Jest to znane jako System.ComponentModel.DataAnnotations. Jeśli nie możesz znaleźć ValidationAttribute, którego potrzebujesz, możesz zawsze zdefiniować własne atrybuty.

Może nie jest to najfajniejsze rozwiązanie, ale jest proste. Możesz napisać rozszerzenie do HtmlHelper.Edytor dla klasy. W tym rozszerzeniu możesz podać parametr options, który zapisze opcje do ViewData dla helpera. Oto jakiś kod:

Najpierw metoda rozszerzenia:

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

Następnie obiekt options:

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

I na koniec, oto linia ze Sznurka.szablon ascx:

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

Nie wiem dlaczego nie działa na Html.EditorFor ale próbowałem TextBoxFor i to działało dla mnie.

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

...a także Walidacja działa.

W mojej praktyce okazało się, że najlepiej jest używać EditorTemplates tylko z jednym HtmlHelper w nim-TextBox, który jest w większości przypadków. Jeśli chcę szablon dla bardziej złożonej struktury html, napiszę osobny HtmlHelper.

Biorąc pod uwagę, że możemy przykleić cały obiekt ViewData w miejsce htmlAttributes pola tekstowego. Dodatkowo możemy napisać kod dostosowujący niektóre właściwości ViewData, jeśli wymagają one specjalnego traktowania:

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

Poniżej znajdują się przykłady składni w widoku i wyjściowym 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">

Ponieważ pytanie jest do Edytorfor a nie TextBoxFor sugestia WEFX nie działa.

Aby zmienić poszczególne pola wejściowe, można przetworzyć wyjście metody EditorFor:

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

Jest również możliwe, aby zmienić wszystkie EditorFors jak się okazuje MVC ustawia klasę EditorFor pola tekstowe z .text-box , dlatego możesz po prostu nadpisać ten styl, w arkuszu stylów lub na stronie.

.text-box {
    width: 80em;
}

Dodatkowo można ustawić styl dla

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

• to się nadpisuje .text-box i zmieni wszystkie pola tekstowe, Edytor lub w inny sposób.

Miałem również problem z ustawieniem szerokości Textboxa w MVC3, podczas gdy ustawienie atrybutu Clsss działało dla kontroli TextArea, ale nie dla TextBoxFor control lub EditorFor control:

Próbowałem śledzić i to mi się udało:

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

Również w tym przypadku walidacje działają doskonale.

Jednym ze sposobów na obejście tego jest posiadanie delegatów na model widoku, aby obsłużyć drukowanie specjalnego renderingu w ten sposób. Zrobiłem to dla klasy przywoławczej, ujawniam własność publiczną na modelu Func<int, string> RenderUrl, aby sobie z tym poradzić.

Zdefiniuj więc jak będzie zapisywany Niestandardowy bit:

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

Wypisuje widok dla klasy Paging:

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

...i dla rzeczywistego widoku Paging:

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

UPDATE: hm, oczywiście to nie zadziała, ponieważ model jest przekazywany przez wartość, więc atrybuty nie są zachowane; ale zostawiam tę odpowiedź jako pomysł.

Innym rozwiązaniem, jak sądzę, byłoby dodanie własnych Helperów TextBox / etc, które będą sprawdzać twoje atrybuty w modelu.

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

Jest to najczystszy i najbardziej elegancki / prosty sposób, aby uzyskać rozwiązanie tutaj.

Genialny post na blogu i bez bałaganu w pisaniu niestandardowych metod rozszerzeń / pomocników jak szalony profesor.

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

Bardzo podobała mi się odpowiedź @tjeerdans, która wykorzystuje EditorTemplate o nazwie String.ascx w folderze/Views/Shared / EditorTemplates. Wydaje się, że jest to najbardziej prosta odpowiedź na to pytanie. Chciałem jednak szablon wykorzystujący składnię Razor. Ponadto wygląda na to, że MVC3 używa szablonu String jako domyślnego (zobacz pytanie StackOverflow "mvc display template for strings is used for integers "), więc musisz ustawić model na obiekt,a nie Łańcuch. Mój szablon wydaje się do tej pory działa:

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

Rozwiązałem to!!
Dla Razora składnia jest:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" }) spowoduje to dostosowanie szerokości obszaru tekstowego do szerokości zdefiniowanej w parametrze style.
Dla ASPx składnia jest:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
to załatwi sprawę