【发布时间】：2021-05-23 14:20:59
【问题描述】：
我正在使用 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; }
}
所以到目前为止，一切都很好。我有一个下拉列表，如果我更改该下拉列表并在 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;
}
}
我现在在页面上显示了三个下拉列表，正如我所期望的那样，当页面加载时，这三个下拉列表都正确填充。到目前为止一切顺利！
但是假设我在第一个下拉列表中选择“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-mvc asp.net-core razor-pages model-binding