Refactor CHTML simile che rende variabili le proprietà usando EditorFor e LabelFor

Sto costruendo un progetto con un sacco di codice comune per quanto riguarda la vista del razor.

Esempio:

@Html.LabelFor(model => model.LayoutFrontAmount, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
@Html.EditorFor(model => model.LayoutFrontAmount, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LayoutFrontAmount, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LayoutFrontBackAmount, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
@Html.EditorFor(model => model.LayoutFrontBackAmount, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LayoutFrontBackAmount, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LayoutTRC, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
@Html.EditorFor(model => model.LayoutTRC, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LayoutTRC, "", new { @class = "text-danger" })

L’unica cosa che cambia è la proprietà del modello.

C’è un modo per sostituire tutto il codice con qualcosa di simile:

 @TemplateName1(model => model.LayoutFrontAmount) @TemplateName1(model => model.LayoutFrontBackAmount) @TemplateName1(model => model.LayoutTRC) 

Puoi creare un metodo di estensione HtmlHelper che genererà tutto il codice html per una proprietà, inclusa l’etichetta e l’elemento di input

 using System; using System.Linq.Expressions; using System.Text; using System.Web.Mvc; using System.Web.Mvc.Html; namespace YourAssembly.Html { public static class BootstrapHelper { public static MvcHtmlString BootstrapEditorFor(this HtmlHelper helper, Expression> expression) { MvcHtmlString label = LabelExtensions.LabelFor(helper, expression, new { @class = "control-label col-xs-12 col-sm-4 col-md-3" }); MvcHtmlString editor = EditorExtensions.EditorFor(helper, expression, new { htmlAttributes = new { @class = "form-control" } }); MvcHtmlString validation = ValidationExtensions.ValidationMessageFor(helper, expression, null, new { @class = "text-danger" }); // Build the input elements TagBuilder editorDiv = new TagBuilder("div"); editorDiv.AddCssClass("col-xs-4 col-sm-2 col-md-2 col-lg-1"); editorDiv.InnerHtml = editor.ToString(); // Build the validation message elements TagBuilder validationSpan = new TagBuilder("span"); validationSpan.AddCssClass("help-block"); validationSpan.InnerHtml = validation.ToString(); TagBuilder validationDiv = new TagBuilder("div"); validationDiv.AddCssClass("col-xs-12 col-md-8 col-sm-offset-4 col-md-offset-3"); validationDiv.InnerHtml = validationSpan.ToString(); // Combine all elements StringBuilder html = new StringBuilder(); html.Append(label.ToString()); html.Append(editorDiv.ToString()); html.Append(validationDiv.ToString()); // Build the outer div TagBuilder outerDiv = new TagBuilder("div"); outerDiv.AddCssClass("form-group"); outerDiv.InnerHtml = html.ToString(); return MvcHtmlString.Create(outerDiv.ToString()); } } } 

Quindi puoi registrarlo nel tuo file web.config (significa che non hai bisogno di @using ... nella vista

   ....  // add this  

Ora nella tua vista principale puoi generare tutto l’html mostrato nella tua domanda con solo le seguenti 3 linee di codice

 @Html.BootstrapEditorFor(m => m.LayoutFrontAmount) @Html.BootstrapEditorFor(m => m.LayoutFrontBackAmount) @Html.BootstrapEditorFor(m => m.LayoutTRC) 

E se vuoi che questo sia riutilizzabile su più progetti, compila in una dll separata e aggiungi un riferimento ad esso nei tuoi progetti.

Dipende da quali sono i tipi per LayoutFrontAmount, LayoutFrontBackAmount e LayoutTRC. Sono tutte queste stringhe? In tal caso, potresti avere un file di visualizzazione comune che memorizza il modello per visualizzarne ciascuno, quindi visualizzarne ciascuno utilizzando @Html.Partial() nella visualizzazione principale:

MyView.cshtml

 @model string 
@Html.LabelFor(model => Model, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
@Html.EditorFor(model => Model, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => Model, "", new { @class = "text-danger" })

E poi nel file di visualizzazione principale è ansible eseguire il rendering di ciascuno di LayoutFrontAmount, LayoutFrontBackAmount e LayoutTRC come segue:

 @Html.Partial("MyView", Model.LayoutFrontAmount); @Html.Partial("MyView", Model.LayoutFrontBackAmount); @Html.Partial("MyView", Model.LayoutTRC); 

Se sono di tipo diverso, ciò pone una sfida più grande.