重构类似CHTML呈现使用EditorFor和LabelFor变化特性 [英] Refactor similar CHTML that renders varying properties using EditorFor and LabelFor

问题描述

我建立了很多有关的Razor视图通用代码的项目

例如：

 < D​​IV CLASS =表单组> 
 @ Html.LabelFor（型号=> model.LayoutFrontAmount，htmlAttributes：新{@class =控制标签COL-XS-12 COL-SM-4 COL-MD-3}）
 < D​​IV CLASS =COL-XS-4 COL-SM-2 COL-MD-2 COL-LG-1> 
 @ Html.EditorFor（型号=> model.LayoutFrontAmount，新{htmlAttributes = {新@class =表格控}}）
< / DIV> 
< D​​IV CLASS =COL-XS-12 COL-MD-8 COL-SM-偏移4 COL-MD-偏移3> 
<跨度类=帮助块> @ Html.ValidationMessageFor（型号=> model.LayoutFrontAmount，新{@class =TEXT-危险}）LT; / SPAN> 
< / DIV> 
< / DIV> 
 
< D​​IV CLASS =表单组> 
 @ Html.LabelFor（型号=> model.LayoutFrontBackAmount，htmlAttributes：新{@class =控制标签COL-XS-12 COL-SM-4 COL-MD-3}）
 < D​​IV CLASS =COL-XS-4 COL-SM-2 COL-MD-2 COL-LG-1> 
 @ Html.EditorFor（型号=> model.LayoutFrontBackAmount，新{htmlAttributes = {新@class =表格控}}）
< / DIV> 
< D​​IV CLASS =COL-XS-12 COL-MD-8 COL-SM-偏移4 COL-MD-偏移3> 
<跨度类=帮助块> @ Html.ValidationMessageFor（型号=> model.LayoutFrontBackAmount，新{@class =TEXT-危险}）LT; / SPAN> 
< / DIV> 
< / DIV> 
 
< D​​IV CLASS =表单组> 
 @ Html.LabelFor（型号=> model.LayoutTRC，htmlAttributes：新{@class =控制标签COL-XS-12 COL-SM-4 COL-MD-3}）
 < D​​IV CLASS =COL-XS-4 COL-SM-2 COL-MD-2 COL-LG-1> 
 @ Html.EditorFor（型号=> model.LayoutTRC，新{htmlAttributes = {新@class =表格控}}）
< / DIV> 
< D​​IV CLASS =COL-XS-12 COL-MD-8 COL-SM-偏移4 COL-MD-偏移3> 
<跨度类=帮助块> @ Html.ValidationMessageFor（型号=> model.LayoutTRC，新{@class =TEXT-危险}）LT; / SPAN> 
< / DIV> 
< / DIV> 
  

这改变是Model的财产的唯一的事情。

有没有办法喜欢的东西来取代所有代码：

  @ TemplateName1（型号=>的模式。 LayoutFrontAmount）
 @ TemplateName1（型号=> model.LayoutFrontBackAmount）
 @ TemplateName1（型号=> model.LayoutTRC）
  

解决方案

您可以创建一个的HtmlHelper扩展方法，将产生所有属性​​的HTML，包括标签和输入元素

 使用系统;使用System.Linq.Expressions 
; 
使用System.Text; 
使用System.Web.Mvc; 
使用System.Web.Mvc.Html; 
 
