EditorFor () et propriétés html

Les versions d'aperçu d'Asp.Net MVC 2.0 fournissent des aides comme

Html.EditorFor(c => c.propertyname)

Si le nom de la propriété est une chaîne, le code ci-dessus rend une texbox.

Que faire si je souhaite transmettre les propriétés MaxLength et Size à la zone de texte ou à ma propre propriété de classe css?

Dois-je créer un modèle pour chaque combinaison de taille et de longueur dans mon application? Si tel est le cas, cela ne rend pas les modèles par défaut utilisables.

Dans MVC3, vous pouvez définir la largeur comme suit:

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

J'ai résolu cela en créant un EditorTemplate nommé String.ascx dans mon dossier / 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 }) %>

À mon avis, j'utilise

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

Fonctionne comme un charme pour moi!

Aucune des réponses de ce fil ou de tout autre fil de discussion sur la définition des attributs HTML pour @ Html.EditorFor ne m'a beaucoup aidé. Cependant, j'ai trouvé une excellente réponse à

Styliser un assistant @ Html.EditorFor

J'ai utilisé la même approche et cela a fonctionné à merveille sans écrire beaucoup de code supplémentaire. Notez que l'attribut id de la sortie html de Html.EditorFor est défini. Le code de vue

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

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

La propriété de modèle avec l'annotation des données et le formatage de la date comme "jj MMM aaaa"

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

A fonctionné comme un charme sans écrire beaucoup de code supplémentaire. Cette réponse utilise ASP.NET MVC 3 Razor C #.

Peut-être voudra-t-il consulter l'article du blog de Kiran Chand , il utilise des métadonnées personnalisées sur le modèle de vue, telles que:

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

Ceci est combiné avec des modèles personnalisés qui utilisent les métadonnées. Une approche propre et simple à mon avis, mais j'aimerais voir ce cas d'utilisation courant intégré à mvc.

Je suis surpris que personne n'ait mentionné le passer dans "additionalViewData" et le lire de l'autre côté.

Vue (avec sauts de ligne, pour plus de clarté):

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

Modèle de l'éditeur:

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

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

Le problème est que votre modèle peut contenir plusieurs éléments HTML, donc MVC ne saura pas auquel appliquer votre taille / classe. Vous devrez le définir vous-même.

Faites dériver votre modèle de votre propre classe appelée 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
  }

}

Dans le modèle, vous pouvez faire ceci:

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

À votre avis, vous faites:

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

Le premier formulaire rendra le modèle par défaut pour la chaîne. Le deuxième formulaire rendra le modèle personnalisé.

La syntaxe alternative utilise une interface fluide:

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

Notez qu'au lieu de le faire dans la vue, vous pouvez également le faire dans le contrôleur, ou bien mieux dans le 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) });
}

Notez également que vous pouvez créer la classe TemplateViewModel de base - un terrain d'entente pour tous vos modèles de vue - qui contiendra un support de base pour les attributs / etc.

Mais en général, je pense que MVC v2 a besoin d'une meilleure solution. C'est toujours Beta - allez le demander ;-)

Je pense que l'utilisation de CSS est la voie à suivre. J'aimerais pouvoir faire plus avec le codage .NET, comme en XAML, mais dans le navigateur, le CSS est roi.

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

Comme dans MVC 5, si vous souhaitez ajouter des attributs, vous pouvez simplement faire

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

Informations trouvées sur ce blog

Vous pouvez définir des attributs pour vos propriétés.

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

C'est ce qu'on appelle System.ComponentModel.DataAnnotations. Si vous ne trouvez pas ce ValidationAttributedont vous avez besoin, vous pouvez toujours définir des attributs personnalisés.

Meilleures salutations, Carlos

Ce n'est peut-être pas la solution la plus astucieuse, mais elle est simple. Vous pouvez écrire une extension dans la classe HtmlHelper.EditorFor. Dans cette extension, vous pouvez fournir un paramètre d'options qui écrira les options dans ViewData pour l'assistant. Voici un code:

Tout d'abord, la méthode d'extension:

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

Ensuite, l'objet d'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.
}

Et enfin, voici la ligne du modèle String.ascx:

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

