ASP.NET MVC 3 Razor – Ajout de classe à EditorFor

J’essaie d’append une classe à une entrée.

Cela ne fonctionne pas:

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

L’ajout d’une classe à Html.EditorFor n’a pas de sens, car à l’intérieur de son modèle, vous pourriez avoir beaucoup de 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é:

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

À partir d’ASP.NET MVC 5.1, EditorFor est possible d’append une classe à un EditorFor (la question d’origine spécifiait ASP.NET MVC 3 et la réponse acceptée est toujours la meilleure).

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

Voir: Nouveautés d’ASP.NET MVC 5.1, prise en charge de Bootstrap pour les modèles d’éditeur

Vous ne pouvez pas définir de 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" }) 

Vous pouvez utiliser:

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

(Au moins avec ASP.NET MVC 5, mais je ne sais pas comment c’était avec ASP.NET MVC 3)

J’avais le même problème frustrant et je ne voulais pas créer un EditorTemplate qui s’appliquerait à toutes les valeurs DateTime (il y avait des moments dans mon interface utilisateur où je voulais afficher l’heure et non un calendrier déroulant de l’ interface utilisateur jQuery ). Dans mes recherches, les problèmes fondamentaux que j’ai rencontrés étaient les suivants:

  • L’assistant TextBoxFor standard m’a permis d’appliquer une classe personnalisée de “sélecteur de date” pour afficher le calendrier de l’interface utilisateur jQuery, mais TextBoxFor ne formaterait pas un DateTime sans heure, ce qui entraînerait l’échec du rendu du calendrier.
  • Le standard EditorFor affiche le DateTime sous la forme d’une chaîne formatée (lorsqu’il est décoré avec les atsortingbuts appropriés tels que [DisplayFormat(ApplyFormatInEditMode = true, DataFormatSsortingng = "{0:dd/MM/yyyy}")] , mais cela ne me permettrait pas appliquer la classe personnalisée “date-picker”.

Par conséquent, j’ai créé une classe HtmlHelper personnalisée qui présente les avantages suivants:

  • La méthode convertit automatiquement le DateTime en ShortDateSsortingng nécessaire au calendrier jQuery (jQuery échouera si l’heure est présente).
  • Par défaut, l’assistant applique les atsortingbuts htmlAtsortingbutes requirejs pour afficher un calendrier jQuery, mais ils peuvent être remplacés si nécessaire.
  • Si la date est null, ASP.NET MVC mettra une date de 1/1/0001 en tant que valeur.

Cette méthode remplace celle par une chaîne vide.

 public static MvcHtmlSsortingng CalenderTextBoxFor(this HtmlHelper htmlHelper, Expression> expression, object htmlAtsortingbutes = null) { var mvcHtmlSsortingng = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAtsortingbutes ?? new { @class = "text-box single-line date-picker" }); var xDoc = XDocument.Parse(mvcHtmlSsortingng.ToHtmlSsortingng()); var xElement = xDoc.Element("input"); if (xElement != null) { var valueAtsortingbute = xElement.Atsortingbute("value"); if (valueAtsortingbute != null) { valueAtsortingbute.Value = DateTime.Parse(valueAtsortingbute.Value).ToShortDateSsortingng(); if (valueAtsortingbute.Value == "1/1/0001") valueAtsortingbute.Value = ssortingng.Empty; } } return new MvcHtmlSsortingng(xDoc.ToSsortingng()); } 

Et pour ceux qui veulent connaître la syntaxe JQuery qui recherche les objects avec la décoration de classe de date-picker pour ensuite afficher le calendrier, la voici:

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

Il est possible de fournir une classe ou d’autres informations via AdditionalViewData – je l’utilise là où je permets à un utilisateur de créer un formulaire basé sur des champs de firebase database (propertyName, editorType et editorClass).

Basé sur votre exemple initial:

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

et dans le modèle personnalisé:

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

Il n’y a aucun remplacement EditorFor qui vous permet de passer un object anonyme dont les propriétés seraient en quelque sorte ajoutées en tant qu’atsortingbuts sur une balise, en particulier pour les modèles d’éditeur intégrés. Vous devrez écrire votre propre modèle d’éditeur personnalisé et transmettre la valeur souhaitée en tant que données de vue supplémentaires.

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

ne permet pas de transmettre des arguments à la zone de texte

Voici comment vous pouvez appliquer des atsortingbuts.

 @Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" }) 

En utilisant jQuery, vous pouvez le faire facilement:

 $("input").addClass("class-name") 

Voici votre balise d’entrée

 @Html.EditorFor(model => model.Name) 

Pour DropDownlist, vous pouvez utiliser celui-ci:

 $("select").addClass("class-name") 

Pour Dropdownlist:

 @Html.DropDownlistFor(model=>model.Name) 

