.NET Razor类库 - 静态资源组件化
1. 找到Razor类库
打开VS2022 文件 - 新建 - 项目 或者 使用 Ctrl+Shift+N 快捷键
输入Razor 搜索 , 选中Razor类库, 点击 下一步
2.创建Razor类库项目
输入项目名称 IX.RCL.Front
RCL 是 RazorClassLibrary的简称意思
Front 代表前端静态资源的意思
位置是 F盘 LocalCode文件夹
F:\LocalCode
解决方案名称 IX.RCL.Front
点击下一步
3. 创建一个MVC Web项目 (ASP.NET Core Web(模型-视图-控制器) )
设置MVC Web项目为 启动项目
4.在Razor 类库项目 添加静态文件
css,images,js lib 等
添加 wwwroot 文件夹,注意这个文件夹 命名暂时保持固定 不要改变
在wwwroot文件夹下建立3个文件夹
css 存放可以共享给其他项目使用的css样式
images 存放可以共享给其他项目使用的静态图片
lib 存放可以共享给其他项目使用的 js
给css 中 添加一些公共的样式 放在 ix.css 文件中
给images 中添加一个 公共的图片 bg.png
给lib 中添加 几个 公共的js
jQuery.js
jquery.cookie.js
jquery.hz2py.js 汉字转拼音
5. MVC项目引用 Razor类库项目
通过上边步骤 我们创建了 css images js 的公共静态资源
接下来我们就说一下该如何使用
找到 全局的母版页 _Layout.cshtml
把多余的我们不需要的HTML删掉,只保留想保留的部分
在模板也中 添加 Css 的 Section
Scripts 的 Section 默认生成就有,不用我们自己添加了
6. 在MVC Web项目 /home/index 引用 组件化的静态资源
在Index.cshtml中 加入 Css 和 Scripts 的引用
@section Css
在Css中 引入 自定义的 ix.css 和 My97 日历控件
@section Scripts
在scripts中引入 My97日历的js文件
把首页的Html代码 修改一下 改为 我们自己想展示的代码 如图
从图中可以看到 我们应用了很多 ix.css 中的 样式
运行 IX.RCL.Front.Web 项目 我们看一下 效果
7.查看运行结果
从运行的 Web站点来看
css images 、日历控件的js 的引用 均 来自 Razor 类库
总结
掌握了 Razor类库 静态资源组件化 这个技能之后
我们可以把JS css images 等静态资源 打包成 NuGet
所有人都引用公用的NuGet
就可以确保项目中引用的静态资源的版本一致性,便于管理
附录
Razor类库 也可以当成一个MVC项目 ,把 视图 模型 控制器 组件化 开发。