如何在ASP.NET Core中使用ViewComponent

前言

在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(partial view),再往前在Web Form中我们会进行应用WEB Control,好吧提及一个关键性代码TagPrefix:TagName,通过这种的标记我们便可以在我们web form中进行引入我们的组件,当然自从.NET MVC之后呢,就已经没有了WebControl,而对于.NET Core后,又多了一个特性ViewComponent

对于ViewComponent看起来它类似于小的控制器,而对于我们小的组件或者小部分通用型功能,可通过ViewComponent进行实现,比如说留言栏、菜单等等。

ViewComponent是由两部分组成,一部分是类(通常该类集成与ViewComponent),而另外一部分是视图(Razor和普通的View一样),当然ViewComponent同样也支持POCO,不继承ViewComponent,但类名以ViewComponent结尾。

自定义一个组件

创建ViewComponent的方式有三种,如下所示:

  • 继承自ViewComponent
  • 使用ViewComponent特性
  • 创建一个类,以ViewComponent结尾

需要注意的是View Component必须是公共的(public),非嵌套,非抽象类。

对于View Component我们有了一个基本的认识,下面的话创建一个ButtonViewComponent示例,作为我们的参考:

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ViewComponentDemo.ViewComponents
{
    public class ButtonViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            return View();
        }
    }
}

在视图页面中调用该组件:

@await Component.InvokeAsync("Button")

对于ViewComponent同样也是跟Controller一样,进行通过我们服务端特性进行视图操作,再或者说渲染,比如下面我们要传递参数,进行修改我们的Button的样式:

我们修改一下原方法,同时增加一个Enum类型,进行样式的选择

@await Component.InvokeAsync("Button",ButtonType.Success)
 public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
 {
        ViewBag.Type = type;
        //return View("name",model);//允许强类型
        return View();
 }

    public enum ButtonType
    {
        Default,
        Primary,
        Success,
        Info,
        Warning,
        Danger,
        Link
    }

ViewComponent特性

因为在我们的视图关系绑定中,我们更多的是依赖于命名式绑定,而当我们组件的命名与类命名不一致时,会导致我们搜索不到相关的视图,当然我们可能会在使用过程中对其应用不一样的Name,而对于这种情况,我们可以使用ViewCompoentAttribute
进行标记,通过这种方式我们可进行视图的绑定,如下所示:

    [ViewComponent(Name ="Button")]
    public class ButtonTest : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
        {
            ViewBag.Type = type;
            return View();
        }
    }

如上代码虽然ButtonTest的命名引发了视图绑定失败(不能进行使用Button),而我们将其加入一个标记,将Name命名为Button这样弥补了我们命名的不一致行为。

Taghelper方式

通过@addTagHelper指定进行注册包含组件的程序集,组件位于ViewComponentDemo程序集中

@addTagHelper *, ViewComponentDemo

切记这种方式有一个弊端,参数不是可选性参数,也就是你必须把每一个参数都进行显示的调用一下,否则将导致搜索不到.

<vc:button type="@ButtonType.Success"></vc:button>

在如上代码中type为我们的方法参数。

Reference

Demo:https://github.com/hueifeng/BlogSample/tree/master/src/ViewComponentDemo

以上就是如何在ASP.NET Core中使用ViewComponent的详细内容,更多关于ASP.NET Core中使用ViewComponent的资料请关注我们其它相关文章!

(0)