Vous pouvez créer le même comportement en créant un éditeur personnalisé simple appelé DateTime.cshtml, en l’enregistrant dans Views / Shared / EditorTemplates.

 @model DateTime @{ var css = ViewData["class"] ?? ""; @Html.TextBox("", (Model != DateTime.MinValue? Model.ToSsortingng("dd/MM/yyyy") : ssortingng.Empty), new { @class = "calendar medium " + css}); } 

et dans vos vues

 @Html.EditorFor(model => model.StartDate, new { @class = "required" }) 

Notez que dans mon exemple, j’ai codé en dur deux classes CSS et le format de date. Vous pouvez bien sûr changer cela. Vous pouvez également faire la même chose avec d’autres atsortingbuts HTML, comme readonly, disabled, etc.

J’ai utilisé une autre solution utilisant des sélecteurs d’atsortingbuts CSS pour obtenir ce dont vous avez besoin.

Indiquez l’atsortingbut HTML que vous connaissez et mettez le style que vous voulez.

Comme ci-dessous:

 input[type="date"] { width: 150px; } 

Pas besoin de créer un template personnalisé pour MVC 4. Utilisez TextBox au lieu de EditFor ici les atsortingbuts html spéciaux ne sont pas supportés, ils ne sont supportés que par MVC 5. TextBox devrait supporter MVC 4, je ne connais pas d’autre version.

 @Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" }) 

Alors que la question visait MVC 3.0, nous constatons que le problème persiste également dans MVC 4.0. MVC 5.0 inclut désormais une surcharge pour htmlAtsortingbutes.

Je suis obligé d’utiliser MVC 4.0 sur mon lieu de travail actuel et je devais append une classe CSS pour l’intégration de JQuery. J’ai résolu ce problème en utilisant une seule méthode d’extension …

Méthode d’extension:

 using System.Linq; using System.Web.Mvc; using System.Web.Routing; using System.Xml.Linq; namespace MyTest.Utilities { public static class MVCHelperExtensionMethods { public static MvcHtmlSsortingng AddHtmlAtsortingbutes(this MvcHtmlSsortingng input, object htmlAtsortingbutes) { // WE WANT TO INJECT INTO AN EXISTING ELEMENT. IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE // CREATE THE ATTRIBUTE WITH DATA VALUES. // USE XML PARSER TO PARSE HTML ELEMENT var xdoc = XDocument.Parse(input.ToHtmlSsortingng()); var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault(); // IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED. if (rootElement == null) { return input; } // USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES var routeValueDictionary = new RouteValueDictionary(htmlAtsortingbutes); foreach (var routeValue in routeValueDictionary) { var atsortingbute = rootElement.Atsortingbute(routeValue.Key); if (atsortingbute == null) { atsortingbute = new XAtsortingbute(name: routeValue.Key, value: routeValue.Value); rootElement.Add(atsortingbute); } else { atsortingbute.Value = ssortingng.Format("{0} {1}", atsortingbute.Value, routeValue.Value).Trim(); } } var elementSsortingng = rootElement.ToSsortingng(); var response = new MvcHtmlSsortingng(elementSsortingng); return response; } } } 

Utilisation du balisage HTML:

 @Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAtsortingbutes(new { @class = "form-control" }) 

(Assurez-vous d’inclure l’espace de nommage de la méthode d’extension dans la vue du razor)

Explication: L’idée est d’injecter dans le HTML existant. J’ai opté pour parsingr l’élément actuel en utilisant Linq-to-XML en utilisant XDocument.Parse() . Je passe le htmlAtsortingbutes en tant qu’object de type. J’utilise MVC RouteValueDictionary pour parsingr les htmlAtsortingbutes transmis. Je fusionne les atsortingbuts là où ils existent déjà ou j’ajoute un nouvel atsortingbut s’il n’existe pas encore.

Dans le cas où l’entrée n’est pas analysable par XDocument.Parse() j’abandonne tout espoir et renvoie la chaîne d’entrée d’origine.

Maintenant, je peux utiliser les avantages de DisplayFor (rendu approprié des types de données tels que la devise), mais j’ai également la possibilité de spécifier des classes css (et tout autre atsortingbut). Peut être utile pour append des atsortingbuts tels que ng-* ou ng-* (angular).

Vous pouvez aussi le faire via jQuery:

 $('#x_Created').addClass(date); 

Je voulais juste définir la taille d’une zone de texte sur une page. Les atsortingbuts de codage sur le modèle et la création de modèles d’éditeur personnalisés étaient excessifs. Je viens donc de comstackr l’appel @ Html.EditorFor avec une balise span appelée classe qui spécifie la taille de la zone de texte.

Déclaration de classe CSS:

 .SpaceAvailableSearch input { width:25px; } 

Voir le code:

 @Html.EditorFor(model => model.SearchForm.SpaceAvailable) 

Un meilleur moyen d’appliquer la classe à @Html.EditorFor() dans MVC3 RAzor est

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

Il appenda le style ci-dessus à votre EditorFor()

Cela fonctionne pour MVC3.