.NET Razor类库 - 静态资源组件化

ops/2024/9/23 9:24:29/

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 中添加 几个 公共的jsjQuery.js jquery.cookie.jsjquery.hz2py.js 汉字转拼音

在这里插入图片描述

5. MVC项目引用 Razor类库项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

通过上边步骤 我们创建了 css images js 的公共静态资源接下来我们就说一下该如何使用找到 全局的母版页 _Layout.cshtml把多余的我们不需要的HTML删掉,只保留想保留的部分在模板也中 添加 Css 的 SectionScripts 的 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.ppmy.cn/ops/103581.html

相关文章

Python中的“break”与“continue”:控制循环的艺术

引言 在日常编程任务中,我们经常遇到需要根据某些条件提前终止循环或跳过当前迭代的情况。这时,break和continue就显得尤为重要了。它们不仅能够简化代码结构,提高程序效率,还能让我们编写出更加灵活、易读性更高的代码。接下来&…

OSPF路由协议详解

基本信息 开放式最短路径优先(Open Shortest Path First,OSPF)是广泛使用的一种动态路由协议,它属于链路状态路由协议,具有路由变化收敛快、无路由环路、支持变长子网掩码(VLSM)和汇总、层次区…

大数据5v特性、集群、分布式

目录 数据分析六部曲 大数据的特点 (5v特征) 分布式与集群的区别 常用的分布式方案 数据分析六部曲 明确分析目的和思路:确保分析框架的体系化和逻辑性,简单来说就是先分析什么,后分析什么,使得各个分析…

Spark on YARN

Apache Spark 和 Apache Hadoop YARN 是两个紧密相关的项目,它们经常一起使用来处理大规模数据集。下面我将解释 Spark 如何与 YARN 配合工作,以及如何在 YARN 上运行 Spark 应用程序。 Apache Spark Apache Spark 是一个快速通用的大规模数据处理引擎…

ubuntu24安装cuda和cudnn

一、安装cuda 确保显卡驱动正确安装 终端输入: nvidia-smi显示下面结果,说明显卡驱动安装正常,可以进行下一步 1.去官网下载CUDA,需要注册账号下载 https://developer.nvidia.com/cuda-toolkit-archive由于我们显卡支持12.2&…

深度学习基础--梯度下降与初始化

在神经网络的背景下,它们用于寻找能够最小化损失函数的参数,使模型能够根据输入准确预测训练数据的输出。基本方法是随机选择一组初始参数,然后逐步进行微小调整,平均而言这些调整会降低损失。每一次的调整都是基于当前参数位置对…

前端面试题-Vite的打包速度为什么比Webpack快?

哈喽小伙伴们大家好!今天继续为大家分享一道面试题 大家都知道,Vite和Webpack是前端开发中用来构建项目的两个框架,Webpack是针对Vue2的,而Vite则是为vue3量身定制的,他们有哪些区别呢?为什么我们推荐使用Vite呢?Webpack又有哪些缺点呢?这篇文章我们来一探究竟。 Vite和We…

STM32 - LED流水灯

主要功能:两个OLED的闪烁(PE5和PB5),间隔500ms。 可以继续增加更多的OLED灯。 下面为主要代码main.c: #include "stm32f10x.h" // Device header #include "Delay.h" int mai…