相关推荐

  • ASP.NET Core扩展库之实体映射使用详解

    在分层设计模式中,各层之间的数据通常通过数据传输对象(DTO)来进行数据的传递,而大多数情况下,各层数据的定义结构大同小异,如何在这些定义结构中相互转换,之前我们通过使用AutoMapper库,但AutoMapper功能庞大,使用较为复杂,而在很多场景下,可能我们只需要一些基础的对象映射功能,那么此时你可以选择扩展库中的轻量级AutoMapper实现. 实体映射包含以下核心功能: 在使用之前无需手动定义类型之间的映射关系 采用动态编译.缓存转换委托,提升性能. 支持通过特性定义属性映射关系 支持

  • 发布asp.net core时如何修改ASPNETCORE_ENVIRONMENT环境变量

    遇到的问题 当我把 asp.net core web 发布到本地文件时,我发现程序读的是 appsettings.Production.json ,也就说明当前的 ASPNETCORE_ENVIRONMENT = Production. 请问如何动态修改 ASPNETCORE_ENVIRONMENT的值,这样的话在 调试 和 发布 阶段都非常灵活了,但我尝试在下面几个地方修改都没有成功... windows settings .pubxml file launchSettings.json pr

  • ASP.NET Core自动生成小写破折号路由的实现方法

    默认情况下,ASP.NET Core使用如 http://localhost:5000/HomeIndex 类的大驼峰路由.但是如果想使用小写的路由,并且这些路由用破折号分隔:http://localhost:5000/home-index它们比较常见且一致. 举例.NET常见路由 http://localhost:5000/User/ListPages 想要的效果 http://localhost:5000/user/list-pages 1.如何生成小写的路由可以这样设置 services.

  • ASP.NET Core扩展库之Http日志的使用详解

    最佳实践都告诉我们不要记录请求的详细日志,因为这有安全问题,但在实际开发中,请求的详细内容对于快速定位问题却是非常重要的,有时也是系统的强力证据.Xfrogcn.AspNetCore.Extensions扩展库提供了服务端和客户端的详细日志功能,通过配置可以开启. 服务端日志通过请求中间件来完成,中间件会以Trace级别记录请求和应答详情,以Debug级别记录请求耗时.服务的请求日志的名称为ServerRequest.Logger 要开启服务端详情日志,只需将扩展库配置中的ServerReque

  • 如何在ASP.Net Core中使用Serilog

    记录日志的一个作用就是方便对应用程序进行跟踪和排错调查,在实际应用上都是引入 日志框架,但如果你的 日志文件 包含非结构化的数据,那么查询起来将是一个噩梦,所以需要在记录日志的时候采用结构化方式. 将日志结构化可以更容易的查询和分析,做法就是在写入的时候定义好数据的格式,这种格式包括:xml,json,或者你希望转成的任何结构. Serilog 是一个第三方,开源的结构化日志框架,它的高层封装可以让开发者更容易的将日志记录到 console,file 和你能想到的各种 存储系统,这篇文章我们将会

  • 如何在ASP.NET Core中使用HttpClientFactory

    ASP.Net Core 是一个开源的,跨平台的,轻量级模块化框架,可用它来构建高性能的Web程序,这篇文章我们将会讨论如何在 ASP.Net Core 中使用 HttpClientFactory. 为什么要使用 HttpClientFactory 可以用 HttpClientFactory 来集中化管理 HttpClient,工厂提供了对 HttpClient 的创建,配置和调度,值得一提的是:HttpClient 一直都是 Http 请求业务方面的一等公民. HttpClient 虽好,但它

  • ASP.NET Core 5中如何生成PDF文档

    前言 大家用 ASP.NET Core 进行项目开发时,常会有生成 PDF 的需求,那如何生成呢?这篇文章我们就来讨论如何通过 DinkToPdf 来生成 PDF 文档,DinkToPdf 封装了 C++ 的 wkhtmltopdf 工具包,前者通过 P/Invoke 的方式来调用后者,而底层的 wkhtmltopdf 利用 Qt WebKit 渲染引擎将 html 转成 pdf. 安装 DinkToPdf 要想安装 DinkToPdf,可以通过 Nuget 可视化界面或者通过 NuGet Pa

  • 详解如何在ASP.Net Core中实现健康检查

    健康检查 常用于判断一个应用程序能否对 request 请求进行响应,ASP.Net Core 2.2 中引入了 健康检查 中间件用于报告应用程序的健康状态. ASP.Net Core 中的 健康检查 落地做法是暴露一个可配置的 Http 端口,你可以使用 健康检查 去做一个最简单的活性检测,比如说:检查网络和系统的资源可用性,数据库资源是否可用,应用程序依赖的消息中间件或者 Azure cloud service 的可用性 等等,这篇文章我们就来讨论如何使用这个 健康检查中间件. 注册健康检查

  • 如何在ASP.NET Core中使用ViewComponent

    前言 在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(partial view),再往前在Web Form中我们会进行应用WEB Control,好吧提及一个关键性代码TagPrefix:TagName,通过这种的标记我们便可以在我们web form中进行引入我们的组件,当然自从.NET MVC之后呢,就已经没有了WebControl,而对于.NET Core后,又多了一个特性ViewComponent. 对于ViewComponent看起来它类似于小的控制器,而对于我们

  • 如何在ASP.NET Core中使用Session的示例代码

    ASP.NET Core 是一个跨平台,开源的,轻量级,高性能 并且 高度模块化的web框架,Session 可以实现用户信息存储从而可以在同一个客户端的多次请求之间实现用户追踪,在 ASP.Net Core 中可以使用 Microsoft.AspNetCore.Session 中间件来启用 Session 机制. 中间件的价值在于可以在 request -> response 的过程中做一些定制化的操作,比如说:监视数据,切换路由,修改流转过程中的消息体,通常来说:中间件是以链式的方式灌入到

  • 详解如何在ASP.NET Core中使用Route特性

    ASP.NET Core 中的 Route 中间件的职责在于将 request 匹配到各自 Route 处理程序上,Route 分两种:基于约定 和 基本特性 模式. 基于约定 模式的Route采用集中化的方式,而 基于特性 的方式允许你在 Action 或者 Controller 上单独定义,到底采用哪一种可以基于你自己的应用场景,本篇就来讨论如何使用 基于特性 模式. 创建 Controller 类 创建一个 DefaultController 类,新增如下代码. public class

  • 如何在Asp.Net Core中集成Refit

    在很多时候我们在不同的服务之间需要通过HttpClient进行及时通讯,在我们的代码中我们会创建自己的HttpClient对象然后去跨领域额进行数据的交互,但是往往由于一个项目有多个人开发所以在开发中没有人经常会因为不同的业务请求去写不同的代码,然后就会造成各种风格的HttpClient的跨域请求,最重要的是由于每个人对HttpClient的理解程度不同所以写出来的代码可能质量上会有参差不齐,即使代码能够达到要求往往也显得非常臃肿,重复高我们在正式介绍Refit这个项目之前,我们来看看我们在项目

  • 详解如何在ASP.NET Core中编写高效的控制器

    通过遵循最佳实践,可以编写更好的控制器.所谓的"瘦"控制器(指代码更少.职责更少的控制器)更容易阅读和维护.而且,一旦你的控制器很瘦,可能就不需要对它们进行太多测试了.相反,你可以专注于测试业务逻辑和数据访问代码.瘦控制器的另一个优点是,它更容易维护控制器的多个版本. 这篇文章讨论了使控制器变胖的坏习惯,然后探索了使控制器变瘦和易于管理的方法.我列出编写控制器的最佳实践可能并不全面,但我已经讨论了最重要的一些,并在适当的情况下提供了相关的源代码.在接下来的几节中,我们将研究什么是胖控制

  • 详解如何在ASP.NET Core中使用IHttpClientFactory

    利用IHttpClientFactory可以无缝创建HttpClient实例,避免手动管理它们的生命周期. 当使用ASP.Net Core开发应用程序时,可能经常需要通过HttpClient调用WebAPI的方法以检查终结点是否正常工作.要实现这一点,通常需要实例化HttpClient并使用该实例来调用你的方法.但是直接使用HttpClient也有一些缺点,主要与手动管理实例的生命周期有关. 你可以使用IHttpClientFactory创建HttpClient来避免这些问题.IHttpClie

  • 如何在Asp.Net Core中集成ABP Dapper

    在实际的项目中,除了集成ABP框架的EntityFrameworkCore以外,在有些特定的场景下不可避免地会使用一些SQL查询语句,一方面是由于现在的EntityFrameworkCore2.X有些问题没有解决,另外一方面是基于性能方面的考虑,在了解本篇内容之前,首先还是来看看官方文档来给出的说明. 按照官方的介绍整体可以分为下面的步骤:1 安装依赖包.2 添加DependsOn属性标签.3 Entity to Table Mapping. 4 Usage 通过上面的4个步骤我们就能够正常在A

随机推荐