c# - 如何使 razor 模板中的 html 助手更具可重用性？

Question

我有一个包含多个地址的表单。公司地址、账单地址和送货地址。当然，我想使用相同的代码。

我的 Razor 模板看起来像这样:

<div class="std-form-line">
    <span class="std-form-no-label"></span>
    @Html.TextBoxFor(x => x.BillingAddress.Line2, new { Class = "optional" })
    @Html.ValidationMessageFor(x => x.BillingAddress.Line2)
</div>
<div class="std-form-line">
    <span class="std-form-no-label"></span>
    @Html.TextBoxFor(x => x.BillingAddress.Line3, new { Class = "optional" })
    @Html.ValidationMessageFor(x => x.BillingAddress.Line3)
</div>
....

渲染后看起来像这样:

<input type="text" value="" name="BillingAddress.Line1" id="BillingAddress_Line1" data-val-required="The Street Address field is required." data-val="true" class="text-box single-line">

现在说我将有相同的代码，用于业务和运输，但它看起来像这样:

<div class="std-form-line">
    <span class="std-form-no-label"></span>
      @Html.TextBoxFor(x => x.BusinessAddress.Line2, new { Class = "optional" })
</div>
<div class="std-form-line">
    <span class="std-form-no-label"></span>
      @Html.TextBoxFor(x => x.BusinessAddress.Line3, new { Class = "optional" })
</div>

我怎样才能摆脱这种代码重复？

Answer 1

我的做法是为“地址”创建强类型显示/编辑器模板。

然后调用@Html.EditorFor(x=>x.BusinessAddress)或@Html.DisplayFor(x=>x.BusinessAddress)

您还可以为不同的用途创建不同的模板，然后选择性地在 Editor/DisplayFor 方法中提供模板的名称。

顺便说一句，我提到的模板可能分别位于 ~Views/Shared/EditorTemplates 或 ~Views/Shared/DisplayTemplates 文件夹中。或者它们可能位于 EditorTemplates 或 DisplayTemplates 下的特定 Controller View 文件夹中。

编辑:这是演示这一点的链接。 Editor Tempates

编辑 2:根据您的评论，这是一个尝试进一步解释的示例。

地址模型

public partial class Address
{
    public int AddressId { get; set; }
    public string Street1 { get; set; }
    public string Street2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
}

编辑器模板:此文件名为“Address.cshtml”，位于我的“~Views/Shared/EditorTemplates”文件夹中。

@model Address

@Html.HiddenFor(model => model.AddressId)

<div class="editor-label">
    @Html.LabelFor(model => model.Street1)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Street1)
    @Html.ValidationMessageFor(model => model.Street1)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Street2)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Street2)
    @Html.ValidationMessageFor(model => model.Street2)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.City)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.City)
    @Html.ValidationMessageFor(model => model.City)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.State)
</div>
<div class="editor-field">
    @* Populated from Helper *@
    @Html.DropDownListFor(m => m.State, new SelectList(statesDictionary, "Key", "Value"), string.Empty)
    @Html.ValidationMessageFor(model => model.State)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Zip)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Zip)
    @Html.ValidationMessageFor(model => model.Zip)
</div>

创建 View :这是我的 View ，将为我的模型实现编辑器模板。注意行 @Html.EditorForModel();

@model Address

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Address</legend>

        @Html.EditorForModel()

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

现在，如果我的 View 模型是其他东西，链接到“地址”，我会使用 @Html.EditorFor(model => model.BusinessAddress)

至于名字，那完全在你的控制之下。默认情况下，它们会映射到您的属性名称，但您可以通过在 EditorFor 重载中提供包含您的 html 属性的对象来更改任何名称。