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

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; }
}

我想创建一个自定义编辑器模板、标签助手或视图组件，以允许我执行以下操作（在我的 "Edit" 视图中）：

@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

我相信我的答案是通过更多地研究视图组件得出的。我本可以朝标签助手、视图组件或编辑器模板的方向发展。我决定使用视图组件，并且需要知道如何将整个模型信息传递到视图组件中，嗯， helped me get there. The issue I was having (or question) was that I needed to know about ModelExpression。 class 包含我需要的所有内容（名称和型号），因此我可以执行以下操作：

<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);
 }

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

Create Custom Editor in ASP.NET Core

asp.net

mvc-editor-templates

asp.net-core

编辑客户