当前位置: 首页 > article >正文

.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项目 ,把 视图 模型 控制器 组件化 开发。


http://www.kler.cn/a/284228.html

相关文章:

  • 【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
  • Qt 获取当前系统中连接的所有USB设备的信息 libudev版
  • 初始JavaEE篇 —— 网络编程(2):了解套接字,从0到1实现回显服务器
  • 免费HTML模板和CSS样式网站汇总
  • 【设计模式】关联关系与依赖关系
  • 量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据
  • Zoom iOS 转录例子
  • 何为大模型服务器?如何明智地挑选?
  • HTML爱心流星雨
  • 6种有效的时间序列数据特征工程技术(使用Python)
  • 产品经理角度分析:朋友圈点赞与评论仅共同好友可见
  • 华为 2024 届校园招聘-硬件通⽤/单板开发——第一套(部分题目分享,完整版带答案,共十套)
  • 【机器学习-监督学习】神经网络与多层感知机
  • 影视会员充值API接口如何开发?
  • 从插件plugin和钩子hook 到“智能化自动化”架构
  • ubuntu环境下部署LNMP集成环境超详细图文教程
  • Linux的常见指令
  • WireShark网络分析~环境搭建
  • IDEA2023版本创建SSM项目框架
  • 自动化代码报错:ElementClickInterceptedException 解决方案
  • 计算机网络速成(三)
  • SQLi-LABS通关攻略【51-55关】
  • 使用SparkGraphX进行图计算时的编码问题
  • 用Python在PDF文档中创建动作
  • OpenCV+Python识别机读卡
  • python从列表元素中查找最小的元组坐标