重构类似的 CHTML，使用 EditorFor 和 LabelFor 呈现不同的属性 [英] Refactor similar CHTML that renders varying properties using EditorFor and LabelFor

查看：19
本文介绍了重构类似的 CHTML，使用 EditorFor 和 LabelFor 呈现不同的属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建一个项目，其中包含许多关于 razor 视图的通用代码.

示例:

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

唯一改变的是模型的属性.

有没有办法用以下内容替换所有代码:

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

解决方案

您可以创建一个 HtmlHelper 扩展方法，该方法将为属性生成所有 html，包括标签和输入元素

使用系统；使用 System.Linq.Expressions;使用 System.Text;使用 System.Web.Mvc;使用 System.Web.Mvc.Html;命名空间 YourAssembly.Html{公共静态类 BootstrapHelper{public static MvcHtmlString BootstrapEditorFor<TModel, TValue>(这个 HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> 表达式){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 验证 = ValidationExtensions.ValidationMessageFor(helper, expression, null, new { @class = "text-danger" });//构建输入元素TagBuilder editorDiv = new TagBuilder("div");editorDiv.AddCssClass("col-xs-4 col-sm-2 col-md-2 col-lg-1");editorDiv.InnerHtml = editor.ToString();//构建验证消息元素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();//合并所有元素StringBuilder html = new StringBuilder();html.Append(label.ToString());html.Append(editorDiv.ToString());html.Append(validationDiv.ToString());//构建外部 divTagBuilder outerDiv = new TagBuilder("div");externalDiv.AddCssClass("form-group");externalDiv.InnerHtml = html.ToString();返回 MvcHtmlString.Create(outerDiv.ToString());}}}

然后你可以在你的 web.config 文件中注册它(意味着你不需要 @using ... 在视图中

<add namespace="System.Web.Mvc"/>....<add namespace="yourAssembly.Html "/>//添加这个</命名空间>

现在在您的主视图中，您只需使用以下 3 行代码即可生成问题中显示的所有 html

@Html.BootstrapEditorFor(m => m.LayoutFrontAmount)@Html.BootstrapEditorFor(m => m.LayoutFrontBackAmount)@Html.BootstrapEditorFor(m => 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屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