.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和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Go语言使用net/http构建一个RESTful API的示例代码

《Go语言使用net/http构建一个RESTfulAPI的示例代码》Go的标准库net/http提供了构建Web服务所需的强大功能,虽然众多第三方框架(如Gin、Echo)已经封装了很多功能,但... 目录引言一、什么是 RESTful API?二、实战目标:用户信息管理 API三、代码实现1. 用户数据

在ASP.NET项目中如何使用C#生成二维码

《在ASP.NET项目中如何使用C#生成二维码》二维码(QRCode)已广泛应用于网址分享,支付链接等场景,本文将以ASP.NET为示例,演示如何实现输入文本/URL,生成二维码,在线显示与下载的完整... 目录创建前端页面(Index.cshtml)后端二维码生成逻辑(Index.cshtml.cs)总结

通过配置nginx访问服务器静态资源的过程

《通过配置nginx访问服务器静态资源的过程》文章介绍了图片存储路径设置、Nginx服务器配置及通过http://192.168.206.170:8007/a.png访问图片的方法,涵盖图片管理与服务... 目录1.图片存储路径2.nginx配置3.访问图片方式总结1.图片存储路径2.nginx配置

Go语言使用sync.Mutex实现资源加锁

《Go语言使用sync.Mutex实现资源加锁》数据共享是一把双刃剑,Go语言为我们提供了sync.Mutex,一种最基础也是最常用的加锁方式,用于保证在任意时刻只有一个goroutine能访问共享... 目录一、什么是 Mutex二、为什么需要加锁三、实战案例:并发安全的计数器1. 未加锁示例(存在竞态)

解决hive启动时java.net.ConnectException:拒绝连接的问题

《解决hive启动时java.net.ConnectException:拒绝连接的问题》Hadoop集群连接被拒,需检查集群是否启动、关闭防火墙/SELinux、确认安全模式退出,若问题仍存,查看日志... 目录错误发生原因解决方式1.关闭防火墙2.关闭selinux3.启动集群4.检查集群是否正常启动5.

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

《javax.net.ssl.SSLHandshakeException:异常原因及解决方案》javax.net.ssl.SSLHandshakeException是一个SSL握手异常,通常在建立SS... 目录报错原因在程序中绕过服务器的安全验证注意点最后多说一句报错原因一般出现这种问题是因为目标服务器