ASP.NET Core MVC之ViewComponents(视图组件)知多少?

前言

大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的内容进行解答,借此希望我们能共同进步和学习。本节我们来讲讲ASP.NET Core  MVC中的视图组件。

Web应用程序下管理ViewComponents

我是奔着项目用到了哪些就会去写对应的技术博客,在我们项目中利用视图组件来加载权限菜单,这一块是我老大所做,我也就粗略看了看使用方法并未深入借此机会去学习学习,最近老大要我研究.net core中的加密和解密,我也在摸索着并学习着后续可能再来详细讲讲.net core中的加密和解密。视图组件类似于我们之前ASP.NET MVC中的部分视图,不过其功能比部分视图更加强大,它不会依赖于强类型视图,也和部分视图一样重在重用,到底多强大我们下面一起来见识下。首先我们过一过基本原理。通过调用 InvokeAsync 方法来调用视图组件,此方法定义在 IViewComponentHelper 接口中,如下:

视图组件并不直接处理请求,主要可以用来初始化数据或者获取数据后并通过上述方法来进行渲染,从上述方法参数中并未包含任何http请求信息而得知。那么问题来了,视图组件是如何进行查找哪些是视图组件呢,也就是说从哪些路径去查找呢,从如何两个路径去查找视图组件。

Views/<controller_name>/Components/<view_component_name>/<view_name>
Views/Shared/Components/<view_component_name>/<view_name>

默认的视图组件名称为Default,所以我们可以根据视图页定义为Default.cshtml,当然我们也可以自定义。虽然上述有两种查找视图组件的形式,但是.net core团队推荐我们以如下路径形式来放置视图组件。

Views/Shared/Components/<view_component_name>/<view_name>

看到官网写的那么多还不容易理解,这里我们约定规则组件类以ViewComponent结尾。我将用最浅显的实例来让看这篇文章的园友快速上手。首先我们建立一个组件类。

    public class PersonViewComponent : ViewComponent
    {

    }

直接看下图按照上述所讲。

我们定义了一个组件控制器如下:

   [Route("[Controller]")]
    public class ViewComponentController : Controller
    {
        [HttpGet("[action]")]
        public IActionResult Index()
        {
            return View();
        }
    }

然后在其Index方法里面来调用组件。

@await Component.InvokeAsync("Person")

此时你将看到如下错误:

上述说明未调用InvokeAsync方法,接下来我们在组件类里面写一个InvokeAsync方法。此时将演变成如下这样:

    public class PersonViewComponent : ViewComponent
    {
        public Task<string> InvokeAsync()
        {
            return Task.FromResult("Jeffcky from cnblogs");
        }
    }

此时则成功,如下:

上述我们只是演示其冰山一角,上述只是直接返回一个字符串而已。要是返回视图该如何操作呢?我们来看看:

    public class PersonViewComponent : ViewComponent
    {
        private IBlogRepository _blogRepository;
        public PersonViewComponent(IBlogRepository blogRepository)
        {
            _blogRepository = blogRepository;
        }
        public async Task<IViewComponentResult> InvokeAsync()
        {
            var blogs = await GetBlogsAsync();
            return View(blogs);
        }

        private Task<List<Blog>> GetBlogsAsync()
        {
            var blogs = _blogRepository.GetAll().Take(10).ToList();
            return Task.FromResult(blogs);
        }
    }

接下来在返回的默认组件名称为Default.cshtml中获取数据并遍历:

@{
    Layout = null;
}
@using EFCore.Model.Entities
@model List<Blog>
<h3>Best sellers</h3>
<ul style="padding-left:0;list-style-type:none;">
    @foreach (var blog in Model)
    {
        <li>@blog.Name-@blog.Url</li>
    }
</ul>

 上述我们需要通过返回类型为IViewComponentResult 来加载视图。

单独建立类库管理ViewComponents

上述我们操作视图组件是在Web应用程序下轻而易举,如果是将视图组件作为一个类库来管理,这就有点难度了,为了方便管理视图组件我们尝试将视图组件单独建立一个类库来管理,此时我们又该如何操作呢,我们来看看,首先请确保.net core版本为1.1,1.0版本未测试,通过如下位置来看当前版本或者到 C:\Program Files\dotnet 查看版本:

第一步:此时我们建立一个组件类库并将视图文件全部归纳到类库下,如图:

第二步:在组件类库中projecy.json添加MVC包,如下:

"Microsoft.AspNetCore.Mvc": "1.1.0",

第三步:继续在project.json中添加查找组件视图选项,如下:

"buildOptions": {
    "embed": "Views/**/*.cshtml"
  }

【注意】一定要记得添加上述选项,否则出现如下错误

第四步:接下来则是在Web下引用该类库并解析上述类库程序集将其视图组件进行嵌入,需要下载如下程序包

 

第五步:接下来我们去利用FileProvider去加载组件程序集获取组件中派生自ViewComponent的类,如下:

            var assmebly = typeof(ComponentLibrary.PersonViewComponent).GetTypeInfo().Assembly;
            var embeddedFileProvider = new EmbeddedFileProvider(assmebly, "ComponentLibrary");

            services.Configure<RazorViewEngineOptions>(options =>
            {
                options.FileProviders.Add(embeddedFileProvider);
            });

