如何使 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 下的特定控制器视图文件夹中。

编辑：这是一个演示这一点的链接。 编辑器模板

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

地址 Model

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>

创建视图：这是我的视图，它将为我的 model 实现编辑器模板。 注意@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>

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

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

Answer 2

从 DRY 的意义上说，我没有看到任何需要删除的重复项。 如果表单上有 3 个相似的字段，则标记中需要三个相似的元素。

Answer 3

为什么不引入 AddressType 字段？ 您提到的所有 3 种地址类型都共享相同的字段，只是它们的类型不同； 将设置每个 appart 的是 AddressType 的值。 说得通？