我正在使用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);
}
}
违约。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; }
}
到目前为止，一切都很顺利。我有一个下拉框，如果我改变下拉框并检查这个的值。MyViewComposite1在我的OnPostAsync()方法，它改变以匹配我的选择。
然而，我现在想在页面上有多个相同的视图组件。也就是说我现在有了这个:
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"在第一个下拉列表中提交表单。我所有的ViewComposites (MyViewComposite1, MyViewComposite2和MyViewComposite3)都显示相同的值为动作，即使下拉菜单都有不同的选项选择。
我相信当我使用开发工具检查控件时，我看到了为什么会发生这种情况:
<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>
这显然是我想做的一个精简版本，因为视图组件比单个下拉菜单有更多的内容，但这说明了我遇到的问题…
有什么我错过了使这个工作吗?
任何帮助都将非常感激!
HTML输出清楚地显示，所有select都与Action具有相同的名称，这将导致您遇到的问题。每个ViewComponent都不知道它的父视图模型(使用它的父视图)。所以基本上你需要以某种方式将前缀信息传递给每个ViewComponent并自定义name属性呈现的方式(默认情况下，它只受使用asp-for的影响)。
要传递前缀路径，我们可以利用ModelExpression作为ViewComponent的参数。通过使用它，您可以提取模型值&的路径。前缀路径只能通过使用ViewData在每个ViewComponent的作用域中共享。我们需要一个自定义的TagHelper来针对所有具有asp-for的元素，并通过使用ViewData共享的前缀来修改name属性。这将有助于正确生成最终命名元素的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，而不是一个简单的值。
select应该呈现如下:
<select name="MyViewComposite1.Action">...</select>
<select name="MyViewComposite2.Action">...</select>
<select name="MyViewComposite3.Action">...</select>
然后模型绑定应该可以正常工作。
PS:关于使用自定义标记帮助器的最后注意事项(您可以搜索更多)，不做任何事情，自定义标记帮助器NamedElementTagHelper将无法工作。您需要最多在最接近您使用它的范围(这里是您的ViewComponent的视图文件)的文件_ViewImports.cshtml中添加标记帮助器:
@addTagHelper *, [your assembly fullname without quotes]
要确认标记帮助器NamedElementTagHelper工作，可以在运行包含asp-for元素的页面之前在其Process方法中设置一个断点。如果它工作的话，代码应该在那里。
:
借用@(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);
}
}
每个组件只绑定数据，基于已定义的模型，因此您总是在结果中拥有相同的名称字段。在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>