Franchement, je pense que c'est simple et clair pour la pauvre âme qui doit maintenir votre code sur la route. Et il est facile d'étendre à diverses autres informations que vous souhaitez transmettre à vos modèles. Cela fonctionne bien jusqu'à présent pour moi dans un projet où j'essaie d'envelopper autant que possible dans un ensemble de modèles pour aider à standardiser le HTML environnant, à la http://bradwilson.typepad.com/blog/2009/ 10 / aspnet-mvc-2-templates-part-5-master-page-templates.html .

J'ai écrit une entrée de blog pour répondre à ma propre question

Ajout de la prise en charge des attributs html pour les modèles - ASP.Net MVC 2.0 Beta

Je ne sais pas pourquoi cela ne fonctionne pas pour Html.EditorFor mais j'ai essayé TextBoxFor et cela a fonctionné pour moi.

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

... et aussi la validation fonctionne.

Dans ma pratique, j'ai trouvé qu'il est préférable d'utiliser EditorTemplates avec un seul HtmlHelper - TextBox dans la plupart des cas. Si je veux un modèle pour une structure html plus complexe, j'écrirai un HtmlHelper séparé.

Étant donné que nous pouvons coller tout l'objet ViewData à la place de htmlAttributes de la TextBox. De plus, nous pouvons écrire du code de personnalisation pour certaines des propriétés de ViewData si elles nécessitent un traitement spécial:

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

Vous trouverez ci-dessous des exemples de syntaxe dans la vue et le code HTML généré:

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

Parce que la question est pour EditorFor not TextBoxFor, la suggestion de WEFX ne fonctionne pas.

Pour modifier des zones de saisie individuelles, vous pouvez traiter la sortie de la méthode EditorFor:

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

Il est également possible de changer TOUS vos EditorFors car il s'avère que MVC définit la classe des zones de texte EditorFor avec .text-box , vous pouvez donc simplement remplacer ce style, dans votre feuille de style ou sur la page.

.text-box {
    width: 80em;
}

De plus, vous pouvez définir le style pour

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

• cela remplace .text-box et changera toutes les zones de texte d'entrée, EditorFor ou autre.

J'ai également eu un problème avec la définition de la largeur de TextBox dans MVC3, tandis que la définition de l'attribut Clsss fonctionnait pour le contrôle TextArea mais pas pour le contrôle TextBoxFor ou EditorFor:

J'ai essayé de suivre et cela a fonctionné pour moi:

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

également dans ce cas, les validations fonctionnent parfaitement.

Une façon de contourner le problème est d'avoir des délégués sur le modèle de vue pour gérer l'impression d'un rendu spécial comme celui-ci. J'ai fait cela pour une classe de pagination, j'expose une propriété publique sur le modèleFunc<int, string> RenderUrl pour y faire face.

Alors définissez comment le bit personnalisé sera écrit:

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

Sortez la vue de la Pagingclasse:

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

... et pour la Pagingvue réelle :

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

Cela pourrait être considéré comme trop compliqué, mais j'utilise ces téléavertisseurs partout et je ne supporte pas de voir le même code standard pour les rendre.

MISE À JOUR: hm, évidemment cela ne fonctionnera pas car le modèle est passé par valeur donc les attributs ne sont pas préservés; mais je laisse cette réponse comme une idée.

Une autre solution, je pense, serait d'ajouter vos propres helpers TextBox / etc, qui vérifieront vos propres attributs sur le modèle.

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

Celui-ci est plus facile mais pas aussi pratique / flexible.

C'est le moyen le plus propre et le plus élégant / simple d'obtenir une solution ici.

Un article de blog génial et aucune surcharge de travail dans l'écriture de méthodes d'extension / d'aide personnalisées comme un professeur fou.

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

J'ai vraiment aimé la réponse @tjeerdans qui utilise le EditorTemplate nommé String.ascx dans le dossier / Views / Shared / EditorTemplates. Cela semble être la réponse la plus simple à cette question. Cependant, je voulais un modèle utilisant la syntaxe Razor. De plus, il semble que MVC3 utilise le modèle String par défaut (voir la question StackOverflow « Le modèle d'affichage mvc pour les chaînes est utilisé pour les entiers »), vous devez donc définir le modèle sur objet plutôt que sur chaîne. Mon modèle semble fonctionner jusqu'à présent:

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

Je l'ai résolu !!
Pour Razor, la syntaxe est la suivante:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" })ceci ajuste la largeur de la zone de texte à la largeur que j'ai définie dans le paramètre de style.
Pour ASPx, la syntaxe est la suivante:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
cela fera l'affaire