.net core razor 页面中的多个视图组件未正确绑定

Question

我正在使用 razor 页面创建一个 .net core 5 web 应用程序，并且正在努力将我创建的视图组件绑定到我的页面——如果我在页面上有多个相同的视图组件。

以下工作完美：

我的页面.cshtml：

@page
@model MyPageModel
<form id="f1" method="post" data-ajax="true" data-ajax-method="post">
    <vc:my-example composite="Model.MyViewComposite1" />
</form>

我的页面.cshtml.cs

[BindProperties]
public class MyPageModel : PageModel
{
    public MyViewComposite MyViewComposite1 { get; set; }

    public void OnGet()
    {
        MyViewComposite1 = new MyViewComposite() { Action = 1 };
    }

    public async Task<IActionResult> OnPostAsync()
    {
        // checking on the values of MyViewComposite1 here, all looks good...
        // ...
        return null;
    }
}

MyExampleViewComponent.cs：

public class MyExampleViewComponent : ViewComponent
{
    public MyExampleViewComponent() { }
    public IViewComponentResult Invoke(MyViewComposite composite)
    {
        return View("Default", composite);
    }
}

Default.cshtml（我的视图组件）：

@model MyViewComposite
<select asp-for="Action">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
</select>

MyViewComposite.cs

public class MyViewComposite
{
    public MyViewComposite() {}
    public int Action { get; set; }
}

所以到目前为止，一切都很好。我有一个下拉列表，如果我更改该下拉列表并检查 OnPostAsync() 方法中 this.MyViewComposite1 的值，它会更改以匹配我选择的内容。

但是，我现在想在页面上有多个相同的视图组件。这意味着我现在有这个：

我的页面.cshtml：

<form id="f1" method="post" data-ajax="true" data-ajax-method="post">
    <vc:my-example composite="Model.MyViewComposite1" />
    <vc:my-example composite="Model.MyViewComposite2" />
    <vc:my-example composite="Model.MyViewComposite3" />
</form>

我的页面.cshtml：

[BindProperties]
public class MyPageModel : PageModel
{
    public MyViewComposite MyViewComposite1 { get; set; }
    public MyViewComposite MyViewComposite2 { get; set; }
    public MyViewComposite MyViewComposite3 { get; set; }

    public void OnGet()
    {
        MyViewComposite1 = new MyViewComposite() { Action = 1 };
        MyViewComposite2 = new MyViewComposite() { Action = 1 };
        MyViewComposite3 = new MyViewComposite() { Action = 2 };
    }

    public async Task<IActionResult> OnPostAsync()
    {
        // checking on the values of the above ViewComposite items here...
        // Houston, we have a problem...
        // ...
        return null;
    }
}

我现在按照预期在页面上显示了三个下拉菜单，并且在页面加载时这三个下拉菜单都已正确填充。到现在为止还挺好！

但是假设我在第一个下拉列表中选择“option3”并提交表单。我的所有 ViewComposites（MyViewComposite1、MyViewComposite2 和 MyViewComposite3）都显示相同的 Action 值，即使下拉列表都选择了不同的选项。

我相信当我使用开发工具检查控件时，我明白为什么会发生这种情况：

<select name="Action">...</select>
<select name="Action">...</select>
<select name="Action">...</select>

如您所见，呈现的是三个相同的选项，所有选项都具有相同的名称“Action”。我曾希望给他们不同的 id 可能会有所帮助，但这并没有什么不同：

<select name="Action" id="action1">...</select>
<select name="Action" id="action2">...</select>
<select name="Action" id="action3">...</select>

这显然是我正在尝试做的精简版本，因为视图组件比单个下拉菜单包含的内容要多得多，但这说明了我遇到的问题......

是否有什么我缺少的东西来完成这项工作？

任何帮助将不胜感激！

Answer 1

