Question

我正在尝试创建一个自定义Tag Helper，它基本上会替换Core之前的MVC版本中的编辑器模板。我想允许编辑集合中的项目。目前，我只是希望能够编辑现有项目，但最终会扩展它以允许动态添加和删除项目。

根据我的理解，这应该是Tag Helpers可以实现的。我可以使用我的标签帮助程序显示现有集合，但是在发布表单时，项目不会包含在视图模型中。

我有这两个Tag Helpers：

SongListTagHelper.cs

[HtmlTargetElement("songlist", TagStructure = TagStructure.NormalOrSelfClosing)]
public class SongListTagHelper : TagHelper
{
    private readonly HtmlHelper _htmlHelper;

    public ICollection<SongViewModel> Songs { get; set; }

    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    public SongListTagHelper(IHtmlHelper htmlHelper)
    {
        _htmlHelper = htmlHelper as HtmlHelper;
    }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = null;

        _htmlHelper.Contextualize(ViewContext);
        var partial = await _htmlHelper.PartialAsync(
            "~/Views/Shared/TagHelperTemplates/SongList.cshtml",
            Songs);

        output.Content.SetHtmlContent(partial);
    }
}

SongTagHelper.cs

[HtmlTargetElement("song", TagStructure = TagStructure.NormalOrSelfClosing)]
public class SongTagHelper : TagHelper
{
    private readonly HtmlHelper _htmlHelper;

    public SongViewModel Song { get; set; }

    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    public SongTagHelper(IHtmlHelper htmlHelper)
    {
        _htmlHelper = htmlHelper as HtmlHelper;
    }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = null;

        _htmlHelper.Contextualize(ViewContext);
        var partial = await _htmlHelper.PartialAsync(
            "~/Views/Shared/TagHelperTemplates/Song.cshtml",
            Song);

        output.Content.SetHtmlContent(partial);
    }
}

各自的意见：

SongList.cshtml

@model ICollection<SongViewModel>

@foreach (var item in @Model)
{
    <song song="item" />
}

Song.cshtml

@model SongViewModel

<div class="row">
    <input asp-for="SongId" />
    <div class="col-md-2">
        <input asp-for="TrackNumber" placeholder="##" class="form-control" />
        <span asp-validation-for="TrackNumber" class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <input asp-for="Title" placeholder="Enter Song Title" class="form-control" />
        <span asp-validation-for="Title" class="text-danger"></span>
    </div>
    <div class="col-md-4">
        <input asp-for="Duration" placeholder="00:00" class="form-control" />
        <span asp-validation-for="Duration" class="text-danger"></span>
    </div>
</div>

在我的控制器操作中，我最初将一个空白项添加到集合中并将其传递给视图：

var vm = new EditViewModel();
vm.SongList.Add(new SongViewModel());

return View(vm);

然后在主视图文件中，我将集合传递给Tag Helper，如下所示：

<div class="form-group">
    <label class="col-md-2 control-label">Song List</label>
    <div class="col-md-10">
        <songlist songs="@Model.SongList"></songlist>
    </div>
</div>

当我运行此项并在TrackNumber，Title和Duration字段中输入值并提交表单时，视图模型中的SongList集合有0项。

如何在提交表单时将其正确绑定到视图模型？

用于编辑集合的ASP.NET Core MVC Tag Helper

0 个答案: