电子商务网站建设与管理心得,精仿虎嗅网wordpress,用wordpress建立的网站,如何自己建公司网站ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处#xff0c;学习难度较低。以下内容主要体现了编程中模块化的思想#xff0c;模块化才应是我们关注的重点。布局用于提供各个页面所需的公共部分#xff0c;如#xff1a;菜单、页头、页尾等。在ASP.NET Core中默认… ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处学习难度较低。以下内容主要体现了编程中模块化的思想模块化才应是我们关注的重点。布局用于提供各个页面所需的公共部分如菜单、页头、页尾等。在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的_Layout.cshtml文件我们通常在_Layout.cshtml中引入公共资源如link href~/css/reset.css relstylesheet /link href~/css/index.css relstylesheet /script src~/js/common/net/ajaxHandler.js/scriptenvironment namesDevelopmentscript src~/js/lib/vue/vue.js/script/environmentenvironment namesProductionscript src~/js/lib/vue/vue.min.js/script/environment指定布局文件可以在Razor视图(即cshtml文件)中使用Layout属性来指定使用哪个布局文件ASP.NET Core MVC搜索布局文件的方式与局部视图一样下文中会详细说明。默认情况下在布局文件中必须调用RenderBody方法。还可以使用RenderSection方法来引入section。View Import可以在_ViewImport.cshtm文件中添加命名空间或者Tag Helper以供其它视图中使用如using Microsoft.AspNetCore.IdentityaddTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers在_ViewImport.cshtm文件可以使用以下指令addTagHelperremoveTagHelpertagHelperPrefixusingmodelinheritsinject_ViewImport.cshtm文件不支持Razor文件的其它特性如function、section等。对于多个_ViewImports.cshtml的情况指令运行结果遵循如下规则addTagHelper, removeTagHelper: 按照先后顺序执行tagHelperPrefix: 后执行的结果覆盖先执行的结果model: 后执行的结果覆盖先执行的结果inherits: 后执行的结果覆盖先执行的结果using: 引入所指定的所有命名空间但忽略重复引用inject: 后注入覆盖先注入的同名属性View Start_ViewStart.cshtml文件中的代码会在所有完整视图(full view,not layout,not partial view)文件被渲染之前执行。默认情况下ViewImports.cshtml和ViewStart.cshtml文件直接位于Views文件夹下相比其它位置的其它位置ViewImports.cshtml和ViewStart.cshtml直接位于Views文件夹中的ViewImports.cshtml和ViewStart.cshtml文件会优先执行后执行的ViewImports.cshtml文件中的内容有可能会覆盖先执行ViewImports.cshtml文件中的内容ViewImports.cshtml和ViewStart.cshtml文件的作用域是当前目录及子目录Tag Helper可以让服务器端代码参与到在Razor文件中创建和渲染HTML元素的工作中。自定义Tag Helperpublic class XfhTagHelper : TagHelper{public string Content { set; get; }public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { output.TagName a; output.Attributes.Add(href, https://www.google.com); output.Content.SetContent(Content); }}使用Tag HelperaddTagHelper *,Webxfh contenthahacustomer tag helper/xfhTag Helper与HTML Helper有些相似二者不同之处可参考Tag Helpers compared to HTML HelpersTag Helper具有以下优点类HTML语法这一点是我喜欢Tag Helper的原因使用Tag Helper可以使cshtml文件中后台代码与前端的搭配更和谐利于提升代码可读性语法智能感知Tag Helper 作用域addTagHelperaddTagHelper的第一个参数表示要加载哪些Tag Helper使用*表示加载所有的Tag Helper第二个参数表示从哪个程序集中加载Tag Helper。示例如下* 需指明TagHelper的完全限定名 *addTagHelper Web.TagHelpers.XfhTagHelper,WebremoveTagHelperremoveTagHelper也有两个参数含义同addTagHelpertagHelperPrefix给Tag Helper加上前缀标识示例如下addTagHelper *,WebtagHelperPrefix th:* 不会被当作Tag Helper处理 *xfh contenthahacustomer tag helper/xfhth:xfh contenttagHelperPrefix/th:xfhPartial view局部视图是一个Razor文件它通常嵌套在另一个Razor文件中。局部视图主要用于拆分大的Razor文件及代码复用。但请注意局部视图不应用来维护公共布局中的内容考虑使用_Layout.cshtml来维护公共布局Partial views shouldnt be used to maintain common layout elements.尽量不要在局部视图中使用复杂的渲染逻辑或者需要执行一些代码片段才能获取到视图元素。这种情况考虑使用view component来替代局部视图。Dont 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/Area-Name/Views/Controller-Name/Areas/Area-Name/Views/Shared/Views/Shared/Pages/Shared当引用局部文件带上扩展名时局部视图文件必须和引用方位于相同目录下。可使用以下方式引入局部视图Partial Tag Helper partial namepartial.cshtml modelModel/ * 局部视图文件后缀可以省略如 *partial namepartial / * 也可以使用局部视图文件全名如 *partial name~/Views/Shared/_PartialName.cshtml /HTML Helperawait Html.PartialAsync(_PartialName)也可以使用 RenderPartialAsync方法来渲染局部视图该方法直接将渲染结果写入到response中而不是返回 IHtmlContent所以只能在Razor代码块中调用该方法{await Html.RenderPartialAsync(_PartialName);}相比于PartialAsyncRenderParatialAsync有着更好的性能。View component视图组件和局部视图类似但它更强大。一个视图组件包含两部分ViewComponent类和一个视图。视图组件不使用模型绑定视图组件中所用的数据有调用者提供。视图组件有以下特点渲染数据块而非整个响应关注点分离、易于测试可以有参数和业务逻辑MVC本身就提倡关注点分离所以视图组件中应尽可能只包含与渲染视图相关的逻辑通常在层中调用自定义视图组件创建视图组件类视图组件继承自ViewComponent或使用ViewComponentAttribute特性自定义类约定以ViewComponent结尾非强制public class FirstViewComponent : ViewComponent{// 方法名InvokeAsync是基于约定的同步方法名为Invokepublic async TaskIViewComponentResult InvokeAsync(string descript) {return Viewstring(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.InvokeAsyncTag HelperaddTagHelper *,Webdiv classtext-center await Component.InvokeAsync(First, new { descript invoking view component })br / * Tag Helper方式调用ViewComponent需以vc:作为前缀 *vc:first descripttag helper/vc:first/div⚠️ 注意使用Tag Helper形式调用视图组件时组件名和组件的方法参数使用 kebab case方式即组件PriorityList有参数maxPriority则调用方式如下vc:priority-list max-priority2/vc:priority-list除此之外还可以在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 TaskIViewComponentResult 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 TaskIViewComponentResult 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. Theres no model binding.Are not reachable directly as an HTTP endpoint. Theyre 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.本文主要对ASP.NET Core中的视图部分做了简要概述相比于文中的各种概念我们应该把注意力放到模块化设计上。模块化、抽象思维是程序员应该掌握的两种能力。他们可以让我们写出高内聚、低耦合的代码。原文地址https://www.cnblogs.com/Cwj-XFH/p/10885745.html.NET社区新闻深度好文欢迎访问公众号文章汇总 http://www.csharpkit.com