HTML 输出清楚地显示所有selects 都具有相同的名称，Action这将导致您遇到的问题。每个都ViewComponent对其父视图模型（使用它的父视图）一无所知。所以基本上你需要以某种方式将该前缀信息传递给每个属性ViewComponent并自定义属性的呈现方式name（默认情况下，它仅受使用影响asp-for）。

要传递前缀路径，我们可以利用ModelExpressionfor 您的ViewComponent参数。通过使用它，您可以提取模型值和路径。前缀路径只能通过ViewComponent使用其ViewData. 我们需要一个自定义TagHelper来定位所有具有asp-for并name通过添加共享前缀来修改该属性的元素ViewData。这将有助于正确生成最终的命名元素name，因此模型绑定最终将正常工作。

这是详细代码：

[HtmlTargetElement(Attributes = "asp-for")]
public class NamedElementTagHelper : TagHelper
{
    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContext { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {          
        //get the name-prefix shared through ViewData
        //NOTE: this ViewData is specific to each ViewComponent
        if(ViewContext.ViewData.TryGetValue("name-prefix", out var namePrefix) &&
           !string.IsNullOrEmpty(namePrefix?.ToString()) &&
           output.Attributes.TryGetAttribute("name", out var attrValue))
        {
            //format the new name with prefix
            //and set back to the name attribute
            var prefixedName = $"{namePrefix}.{attrValue.Value}";
            output.Attributes.SetAttribute("name", prefixedName);
        }
    }
}

您需要将您的内容修改ViewComponent为如下所示：

public class MyExampleViewComponent : ViewComponent
{
   public MyExampleViewComponent() { }
   public IViewComponentResult Invoke(ModelExpression composite)
   {
     if(composite?.Name != null){
         //share the name-prefix info through the scope of the current ViewComponent
         ViewData["name-prefix"] = composite.Name;
     }
     return View("Default", composite?.Model);
   }
}

现在使用标签助手语法来使用它（注意：这里的解决方案仅在使用标签助手语法和vc:xxx标签助手时才方便，其他使用方式IViewComponentHelper可能需要更多代码来帮助传递ModelExpression）：

<form id="f1" method="post" data-ajax="true" data-ajax-method="post">
  <vc:my-example composite="MyViewComposite1" />
  <vc:my-example composite="MyViewComposite2" />
  <vc:my-example composite="MyViewComposite3" />
</form>

请注意更改为composite="MyViewComposite1"，与以前一样composite="Model.MyViewComposite1"。这是因为新composite参数现在需要一个ModelExpression，而不是一个简单的值。

有了这个解决方案，现在你的selects 应该像这样呈现：

<select name="MyViewComposite1.Action">...</select>
<select name="MyViewComposite2.Action">...</select>
<select name="MyViewComposite3.Action">...</select>

然后模型绑定应该可以正常工作。

PS： 关于使用自定义标签助手的最后说明（您可以搜索更多），如果不执行任何操作，自定义标签助手NamedElementTagHelper将无法工作。您最多需要在_ViewImports.cshtml最接近您使用它的范围的文件中添加标签助手（这里是您的ViewComponent视图文件）：

@addTagHelper *, [your assembly fullname without quotes]

要确认标签助手是否正常工作，您可以在运行包含任何元素的页面之前NamedElementTagHelper在其方法中设置断点。如果代码有效的话，应该会出现在那里。Processasp-for

更新：

借用 @(Shervin Ivari) 关于 的使用，我们可以有一个更简单的解决方案，并且根本ViewData.TemplateInfo.HtmlFieldPrefix不需要自定义标签助手（尽管在更复杂的场景中，使用自定义标签助手的解决方案可能更强大） NamedElementTagHelper）。所以在这里你不需要它NamedElementTagHelper并将你的更新ViewComponent为：

public class MyExampleViewComponent : ViewComponent
{
   public MyExampleViewComponent() { }
   public IViewComponentResult Invoke(ModelExpression composite)
   {
     if(composite?.Name != null){             
         ViewData.TemplateInfo.HtmlFieldPrefix = composite.Name;
     }
     return View("Default", composite?.Model);
   }
}