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

news2024/9/25 7:25:17

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.coloradmin.cn/o/2077847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

KEIL Stm32 bin文件生成的两种方法以及报错的处理

Keil里生成bin文件的方法有两种,记录如下,以免忘记~ 首先,在Keil主页面,点击如下按钮,打开Options for Target ‘target 1’对话框,并选择User标签页。 其次,通过在 User标签页 设置 “After B…

一种基于 JavaEE 的合同管理系统,用于存储、管理和跟踪合同的软件工具,功能很完善(附源码)

前言 在现代企业管理中,合同管理是一项至关重要的任务。传统的手动管理合同不仅耗时耗力,而且容易出现错误和遗漏,导致合同执行效率低下,甚至面临法律风险。随着业务的不断扩展,越来越多的企业开始寻求一种更为高效、…

作为HR,如何解决简历筛选难度大的问题

简历筛选需要耗费大量的时间和精力,尤其是当应聘者过多的情况下,往往让HR精疲力竭,而且效率低下。当下也有很多这方面的工具可以辅助的,如:招聘管理,简历解析类等。 借助软件,可以更好的获取简…

GLM-4-Flash 大模型API免费了,手把手构建“儿童绘本”应用实战(附源码)

老牛同学刚刷到了一条劲爆的消息,GLM-4-Flash大模型推理 API 免费了:https://bigmodel.cn/pricing 老牛同学一直觉得上次阿里云百炼平台为期 1 个月免费额度的“羊毛”已经够大了(太卷了,阿里云免费 1 个月大模型算力额度&#xf…

什么是BI?BI系统的功能有哪些?哪些人需要BI工具支持?

什么是BI? BI是商业智能(Business Intelligence)的缩写。它是指通过收集、整理、分析和可视化企业内部和外部数据,从中获得洞察信息和决策支持的技术和流程。BI利用数据分析工具和技术,帮助企业管理者和决策者更好地理…

Cesium 展示——获取指定区域地形的最大最小高程

文章目录 需求分析方法一:方法二:需求 在地图上勾选某一处的区域,分析获取区域内最大最小高程 分析 方法一: function getAreaHeight(viewer, positions) {const startP = positions[0

备考AMC10美国数学竞赛2024:吃透1250道真题和知识点(持续)

有什么含金量比较高的初中生数学竞赛吗?美国数学竞赛AMC10是个不错的选择。那么,如何备考AMC10美国数学竞赛呢?做真题,吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一。 通过做真题,可以帮助孩子找到真实竞赛…

解决tensorflow模型加载时把GPU显存占满的问题(亲测效果显著)

第一次用tensorflow模型进行推理。 初始状态下,显存的占用情况 模型加载后,电脑显存直接快拉满了,但是模型参数量并不大,这就很奇怪,究竟这是一股什么神秘的力量,竟要试图侵占我可怜的显卡宝贝 原因分析:安装了tensor…

fastadmin表单中二维数组组件+图片上传

记录&#xff1a;fastadmin表单中二维数组组件图片上传 add.html代码 <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(Quanyi)}:</label><div class"col-xs-12 col-sm-10"><style>…

多个FeignClient使用相同服务名报错问题:使用contextId区分不同FeignClient

一、概述 在项目开发中&#xff0c;由于多个 FeignClient 使用了相同的 name &#xff0c;导致SpringBoot启动时出现 BeanDefinitionOverrideException 异常。 解决方案是在每个 FeignClient 上添加唯一的 contextId&#xff0c;如 userFeignClient 和 helloWorldFeignClient…

低功耗高效率同步降压变换器SiLM6880/SiLM6881 为工业应用领域电源提供强力支撑

为了满足现代电子设备对性能和能耗的更高要求&#xff0c;并不断推动电源技术的优化与创新&#xff0c;深力科推荐一款——低功耗、高效率的同步降压变换器SiLM6880/SiLM6881。 SiLM6880/SiLM6881具有宽泛的输入电压范围&#xff08;6V~80V&#xff09;&#xff0c;能适应各种电…

LLM分布式预训练浅析

随着深度学习的不断进步&#xff0c;语言模型的规模越来越大&#xff0c;参数量级已经达到了数千亿甚至数万亿&#xff0c;参数规模的指数增长带来了两个巨大的挑战 1&#xff09;模型参数过大&#xff0c;如GLM 130B模型参数需要520GB&#xff08;130B*4bytes&#xff09;的显…

【Latex】Latex 简介和安装

Latex LaTeX 是一种基于排版的文档准备系统&#xff0c;广泛用于创建高质量的科学和数学文档。它的核心是 TeX 语言&#xff0c;由美国计算机科学家 Donald Knuth 在 1978 年开发。LaTeX 简化了文档的格式化过程&#xff0c;尤其是在处理复杂的公式、引用、表格、图表等方面&a…

Java IO精髓:高效块读写入技术深入解析

文件的复制 首先我们先用昨天学习的知识来完成文件的复制,使用read和write方法来完成。 public static void main(String[] args) throws IOException {FileInputStream fis new FileInputStream("./image.png");FileOutputStream fos new FileOutputStream("…

OpenCV开发笔记(七十九):基于Stitcher类实现全景图片拼接

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/141561865 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

加速边缘智能技术落地!移远通信推出全功能ARM主板QSM560DR、QSM668SR系列

8月22日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出其两款全功能ARM主板——QSM560DR与QSM668SR系列。 作为智能设备开发与硬件设计的核心平台&#xff0c;这两款ARM主板以卓越的集成度和性能、广泛的兼容性以及丰富的功能接口&#xff0…

零基础学习人工智能—Python—Pytorch学习(八)

前言 本文介绍卷积神经网络的上半部分。 其实,学习还是需要老师的,因为我自己写文章的时候,就会想当然,比如下面的滑动窗口,我就会想当然的认为所有人都能理解,而实际上,我们在学习的过程中之所以卡顿的点多,就是因为学习资源中想当然的地方太多了。 概念 卷积神经网络…

WPF- vs中的WPF应用项目模板 如何自己实现

读书笔记 1. 单个 c#文件的 空白window应用程序 (只展示了一个button按钮) 2.C#文件 和xml文件 的空白window程序 .xml文件作为程序的资源 (只一个button按钮) 3. xmal和c#共同编译 形如使用VS 创建WPF应用项目模板 1.新建一个wpf空白项目 ,添加一个主c#文件 和xaml文件(属…

list底层详解

目录 介绍 list的实现 1.自定义节点 2.迭代器封装 构造函数 前置和后置 前置--和后置-- *操作符和->操作符 和!操作符 iterator和const_iterator 3. list类 构造函数和析构函数 赋值操作 头尾迭代器 插入和删除 头插头删尾插尾删 list接口函数总代码 介绍…

【开端】Java中最常用的一个类型String的使用

一、绪论 Java中最常用的一个类型是String&#xff0c;其实从JDK1.0 到JDK20 Java 开发工具包其实也经过很多演变&#xff0c;很多功能做了一些优化。这一节就把String类里的方法拎出来看看哪些是常用的&#xff0c;哪些经常用不到得到&#xff0c;哪些是已经有的&#xff0c;…