时间戳

首页 > 解决方案 > .net core razor 页面中的多个视图组件未正确绑定

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

问题描述

我正在使用 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”并提交表单。我的所有 ViewComposite（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>

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

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

任何帮助将不胜感激！

标签： c#asp.net-mvcasp.net-corerazor-pagesmodel-binding

解决方案

每个组件仅基于定义的模型绑定数据，因此结果中始终具有相同的名称字段。在 razor 中，您可以将 viewdata 传递给组件。您应该为您的组件创建自定义视图数据。

@{
var myViewComposite1VD = new ViewDataDictionary(ViewData);
myViewComposite1VD.TemplateInfo.HtmlFieldPrefix = "MyViewComposite1";
var myViewComposite2VD = new ViewDataDictionary(ViewData);
myViewComposite2VD.TemplateInfo.HtmlFieldPrefix = "MyViewComposite2";
var myViewComposite3VD = new ViewDataDictionary(ViewData);
myViewComposite3VD.TemplateInfo.HtmlFieldPrefix = "MyViewComposite3";
}
<form id="f1" method="post" data-ajax="true" data-ajax-method="post">
<vc:my-example composite="MyViewComposite1" view-data="myViewComposite1VD " />
<vc:my-example composite="MyViewComposite2" view-data="myViewComposite2VD"/>
<vc:my-example composite="MyViewComposite3" view-data="myViewComposite3VD "/>
</form>

如您所见，您可以使用 TemplateInfo.HtmlFieldPrefix 更改绑定

推荐阅读