ViewComponent returns 但使用路由值时模型在视图中为空
ViewComponent returns but model is null in view when using route value
我对 Razor 页面和视图组件还是个新手,但已经用 ASP.NET 绕过了几次障碍。
我不确定为什么我的视图组件没有填充其模型。
我注意到我做错的一件事是将路由参数放在顶部;例如,
@page "{handler?}"
我知道(至少现在)视图组件不打算作为端点直接路由到,但现在我很好奇使用带有路由属性的 @page
会做什么来阻止模型绑定发生? trial/error 我才发现删除它可以让我的模型填充到视图组件中。
这是代码
ViewComponent
public class TestViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(Data.CustomerListModel cust)
{
List<Data.CustomerListModel> clist = new List<Data.CustomerListModel>();
clist.Add(new Data.CustomerListModel() { Customer = "fred" });
clist.Add(new Data.CustomerListModel() { Customer = "wilma" });
var dlist = clist.AsEnumerable();
return View(dlist);
}
}
查看 ViewComponent,Default.html
@page "{handler?}"
@using System.Collections.Generic
@addTagHelper *, TelerikAspnetCoreApp1
@model IEnumerable<Data.CustomerListModel>
<h1>Default</h1>
<h3>Machine name @Environment.MachineName</h3>
<ul>
@foreach (Data.CustomerListModel c in Model)
{
<li>@c.Customer</li>
}
</ul>
CustomerListModel
namespace TelerikAspNetCoreApp1.Data
{
public class CustomerListModel
{
public string Customer { get; set; }
}
}
父视图,Index.cshtml
<div>
@await Component.InvokeAsync("Test",new { Name = "tester123" })
</div>
ViewComponent 的视图看起来很像 ASP.NET 带有控制器和视图的核心应用程序中使用的 Razor 视图文件。然后 @page
指令在 Razor 页面中使用,它使文件成为一个 MVC 动作——这意味着它直接处理请求,而不通过控制器。 @page
影响其他 Razor 构造的行为。
您可以抽出时间阅读有关视图组件和 Razor 页面的 MS 文档:
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0
https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-3.0&tabs=visual-studio
不要在要由 return View(<page_name>, <model>)
执行的页面中使用 @page
并且 Model
属性 将不再为空。
我刚刚遇到了类似的问题。我很惭愧,因为这是一个残酷的菜鸟错误。我的错误是我分别发送和接收的对象不同。
我的 cshtml 我有:
@if (Model is IHasBanner {HasMessage: true } model)
{
@await Component.InvokeAsync("MessageArea", model)
}
然后在我的 ViewComponent 中我有:
public async Task<IViewComponentResult> InvokeAsync(Banner banner)
=> this.View("Default", banner);
在我看来我有:
@if (Model is IHasBanner {HasMessage: true} model)
{
message = model.Banner.Text;
}
所以这个烂摊子很完美!
这就是为什么在实施过程中必须注意使用哪些对象!给予什么,就得到什么。
我很惊讶我的模型在视图中为空,但这只是我自己的困惑的结果。
我对 Razor 页面和视图组件还是个新手,但已经用 ASP.NET 绕过了几次障碍。
我不确定为什么我的视图组件没有填充其模型。 我注意到我做错的一件事是将路由参数放在顶部;例如,
@page "{handler?}"
我知道(至少现在)视图组件不打算作为端点直接路由到,但现在我很好奇使用带有路由属性的 @page
会做什么来阻止模型绑定发生? trial/error 我才发现删除它可以让我的模型填充到视图组件中。
这是代码
ViewComponent
public class TestViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(Data.CustomerListModel cust)
{
List<Data.CustomerListModel> clist = new List<Data.CustomerListModel>();
clist.Add(new Data.CustomerListModel() { Customer = "fred" });
clist.Add(new Data.CustomerListModel() { Customer = "wilma" });
var dlist = clist.AsEnumerable();
return View(dlist);
}
}
查看 ViewComponent,Default.html
@page "{handler?}"
@using System.Collections.Generic
@addTagHelper *, TelerikAspnetCoreApp1
@model IEnumerable<Data.CustomerListModel>
<h1>Default</h1>
<h3>Machine name @Environment.MachineName</h3>
<ul>
@foreach (Data.CustomerListModel c in Model)
{
<li>@c.Customer</li>
}
</ul>
CustomerListModel
namespace TelerikAspNetCoreApp1.Data
{
public class CustomerListModel
{
public string Customer { get; set; }
}
}
父视图,Index.cshtml
<div>
@await Component.InvokeAsync("Test",new { Name = "tester123" })
</div>
ViewComponent 的视图看起来很像 ASP.NET 带有控制器和视图的核心应用程序中使用的 Razor 视图文件。然后 @page
指令在 Razor 页面中使用,它使文件成为一个 MVC 动作——这意味着它直接处理请求,而不通过控制器。 @page
影响其他 Razor 构造的行为。
您可以抽出时间阅读有关视图组件和 Razor 页面的 MS 文档:
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0
https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-3.0&tabs=visual-studio
不要在要由 return View(<page_name>, <model>)
执行的页面中使用 @page
并且 Model
属性 将不再为空。
我刚刚遇到了类似的问题。我很惭愧,因为这是一个残酷的菜鸟错误。我的错误是我分别发送和接收的对象不同。 我的 cshtml 我有:
@if (Model is IHasBanner {HasMessage: true } model)
{
@await Component.InvokeAsync("MessageArea", model)
}
然后在我的 ViewComponent 中我有:
public async Task<IViewComponentResult> InvokeAsync(Banner banner)
=> this.View("Default", banner);
在我看来我有:
@if (Model is IHasBanner {HasMessage: true} model)
{
message = model.Banner.Text;
}
所以这个烂摊子很完美!
这就是为什么在实施过程中必须注意使用哪些对象!给予什么,就得到什么。 我很惊讶我的模型在视图中为空,但这只是我自己的困惑的结果。