前端库使用npm进行安装,需要先建立webpack.json文件


因为我们没有使用npm安装任何库,所以npm的文件夹是空的

这里是用于开发时构建时引用的库写在这里

这里用到bootStrap 开发时和发布时都要用的所以要放到这里

自己写上,BootStrap的版本号是自己去官网看的

点击保存后npm 就会自动在左下角进行安装了

会依赖的库都安装好了

存放包的模块司机是跟目录的node_modules文件夹下。VS会把这个文件夹排除,因为是不需要加入到源码库的

bootStrap安装到这里,怎么引用呢,早asp.core里面 视图文件应该是是放在wwwroot里面的

为了简单就把node_modules文件件当做一个类似于wwwroot一样。当做静态的视图文件夹
StartUp里面设置的app.UseStaticFiles()可以让wwwroot文件夹内的文件对外可见,让里面的东西可以对外视图

修改,这个中间件只会对路径包含/node_modules为路径进行处理。如果不包含就直接跳到下一个中间件

其实还有一个OverLoad方法可以直接写path路径就可以。但是这么写不知道到哪去找静态文件

所以还是用第一种写法,如果找到物理文件呢?需要用到FileProvier
参数里面需要传递一个物理路径

这里面参数要求是一个绝对路径

这样就可以找到node_modules文件夹

找到对应的文件,直接拖过来

这是拖进来之后的效果

使用一些bootstrap的组件,表明bootstrap起作用了,使用一下Navbar直接把代码copy过去


运行页面测试,报错,这里前面多写了一个斜线

效果出来了

可以看到bootstrap已经加载进来了

前端的验证

表单提交的时候,如何做前端的验证,不提交到后端,在前端验证。
这时候需要用到另外几个前端的库

把三个文件拖进来放在最下面,body结束标签的上面

引入三个组件后,form的前端验证自动就好了。
没有任何网络请求的情况 验证出

可以使用cdm把常用的库放在里面进行引用


使用tagHelper
表示开发环境下要把代码加进去

表示开发的时候本地的这几个js。

exclude非开发环境

cdn如果挂了。这时候有个回落机制,一旦cdn无法访问,就使用本地的这个路径
通过判断window.jQuery这个对象存不存在,来表示cdn是否可以正常访问

其他的两个js需要判断的情况

css的判断

ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库的更多相关文章

  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 12. Views 下

    ASP.NET Core MVC 13. 安装前端库 Partial VIew 就是部分View,他没有自己的数据,数据来自图中白色的那块,它的数据需要传进去,第一个参数是View的名称,第二个参数就 ...

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

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

  4. 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 ...

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

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

  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. SolidEdge 工程图中如何绘制中断视图

    右击长条形的视图,点击新增断裂线,然后绘制两个断点   点击完成之后效果如下图所示   如果要修改断裂视图的样式,则选中这个视图,在左键单击,然后点击这个按钮取消显示断裂视图   然后左键单击断裂视图 ...

  2. 【Jqurey EasyUI+Asp.net】----DataGrid数据绑定,以及增、删、改(SQL)

    也懒得打其他字了,直接进入主题吧 1.首先,数据表Rex_Test ID int 自增 tName varchar(10) 姓名 tEmail varchar(80) 邮箱 2.至于代码里的Jqure ...

  3. window.onresize 事件笔记

     1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...

  4. 2015 Multi-University Training Contest 3--1011 Work

    代码: #include<cstdio> #include<cstring> using namespace std; int n,k; int father[105],son ...

  5. openstack 中国联盟公开课參会总结

    主流趋势 1. openstack defcore 互操作性认证.打通不同的openstack 厂商之间的连接 2. 首批OpenStack管理员认证(COA)将于2016年进行 3. 混合云应用广泛 ...

  6. C开发人员眼中的SICP学习

    谈谈自己看SICP的一些体会 第一章  构造过程抽象 这一章事实上和C语言全然等价, 不打算深入学习LISP的能够高速略过. 思想上没有太多新的东西. 这一章最核心的价值就是以下3句话, 理解了这一章 ...

  7. 解压Zip

    import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import ja ...

  8. swing_AbstractTableModel 创建表格

    import javax.swing.table.AbstractTableModel; public class MyTable extends AbstractTableModel { /** * ...

  9. SimpleAdapter ArrayAdapter用法

    listView = (ListView) findViewById(R.id.list_main); /* String[] strings = {"A","A&quo ...

  10. 数据库连接池-配置 wallfilter

    使用缺省配置的WallFilter <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSou ...