如何解决.net core razor 页面中的多个视图组件未正确绑定
我正在使用 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”并提交表单。我的所有 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>
这显然是我想要做的事情的精简版,因为视图组件中包含的内容比单个下拉菜单要多得多,但这说明了我遇到的问题...
我缺少什么才能完成这项工作吗?
任何帮助将不胜感激!
解决方法
HTML 输出清楚地显示所有 select
都具有相同的 Action
名称,这将导致您遇到的问题。每个 ViewComponent
都不知道其父视图模型(使用它的父视图)。所以基本上你需要以某种方式将该前缀信息传递给每个 ViewComponent
并自定义 name
属性的呈现方式(默认情况下,它仅受使用 asp-for
的影响)。
要传递前缀路径,我们可以利用 ModelExpression
作为 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
,而不是一个简单的值。
使用此解决方案,现在您的 select
应呈现如下:
<select name="MyViewComposite1.Action">...</select>
<select name="MyViewComposite2.Action">...</select>
<select name="MyViewComposite3.Action">...</select>
然后模型绑定应该可以正常工作。
附注:
关于使用自定义标签助手的最后说明(您可以搜索更多),如果不做任何事情,自定义标签助手 NamedElementTagHelper
将无法工作。您最多需要在最接近您使用它的范围的文件 _ViewImports.cshtml
中添加标签助手(这里是您的 ViewComponent
的视图文件):
@addTagHelper *,[your assembly fullname without quotes]
要确认标签助手 NamedElementTagHelper
是否有效,您可以在运行包含带有 Process
的任何元素的页面之前在其 asp-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);
}
}
,
每个组件仅绑定数据,基于定义的模型,因此结果中始终具有相同的名称字段。在 razor 中,您可以将视图数据传递给组件。 您应该为您的组件创建自定义视图数据。
@{
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 更改绑定
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。