ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

在ASP.NET Core中使用ViewComponent

2021-04-10 12:02:08  阅读:158  来源: 互联网

标签:Core ASP 视图 我们 组件 ViewComponent NET public View


前言

在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(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

https://www.cnblogs.com/TomXu/p/4496486.html

https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components

标签:Core,ASP,视图,我们,组件,ViewComponent,NET,public,View
来源: https://www.cnblogs.com/yyfh/p/14640402.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有