ASP.NET MVC 3 Razor - ajout classe au EditorFor

Question

J'essaie d'ajouter une classe à une entrée.

Cela ne fonctionne pas

 @Html.EditorFor(x => x.Created, new { @class = "date" })
 

Answer 1

L'ajout d'une classe à un modèle d'éditeur n'a pas de sens, car à l'intérieur de ce modèle, vous pourriez avoir plusieurs balises différentes. Vous devez donc assigner la classe dans le template de l'éditeur:

 @Html.EditorFor(x => x.Created)
 

et dans le modèle personnalisé:

 <div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>
 

Answer 2

A partir de MVC 5.1, l'ajout d'une classe à un EditorFor est possible. (La question d'origine spécifiait MVC 3, et la réponse acceptée est toujours la meilleure avec celle considérée.)

 @Html.EditorFor(x=> x.MyProperty, 
    new { htmlAttributes = new { @class = "MyCssClass" } })
 

Voir: http://www.asp.net/mvc/overview/releases/mvc51-release-notes#Bootstrap

Answer 3

Vous ne pouvez pas définir la classe pour le EditorFor générique. Si vous connaissez l'éditeur que vous souhaitez, vous pouvez l'utiliser immédiatement, vous pouvez définir la classe. Vous n'avez pas besoin de créer de modèles personnalisés.

 @Html.TextBoxFor(x => x.Created, new { @class = "date" }) 
 

Answer 4

Je sais que c'est une vieille question, mais j'ai eu le même problème frustrant et je ne voulais pas créer un EditorTemplate qui s'appliquait à toutes les valeurs DateTime (il ya eu des moments dans ma UI là où je voulais l'affichage de l'heure et pas une JQueryUI calendrier déroulant). Dans ma recherche, à la racine des problèmes, je suis tombé sur ont été:

• La norme TextBoxFor helper m'a permis d'appliquer une classe personnalisée de "date-picker" pour rendre le discret JQueryUI de calendrier, mais TextBoxFor ne serait pas un format DateTime sans le temps, par conséquent à l'origine du calendrier de rendu à l'échec.
• La norme EditorFor d'affichage de la date-heure comme une chaîne formatée (lorsque décoré avec les attributs appropriés tels que [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")], mais il ne me permet pas d'appliquer la commande "date-picker" de la classe.

Par conséquent, j'ai créé personnalisé HtmlHelper classe qui a les avantages suivants:

• La méthode convertit automatiquement la date / heure dans le ShortDateString requis par le calendrier JQuery (JQuery échouera si le temps est présent).
• Par défaut, l'aide d'appliquer les htmlAttributes JQuery pour afficher un calendrier, mais ils peuvent être remplacés si besoin est.
• Si la date est nulle, MVC mettre une date de 1/1/0001 comme une valeur. Cette méthode remplace par une chaîne vide.

Je poste ici dans l'espoir que cela pourrait aider quelqu'un d'autre à un point. Toutes les suggestions sur les modifications requises sont les bienvenus.

public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
  var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
  var xDoc = XDocument.Parse(mvcHtmlString.ToHtmlString());
  var xElement = xDoc.Element("input");
  if (xElement != null)
  {
    var valueAttribute = xElement.Attribute("value");
    if (valueAttribute != null)
    {
      valueAttribute.Value = DateTime.Parse(valueAttribute.Value).ToShortDateString();
      if (valueAttribute.Value == "1/1/0001")
        valueAttribute.Value = string.Empty;
    }
  }
  return new MvcHtmlString(xDoc.ToString());
}

Et pour ceux qui veulent connaître la syntaxe JQuery qui ressemble à des objets avec l' date-picker classe de décoration pour rendre ensuite le calendrier, c'est ici:

$(document).ready(function () {
  $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
  $('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});

Espérons que cela aide quelqu'un dans le futur qui a ce besoin.

Answer 5

Il est possible de fournir une classe ou d'autres informations via AdditionalViewData - J'utilise ceci où je permets à un utilisateur de créer un formulaire basé sur des champs de base de données (propertyName, editorType et editorClass)

basé sur votre exemple initial:

 @Html.EditorFor(x => x.Created,new { cssClass = "date" })
 

et dans le modèle personnalisé:

 <div>
@Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>