在 ASP.NET Core 中创建自定义编辑器

Question

我需要一些建议。我想为特定对象类型实现我自己的自定义编辑器Address。我首先阅读了 .NET Core 网站上的 Tag Helpers 文档，然后阅读了 Core 网站上的 View Components 的相关信息，但对于我的确切场景，我都没有真正做到。

我有一个模特Address：

public class Address
{
    public Guid Id { get; set; }
    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string City { get; set; }
    public string StateCode { get; set; }
    public string PostalCode { get; set; }
}

我想创建一个自定义编辑器模板、标签助手或视图组件，让我可以做这样的事情（在我的“编辑”视图中）：

@model TestApplication.Models.Customer

<h2>Edit Customer</h2>

<form asp-action="Edit">
    <div class="form-horizontal">
    <h4>Edit Customer</h4>
    <hr />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
    <address-editor asp-for="HomeAddress" />
    <address-editor asp-for="WorkAddress" />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</form>

我希望 HTML 像这样呈现：

编辑客户

<form asp-action="Edit">
    <div class="form-horizontal">
    <h4>Edit Customer</h4>
    <hr />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="Name" name="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
    <h4>Home Address</h4>
    <input type="hidden" asp-for="HomeAddress_Id" />
    <div class="form-group">
        <label asp-for="HomeAddress_AddressLine1" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_AddressLine1" name="HomeAddress_AddressLine1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_AddressLine2" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_AddressLine2" name="HomeAddress_AddressLine2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_City" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_City" name="HomeAddress_City" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_StateCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_StateCode" name="HomeAddress_StateCode" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_PostalCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_PostalCode" name="HomeAddress_PostalCode" class="form-control" />
        </div>
    </div>
    <h4>Work Address</h4>
    <input type="hidden" asp-for="WorkAddress_Id" />
    <div class="form-group">
        <label asp-for="WorkAddress_AddressLine1" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_AddressLine1" name="WorkAddress_AddressLine1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_AddressLine2" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_AddressLine2" name="WorkAddress_AddressLine2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_City" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_City" name="WorkAddress_City" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_StateCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_StateCode" name="WorkAddress_StateCode" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_PostalCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_PostalCode" name="WorkAddress_PostalCode" class="form-control" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</form>

通过查看编辑器模板，我的方向是否正确？如果是这样，我如何在控件名称前加上 Model.PropertyName（即 HomeAddress_）？

Answer 1

我相信我的答案来自对视图组件的更多研究。我本可以选择标签助手、视图组件或编辑器模板。我决定使用视图组件，并且需要知道如何将整个模型信息传递到视图组件中，好吧，this question 帮助我到达了那里。我遇到的问题（或疑问）是我需要了解ModelExpression。该类包含我需要的所有内容（名称和型号），因此我能够执行以下操作：

<vc:address-editor asp-for="@Model.HomeAddress"></vc:address-editor>

然后，在我的 AddressEditor ViewComponent 中，我只使用了我需要的两个属性：

 public IViewComponentResult Invoke(ModelExpression aspFor)
 {
     ViewBag.AspFor = aspFor.Name;

     return View(aspFor.Model);
 }