命名空间YourAssembly.Html 
 {
公共静态类BootstrapHelper 
 {
公共静态MvcHtmlString BootstrapEditorFor<的TModel，TValue>（此的HtmlHelper<的TModel>帮手，表达< Func键<的TModel，TValue>>表达式）
 {
 MvcHtmlString标签= LabelExtensions.LabelFor（辅助，表达，新的{@class =控制标签COL-XS-12 COL-SM -4 COL-MD-3}）; 
 MvcHtmlString编辑= EditorExtensions.EditorFor（辅助，表达，新的{htmlAttributes = {新@class =表格控}}）; 
 MvcHtmlString验证= ValidationExtensions.ValidationMessageFor（辅助，表达，空，新的{@class =TEXT-危险}）; 
 
 //生成输入元素
 TagBuilder editorDiv =新TagBuilder（分区）; 
 editorDiv.AddCssClass（COL-XS-4 COL-SM-2 COL-MD-2 COL-LG-1）; 
 editorDiv.InnerHtml = editor.ToString（）; 
 //生成验证消息元素
 TagBuilder validationSpan =新TagBuilder（跨度）; 
 validationSpan.AddCssClass（帮助块）; 
 validationSpan.InnerHtml = validation.ToString（）; 
 TagBuilder validationDiv =新TagBuilder（分区）; 
 validationDiv.AddCssClass（COL-XS-12 COL-MD-8 COL-SM-偏移-4- COL-MD-偏移-3）; 
 validationDiv.InnerHtml = validationSpan.ToString（）; 
 //把所有元素
 StringBuilder的HTML =新的StringBuilder（）; 
 html.Append（label.ToString（））; 
 html.Append（editorDiv.ToString（））; 
 html.Append（validationDiv.ToString（））; 
 //生成外层div 
 TagBuilder outerDiv =新TagBuilder（分区）; 
 outerDiv.AddCssClass（形组）; 
 outerDiv.InnerHtml = html.ToString（）; 
返回MvcHtmlString.Create（outerDiv.ToString（））; 
} 
} 
} 
  

然后，你可以这样在注册你的的web.config 文件（意味着你不需要 @using ... 视图

 <&命名空间GT; 
<添加命名空间=System.Web.Mvc/> 
 .... 
<添加命名空间=yourAssembly.Html/> //添加此
< /命名空间> 
  

现在在你的主视图您可以生成你的问题只有以下3行代码中显示的所有HTML

  @ Html.BootstrapEditorFor（M = GT; m.LayoutFrontAmount）
 @ Html.BootstrapEditorFor（M = GT; m.LayoutFrontBackAmount）
 @ Html.BootstrapEditorFor（M = GT，M .LayoutTRC）
  

如果你想这是在多个项目中重用，在单独的DLL编译它在项目中添加对它的引用。

I am building a project with a lot of common code regarding the razor view.

Example:

<div class="form-group">
    @Html.LabelFor(model => model.LayoutFrontAmount, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
    <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1">
        @Html.EditorFor(model => model.LayoutFrontAmount, new { htmlAttributes = new { @class = "form-control" } })
    </div>
    <div class="col-xs-12 col-md-8 col-sm-offset-4 col-md-offset-3">
        <span class="help-block">@Html.ValidationMessageFor(model => model.LayoutFrontAmount, "", new { @class = "text-danger" })</span>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.LayoutFrontBackAmount, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
    <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1">
        @Html.EditorFor(model => model.LayoutFrontBackAmount, new { htmlAttributes = new { @class = "form-control" } })
    </div>
    <div class="col-xs-12 col-md-8 col-sm-offset-4 col-md-offset-3">
        <span class="help-block">@Html.ValidationMessageFor(model => model.LayoutFrontBackAmount, "", new { @class = "text-danger" })</span>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.LayoutTRC, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
    <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1">
        @Html.EditorFor(model => model.LayoutTRC, new { htmlAttributes = new { @class = "form-control" } })
    </div>
    <div class="col-xs-12 col-md-8 col-sm-offset-4 col-md-offset-3">
        <span class="help-block">@Html.ValidationMessageFor(model => model.LayoutTRC, "", new { @class = "text-danger" })</span>
    </div>
</div>

The only thing that changes is the Model's property.

Is there a way to replace all the code with something like:

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

解决方案

You can create a HtmlHelper extension method that will generate all the html for a property, including the label and input element

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<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> 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());
    }
  }
}

Then you can register this in your web.config file (means you do not need @using ... in the view

<namespaces>
  <add namespace="System.Web.Mvc" />
  ....
  <add namespace="yourAssembly.Html " /> // add this
</namespaces>

Now in your main view your can generate all the html shown in your question with just the following 3 lines of code

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

And if you want this to be reusable across multiple projects, compile it in separate dll and add a reference to it in your projects.

这篇关于重构类似CHTML呈现使用EditorFor和LabelFor变化特性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！