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

2024-08-26 16:44

本文主要是介绍.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 中添加 几个 公共的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项目 ,把 视图 模型 控制器 组件化 开发。

这篇关于.NET Razor类库 - 静态资源组件化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109120

相关文章

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时,发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null,再判断Count。 看了一下Count的源码如下: 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get

2、PF-Net点云补全

2、PF-Net 点云补全 PF-Net论文链接:PF-Net PF-Net (Point Fractal Network for 3D Point Cloud Completion)是一种专门为三维点云补全设计的深度学习模型。点云补全实际上和图片补全是一个逻辑,都是采用GAN模型的思想来进行补全,在图片补全中,将部分像素点删除并且标记,然后卷积特征提取预测、判别器判别,来训练模型,生成的像

Thymeleaf:生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

我们需要引入包: <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>sp