问题描述

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

以下各项运行良好：

MyPage.cshtml：

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

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

到目前为止，一切都运行得很好。我有一个DropDown，如果我更改该DropDown并检查OnPostAsync()方法中this.MyViewComposite1的值，它将更改以匹配我选择的内容。

MyPage.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>

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

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

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

如您所见，呈现的是三个相同的选项，它们的名称都相同。我曾希望给他们不同的ID可能会有所帮助，但这并没有起到什么作用：

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

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

我是否遗漏了什么使此工作正常？

如有任何帮助，不胜感激！

推荐答案

输出清楚地显示所有select具有相同的名称Action，这将导致您遇到的问题。每个ViewComponent都不知道它的父视图模型(使用它的父视图)。因此，基本上您需要以某种方式将前缀信息传递给每个ViewComponent，并自定义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>

使用此解决方案，您的select应该呈现如下：

<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工作正常，您可以在运行包含asp-for元素的页面之前，在其Process方法中设置断点。如果代码正常工作，它应该会命中那里。

更新：

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

这篇关于.NET核心剃须刀页面中的多个视图组件未正确绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！