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. BUPT复试专题—奇偶求和(2014软件)

    题目描述 给出N个数,求出这N个数,奇数的和以及偶数的和. 输入 第一行为测试数据的组数T(1<=T<=50).请注意,任意两组测试数据之间是相互独立的. 每组数据包括两行: 第一行为一个 ...

  2. php-cpp用来开发php的拓展

    官网: http://www.php-cpp.com/documentation/install, 找时间要学一下.

  3. time is always a factor, time is always now!!!!

    https://www.linkedin.com/pulse/time-always-now-joe-alderman ---------------------------------------- ...

  4. leetcode笔记:Contains Duplicate

    一. 题目描写叙述 Given an array of integers, find if the array contains any duplicates. Your function shoul ...

  5. JDBC MYSQL 学习笔记(一) JDBC 基本使用

    1.JDBC简单介绍 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范.称之为JDBC. JDBC全称为:Java Data Base Connectivity(java数据 ...

  6. MySQL Community Server 5.6和MySQL Installer 5.6

    mysql community server是mysql社区版的数据库服务器.即数据库软件. mysql installer是mysql软件的安装管理器,能够通过installer来选择安装mysql ...

  7. Effective C++ 条款七 为多态基类声明virtual析构函数

    class TimeKeeper { public: TimeKeeper(); // ~TimeKeeper(); 错误,此作为一个基类,被继承了.其继承类被delete后,基类被销毁,但继承类可能 ...

  8. [unity3d]unity平台的预处理

    在开发中,特别是unity的跨平台中,我们常常会在各个平台游走,如安卓版,苹果版,PC版.......在此不同的平台上,有可能我们须要做不同的操作.然而我们就能够用unity的自带的平台宏定义方式来做 ...

  9. java zip压缩文件和文件夹

    public class FileUtil { /** * 压缩文件-File * @param out zip流 * @param srcFiles 要压缩的文件 * @param path 相对路 ...

  10. Photoshop 更改图片颜色

    程序猿兼职美术的常常没有时间搞太多图片.我们能够一张图片更改主要颜色来到达目的.我知道的主要有2种方法,1是更改色相,2是替换颜色.直接用油漆桶仅仅能在异常简单的图片才干用. 1. 更改色相      ...