微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

如何在ASP.NET Core中使用ViewComponent

发布时间:2021-05-24 来源:未知 点击:

前言
在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(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方式
[email protected],组件位于ViewComponentDemo程序集中


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


<vc:button type="@ButtonType.Success"></vc:button>
在如上代码中type为我们的方法参数。


这就是微学网-程序员之家为你提供的"如何在ASP.NET Core中使用ViewComponent"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14535.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