.net core PartialView 局部视图(分部视图)与视图组件

Partial View
Partial view,局部视图是一个Razor文件,它通常嵌套在另一个Razor文件中。局部视图主要用于拆分大的Razor文件及代码复用。在局部视图渲染中,但请注意:

局部视图不应用来维护公共布局中的内容,考虑使用_Layout.cshtml来维护公共布局 Partial views shouldn't be used to maintain common layout elements.
尽量不要在局部视图中使用复杂的渲染逻辑,或者需要执行一些代码片段才能获取到视图元素。这种情况考虑使用view component来替代局部视图。 Don't use a partial view where complex rendering logic or code execution is required to render the markup.If you need to execute code, use a view component instead of a partial view.
声明局部视图
局部视图名通常以下划线_开头,下划线主要用于易于辨识局部视图文件。注意一点,在渲染局部视图时,不会执行_ViewStart.cshtml文件中的代码。其余与普通视图一样。

⚠️局部视图中定义的section只对当前局部视图可见

使用局部视图
引用局部视图文件而不带扩展名cshtml时,在MVC框架中,会从以下路径中加载局部视图文件,优先级从上而下依次降低:

/Areas//Views/
/Areas//Views/Shared
/Views/Shared
/Pages/Shared
当引用局部文件带上扩展名时,局部视图文件必须和引用方位于相同目录下。

可使用以下方式引入局部视图:

Partial Tag Helper
@* 局部视图文件后缀可以省略,如: *@
@* 也可以使用局部视图文件全名,如: *@
HTML Helper
@await Html.PartialAsync("_PartialName")
也可以使用 RenderPartialAsync方法来渲染局部视图,该方法直接将渲染结果写入到response中,而不是返回 IHtmlContent,所以只能在Razor代码块中调用该方法:

@{
await Html.RenderPartialAsync("_PartialName");
}
相比于PartialAsync,RenderParatialAsync有着更好的性能。

View Component
View component,视图组件和局部视图类似,但它更强大。一个视图组件包含两部分:ViewComponent类和一个视图。

视图组件不使用模型绑定,视图组件中所用的数据有调用者提供。视图组件有以下特点:

渲染数据块而非整个响应
关注点分离、易于测试
可以有参数和业务逻辑 MVC本身就提倡关注点分离,所以,视图组件中应尽可能只包含与渲染视图相关的逻辑
通常在层中调用
自定义视图组件
创建视图组件类:

视图组件继承自ViewComponent或使用ViewComponentAttribute特性
自定义类约定以ViewComponent结尾(非强制)
public class FirstViewComponent : ViewComponent
{
// 方法名InvokeAsync是基于约定的,同步方法名为Invoke
public async Task InvokeAsync(string descript)
{
return View(descript);
}
}
⚠️ 视图组件类中可以使用依赖注入。需注意:视图组件不会参与到Controller的生命周期中,所以filter对它无效。

创建视图文件:

视图组件默认视图名为:Default,简单定义视图内容如下:


在运行时按照以下顺序搜索视图文件:

/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}
? 推荐使用Default作为视图组件的视图文件名,且视图文件存放路径为:Views/Shared/Components/{View Component Name}/{View Name}

可以使用如下两种方式来调用视图组件:

Component.InvokeAsync
Tag Helper
@addTagHelper *,Web

@await Component.InvokeAsync("First", new { descript = "invoking view component" })

@* Tag Helper方式调用ViewComponent,需以vc:作为前缀 *@

⚠️ 注意,使用Tag Helper形式调用视图组件时,组件名和组件的方法参数使用 kebab case方式,即,组件PriorityList有参数maxPriority,则调用方式如下:

除此之外,还可以在Controller中调用视图组件:

public IActionResult InvokeVC()
{
// 注意,视图组件名称大小写敏感
return ViewComponent("First", new { Descript = "controller"});
}
View component methods
抄录一段微软官网上对于View component methods的总结,人太懒,就不翻译了?,留意加粗部分:

A view component defines its logic in an InvokeAsync method that returns a Task or in a synchronous Invoke method that returns an IViewComponentResult. Parameters come directly from invocation of the view component, not from model binding. A view component never directly handles a request. Typically, a view component initializes a model and passes it to a view by calling the View method. In summary, view component methods:

Define an InvokeAsync method that returns a Task or a synchronous Invokemethod that returns an IViewComponentResult.
Typically initializes a model and passes it to a view by calling the ViewComponent View method.
Parameters come from the calling method, not HTTP. There's no model binding.
Are not reachable directly as an HTTP endpoint. They're invoked from your code (usually in a view). A view component never handles a request.
Are overloaded on the signature rather than any details from the current HTTP request.

视图组件中的return view(Model)和视图里定义的一定要一致,否则会出现错误。

如:return view(students); 视图里需要定义@model List<Student>

声明:本站内容来源于原创和互联网,尊重作者版权,转载请注明来源网址,欢迎收藏,谢谢!