ASP.NET Core MVC 13. 安装前端库

Partial VIew

就是部分View,他没有自己的数据,数据来自图中白色的那块,它的数据需要传进去,第一个参数是View的名称,第二个参数就是传入的数据,它没有自己对应的后台逻辑和数据


Home/Index.cshtml想把这个列表改成复用的,改成一个Partical View

起名通常是以下划线开始的


先把引入Partial的代码写上

Partial VIew的代码就是这个样,最上面声明类型

原来的代码注释掉

这里有个提示建议使用其他的方法,这里先不管他,先运行页面测试

改成异步的

最终的代码

把里面每行tr的数据再提取数据出来做Partial View

新建_StudentRow.cshtml


使用TagHelper的引入方式

运行测试,发生错误。这是由于上面的部分视图的代码 是异步引入导致的

先把这里的异步调用改成平常的 ,非异步的

运行效果 正常

Home/Index.cshtml也改成TagHelper的形式


刷新页面,运行正常

View Components

视图组件
例如在Index.cshtml页面显示上面是学生列表。下面显示课程的列表。下面应该单独从数据库查询或者其他数据源读取数据,也有可能显示在其他页面,这块也是复用的


特点


单独建文件夹ViewComponents

首先建立C#的类,ViewComponents像一个mini的mvc,所以他应该也有Controller。所有这个类就相当于是它的controller,然后它还对应一个Razor View.
名称通常也是一ViewComponent结尾的

继承自 ViewComponent

首先注入Repository

类似于Controller,返回类型是实现了IViewComponentResult接口的对象


这里会有个问题,如果我们返回的类型是字符串,那么View方法会把count当做ViewName,当做View的名称就回去寻找这个名为Count的字符串值的View

那么我们只要写上第一个参数View的名称,把参数当第二参数传过去就可以了。

view的name改叫做Default吧

所有的ViewCompent放在Shared/Components文件夹下。
一个ViewComponent和Comtroller类似,也要建立和ViewComponent同名的文件夹名称,因为。一个ViewComponent可能对应多个view。


使用这个ViewComponent

它是可以加参数的

参数是在哪里接收呢/


如果想每个页面都显示的话,就放在Layout里面

这样就每个页面都有这个总数

TagHelper的写法

vc冒号+ViewComponent的名称。注意都是小写的。不管你的ViewComponent名字是否是大写的,这里都要小写的

还需要引入命名空间

这次就有了效果

如果ViewComponent的名字是两个单词组成的叫做WelcomeStudentViewComponent
两个单词之前用短横线隔开,并且注意单词都要是小写的。中文叫做短横线命名方式

ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 12. Views 下的更多相关文章

  1. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道

    ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道 语雀: https://www.yuque.com/yuejiangliu/dotnet/ ...

  2. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 25. 过滤器

    在MVC的请求管道 并不是  asp.net core的请求管道.所以说Filter是专用于MVC的 贯穿特性,横穿关注点.比如授权.日志 这里的Authorize其实就是一个Filter,主要用来授 ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 02. Web Host 的默认配置

    视频地址: https://www.bilibili.com/video/av38392956/?p=2 语雀 https://www.yuque.com/yuejiangliu/dotnet/ixt ...

  4. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 04. 中间件

    注册startup类可以配置我们web应用的启动逻辑,使用的就是UseStartUp方法,asp.net core就会实例化这个类 并调用startup类里面的两个方法ConfigureService ...

  5. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库

    前端库使用npm进行安装,需要先建立webpack.json文件 因为我们没有使用npm安装任何库,所以npm的文件夹是空的 这里是用于开发时构建时引用的库写在这里 这里用到bootStrap 开发时 ...

  6. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 27. CICD Azure DevOps

    VSTS做持续集成 后来改名叫做Azure Deveps https://azure.microsoft.com/zh-cn/services/devops/ 这是中文的地址 创建一个项目 名称.描述 ...

  7. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介

    新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...

  8. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 05.Controller 的路由

    视频地址: https://www.bilibili.com/video/av38392956/?p=5 这里面就包含了MVC相关的库 可以通过打开右侧的Nuget库进行查看 这里修改下 ,只需要静态 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 06. Controller 返回View

    Controller父类会提供很多上下文的相关信息,还提供了很多封装的方法 返回的对象要求实现了IActionResult接口 继承父类,并引入命名空间 写this点就出现很多东西,这些就是上下文的信 ...

随机推荐

  1. 微信小程序 - 音频播放(1.2版本和1.2版本之后)

    不多说了,直接贴code // 1.2版本以后便不在维护 wx.getBackgroundAudioManager({ success:function(res){ var status =res.s ...

  2. flex中dispatchEvent的用法(自定义事件) .

    Evevt和EventDispatcher类在as3的事件机制中是很重要的角色,dispatchEvent()是EventDispatcher类的一个事件发送方法,它可以发送出Event类或其子类的实 ...

  3. 【转载】“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

    既然要学.NET,就要先认识认识她,我不喜欢大段大段文字的东西,自己通过理解,画个图,来看看.NET的沉鱼落雁,闭月羞花之容. 最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基 ...

  4. C++ string string string string string string string string string string

    一. 初始化 string s1="i love you"; string s2(s1); //把s2初始化为string s1,注意不能写成string s2; s2(s1); ...

  5. 使用JXL对EXCLE的导入导出

    import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Da ...

  6. Arduino 网络时钟client

    升级! 添加了12h/24h 的开关,还有标准/ 夏令时开关!见步骤7 & 步骤8. 你是否曾想要一个和办公室时间来源全然准确的表? 这就有一个网络的办公时间server,你能够根据它并同步你 ...

  7. 理解和使用WPF 验证机制

    博客 学院 下载 更多 写博客 发布Chat 登录注册 理解和使用WPF 验证机制 原创 2013年06月20日 11:15:37 7404 首先建立一个demo用以学习和实验WPF Data Val ...

  8. sanic官方文档解析之logging和request Data

    1,sanic的logging: Sanic允许有做不同类型的日志(通过的日志,错误的日志),在基于Python3的日志API接口请求,你必须具备基本的Python3的日志知识,在你如果想创建一个新的 ...

  9. GPG key

    Creating GPG Keys - Fedora Project Wiki https://fedoraproject.org/wiki/Creating_GPG_Keys

  10. PPAPI与Browser间使用AsyncIPC通信

    採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...