zoukankan      html  css  js  c++  java
  • ASP.Net Core -- View Components

    View Components:和分布视图差不多,但是它有独立的数据源,如下:

    1:可复用

    2:独立的组件

    3:有独立的逻辑/数据

    4:相当于迷你MVC请求

    5:不依赖于父级view的数据

    看一张图:

    外层使用布局页,内层为index.cshtml,比如里边的Model存放的学生信息,但是页面的下方可能需要一些其它内容,比如,今天有哪些课程,而这些数据和index里的数据根本不在一个逻辑,index里对应的控制器只负责学生列表信息,而课程信息需要从另外一个数据源读取,这个时候就可以使用View Components。

    代码示例:

    通常View Components放在一个名为“ViewComponents”的文件夹下,里边新建一个C#类,命名方式和控制器差不多,后边以ViewComponent结尾,这个类用来获取数据源,就像MVC里的控制器一样,它也有对应的Razer view,

    public class WelcomeViewComponent : ViewComponent
        {
            private readonly IRepository<Student> _repository;
    
            public WelcomeViewComponent(IRepository<Student> repository)
            {
                _repository = repository;
            }
            public IViewComponentResult Invoke()
            {
                var count = _repository.GetAll().Count().ToString();
                return View("Default", count);
            }
        }
    

    1:里边的动作实现了IViewComponentResult这个接口对象,可不是IActionResult!

    2:里边的动作返回学生列表总数。它对应的视图和分布视图一样,放在shared文件下,那么所有的视图都可以使用。

    3:在Shared文件夹里新建一个Components文件夹,里边再新建一个Welcome文件夹。

    4:在里边新建一个名为_Default.cshtml的文件,然后里边正常写代码就行,如下:

    @model string
    
    <h1>学生总数:@Model</h1>
    

    接收string类型的数据,然后就可以调用了,在布局页调用,如下:

    @await Component.InvokeAsync("Welcome")
    

    这样,页面加载后,下方就会显示学生总数,当然,在asp.net core里边使用TagHelper最好,如下:

    <vc:welcome></vc:welcome>
    

    这个时候还不可以用,因为这数据我们自己定义的TagHelper,需要引用一下,在_ViewImports里添加:

    @addTagHelper *,Tutorials.Web
    

    后边的是我项目名称,这样就可以使用该标签了。现在WelcomeViewComponent这个类,前边只有一个单词,如果单词比较多的话,比如:WelcomeStudentViewComponent,那么,使用TagHelper标签的话,就应该用短横线隔开来命名,如下:

    <vc:welcome-student></vc:welcome-student>
    

    注意,依旧是小写字母。

  • 相关阅读:
    如何使用jmeter来实现更大批量的并发的解决方案
    jmeter分布式集群---部署多台机器进行性能压力测试
    HP Loadrunner12的下载和安装
    python 安装三方库碰到的问题
    测试风险评估
    Android Studio Android SDK Android NDK 官方下载地址
    PC版微信数据库解密详细教程
    js文件加载优化
    MYiSAM和InnoDB引擎区别(mysql)
    php利用cookie防止重复提交解决办法
  • 原文地址:https://www.cnblogs.com/dcy521/p/13545122.html
Copyright © 2011-2022 走看看