最后一步:改写调用InvokeAsync方法参数,如下:

@await Component.InvokeAsync("ComponentLibrary.Person")

此时让我联想到ASP.NET MVC中控制器约定以Contrller结尾,否则查找不到,那么对于视图组件约定规范也是以ViewComponent结尾,那么打破这种约定是否好使呢,我们试试看。我们将视图组件修改如下:

    public class PersonComponent : ViewComponent
    {...}

其余也一并进行对应修改,同时对调用方法也进行如下修改:

@await Component.InvokeAsync(nameof(ComponentLibrary.PersonComponent))

经过检验也是准确无误,但是还是按照约定规范来,这里只是做一个验证而已。对于视图组件介绍到此结束,其他比较基本的东西就不再叙述,比如可以和部分视图一样在控制器方法中进行调用组件,如下:

        public IActionResult TestViewComponent()
        {
            return ViewComponent("", "");
        }

以及视图组件还有中还可以进行参数传递,和部分视图别无二致,部分视图有的视图组件都有,而视图组件有的部分视图肯定没有,由此知,视图组件的强大。

总结

本节比较详细的讲述了视图组件的基本使用以及扩展深入将其隔离开来单独建立一个视图组件类库,希望对阅读本文的你有所帮助。

时间: 2024-09-30 11:56:56

ASP.NET Core MVC之ViewComponents(视图组件)知多少?的相关文章

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

前言 在.NET Core之前对于压缩样式文件和脚本我们可能需要借助第三方工具来进行压缩,但在ASP.NET MVC Core中则无需借助第三方工具来完成,本节我们来看看ASP.NET Core MVC为我们提供了哪些方便. 自动压缩样式和脚本 当我们在测试环境中肯定不需要压缩脚本的,如果一旦压缩脚本的话,若在控制台出现错误不利于我们调试,但是在生产环境中我们通过压缩脚本或者样式一来可以减少传输流量,二来可以加速页面加载时间,换句话说,此时我们需要测试环境和生产环境对应的原生版本和压缩版本,那么

详解ASP.NET Core MVC四种枚举绑定方式

前言 本节我们来讲讲在ASP.NET Core MVC又为我们提供了哪些方便,之前我们探讨过在ASP.NET MVC中下拉框绑定方式,这节我们来再来重点看看枚举绑定的方式,充分实现你所能想到的场景,满满的干货,你值得拥有. 探讨枚举绑定方式 我们首先给出要绑定的枚举类. public enum Language { JavaScript, Java, C, Python, SQL, Oracle } 枚举绑定方式一(@Html.DropDownList) 接下来我们废话少说直接进入主题. 复制代

解决ASP.NET Core Mvc文件上传限制问题实例_实用技巧

一.简介 在ASP.NET Core MVC中,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config我们应该如何下手呢? 二.设置上传文件大小 1.应用程序级别设置 我们需要在 ConfigureServices方法中添加如下代码,设置文件上传的大小限制为60 MB. public void ConfigureServices(IServiceCollection services) { servicesConfigure<For

ASP.NET Core MVC上传、导入、导出功能详解

前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天在研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 首先我们来看看官网的上传的例子,再然后进行拓展训练,官网的表单是这样的. <form method="post" enctype="multipart/form-data" asp-controller="UploadFiles" asp-ac

ASP.NET Core MVC 配置全局路由前缀_实用技巧

ASP.NET Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应用背景 不知道大家在做 Web Api 应用程序的时候,有没有遇到过这种场景,就是所有的接口都是以 /api 开头的,也就是我们的api 接口请求地址是像这样的: http://www.example.com/api/order/333 或者是这样的需求 http://www.exa

【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用(一)

HTTP is not just for serving up web pages. It's also a powerful platform for building APIs that expose services and data. HTTP is simple, flexible, and ubiquitous. Almost any platform that you can think of has an HTTP library, so HTTP services can re

ASP.NET Core MVC之Serilog日志处理,你了解多少?

前言 本节我们来看看ASP.NET Core MVC中比较常用的功能,对于导入和导出目前仍在探索中,项目需要自定义列合并,所以事先探索了如何在ASP.NET Core MVC进行导入.导出,更高级的内容还需等我学习再给出. EntityFramework Core 在学习ASP.NET Core MVC之前我们来看看在EF Core中如何更新对象指定属性,这个问题之前我们已经探讨过,但是还是存在一点问题,请往下看. public void Update(T entity, params Expr

ASP.NET Core MVC上传、导入、导出知多少

前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天在研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 首先我们来看看官网的上传的例子,再然后进行拓展训练,官网的表单是这样的. <form method="post" enctype="multipart/form-data" asp-controller="UploadFiles" asp-ac

ASP.NET Core MVC/WebAPi如何构建路由?

前言 本节我们来讲讲ASP.NET Core中的路由,在讲路由之前我们首先回顾下之前所讲在ASP.NET Core中的模型绑定这其中有一个问题是我在项目当中遇见的,我们下面首先来看看这个问题. 回顾ASP.NET Core模型绑定 我们有这样一个场景:修改个人资料中的各个属性,此时每个属性的值的类型肯定是不一样的,所以我们将值定义为object,如下model. public class BlogViewModel { public string prop { get; set; } publi