ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
(1)封装CSS和JS代码,使用调用的方式在前台进行调用。是开发看起来简洁和易于管理,可达到重用。
由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范:
using System.Web;
using System.Web.Optimization; namespace Cn.Com.Farm.Controller
{
public class BundleConfig
{
// 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/cookie").Include(
"~/js/cookie/jquery.cookie.js"));
bundles.Add(new ScriptBundle("~/jquery").Include(
"~/js/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/Farm/jquery").Include(
"~/js/jquery-{version}.js", "~/res/dialog/lhgdialog.js")); bundles.Add(new ScriptBundle("~/Farm/jqueryui").Include(
"~/js/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/Farm/jqueryval").Include(
"~/js/jquery.unobtrusive*",
"~/js/jquery.validate*")); bundles.Add(new ScriptBundle("~/Farm/spacecenter").Include(
"~/js/spaceenterconmmon.js")); //=========================产品js================================
#region 产品js bundles.Add(new ScriptBundle("~/js/Product/Index").Include(
"~/js/jquery-{version}.js",
"~/js/new.js"));
bundles.Add(new ScriptBundle("~/js/Product/List").Include(
"~/js/jquery-{version}.js",
"~/js/new.js"));
bundles.Add(new ScriptBundle("~/js/Product/Details").Include(
"~/js/jquery-{version}.js",
"~/js/new.js"));
#endregion
//=======================产品css===============================
#region 产品css
bundles.Add(new StyleBundle("~/css/Product/Index").Include(
"~/css/css/center.css",
"~/css/css/productsmenu.css",
"~/css/css/copyright.css",
"~/css/css/head_style.css"));
bundles.Add(new StyleBundle("~/css/Product/List").Include(
"~/css/css/center.css",
"~/css/css/productsmenu.css",
"~/css/css/copyright.css",
"~/css/css/head_style.css",
"~/css/page.css"));
bundles.Add(new StyleBundle("~/css/Product/Details").Include(
"~/css/css/head_style.css",
"~/css/css/center.css",
"~/css/css/copyright.css",
"~/css/css/index.css",
"~/css/css/css.css"));
#endregion bundles.Add(new StyleBundle("~/Farm/style").Include(
"~/css/css/style.css"));
bundles.Add(new StyleBundle("~/css/init").Include(
"~/css/init.css"));
bundles.Add(new ScriptBundle("~/Farm/modernizr").Include(
"~/js/modernizr-*")); bundles.Add(new StyleBundle("~/css/page").Include("~/css/page.css")); bundles.Add(new StyleBundle("~/newcss/Zone").Include(
"~/css/init.css",
"~/css/css/head_style.css",
"~/css/css/copyright.css",
"~/css/css/tree_style.css",
"~/css/css/style.css"
));
bundles.Add(new StyleBundle("~/newcss/Species").Include(
"~/css/css/center.css",
"~/css/css/copyright.css",
"~/css/css/head_style.css",
"~/css/css/tree_style.css"
)); //========================列表页面,增加/编辑/详细[css]=========================
bundles.Add(new StyleBundle("~/css/lisgerIndex").Include(
"~/res/lib/ligerUI/skins/Aqua/css/ligerui-all.css",
"~/res/lib/ligerUI/skins/Gray/css/all.css",
"~/res/lib/ligerUI/skins/ligerui-icons.css",
"~/res/lib/css/index.css"
));
//==========================列表页面[js]=========================
bundles.Add(new ScriptBundle("~/js/ligerlist").Include(
"~/js/jquery-{version}.js",
"~/res/lib/js/ligerui.all.js",
"~/res/lib/js/common.js",
"~/res/lib/js/LG.js",
"~/res/lib/js/ligerui.expand.js",
"~/res/lib/json2.js",
"~/res/lib/ligerDialog.js",
"~/res/lib/ligerTextBox.js",
"~/res/lib/ligerCheckBox.js",
"~/res/lib/ligerComboBox.js",
"~/res/lib/ligerGrid.js",
"~/res/lib/ligerDateEditor.js",
"~/res/lib/ligerSpinner.js",
"~/res/lib/ligerUI/js/plugins/ligerDrag.js",
"~/res/lib/ligerUI/js/plugins/ligerMenu.js",
"~/res/lib/ligerUI/js/plugins/ligerMenuBar.js",
"~/res/lib/ligerUI/js/plugins/ligerToolBar.js"
));
//=====================图片展示===========================
bundles.Add(new StyleBundle("~/CSS/PicShow").Include(
"~/res/pic/Picshow.css"));
bundles.Add(new ScriptBundle("~/JS/PicShow").Include(
"~/res/pic/Picshow.js")); #region ligerUI bundles.Add(new ScriptBundle("~/ligerUI/JS/tree").Include(
"~/res/ligerUI/js/core/base.js",
"~/res/ligerUI/js/plugins/ligerTree.js",
"~/res/ligerUI/js/plugins/ligerMenu.js",
"~/res/ligerUI/js/plugins/ligerDialog.js",
"~/res/ligerUI/js/plugins/ligerGrid.js"
));
bundles.Add(new ScriptBundle("~/ligerUI/JS/treetopic").Include(
"~/res/ligerUI/js/core/base.js",
"~/res/ligerUI/js/plugins/ligerTreetopic.js",
"~/res/ligerUI/js/plugins/ligerMenu.js",
"~/res/ligerUI/js/plugins/ligerDialog.js",
"~/res/ligerUI/js/plugins/ligerGrid.js"
)); bundles.Add(new StyleBundle("~/ligerUI/CSS/tree").Include(
"~/res/ligerUI/skins/Aqua/css/ligerui-all.css", "~/res/ligerUI/skins/Gray/css/dialog.css", "~/res/ligerUI/skins/ligerui-init.css"));
#endregion #region Kissy
#region ImageUpload
bundles.Add(new StyleBundle("~/CSS/Kissy/ImageUpload").Include(
"~/res/kissy/upload/style.css"));
bundles.Add(new ScriptBundle("~/JS/Kissy/ImageUpload").Include(
//"~/res/kissy/upload/index.js",
//"~/res/kissy/upload/flash.js",
//"~/res/kissy/upload/imageUploader.js",
"~/res/kissy/upload/kissy.js"
));
#endregion
#endregion #region 个人会员空间
bundles.Add(new StyleBundle("~/PersonalSpace/Style").Include("~/css/personalSpace/style.css"));
bundles.Add(new ScriptBundle("~/PersonalSpace/tab").Include("~/js/tab.js"));
bundles.Add(new StyleBundle("~/PersonalSpace/page").Include("~/css/page.css"));
bundles.Add(new ScriptBundle("~/PersonalSpace/jqueryui").Include(
"~/res/jquery-ui/js/jquery-ui-1.10.1.custom.js",
"~/res/jquery-ui/locale/jqueryui.datapicker.zh-cn.js"
));
bundles.Add(new StyleBundle("~/css/jqueryui").Include(
"~/res/jquery-ui/css/south-street/jquery-ui-1.10.3.custom.css"
)); bundles.Add(new ScriptBundle("~/ns51/js").Include(
"~/res/ns51jslib/ns51.base.js",
"~/res/ns51jslib/ns51.ordermenu.js",
"~/res/ns51jslib/ns51.popupselect.js",
"~/res/ns51jslib/ns51.queryselect.js"
)); bundles.Add(new StyleBundle("~/ns51/style").Include(
"~/res/ns51jslib/themes/default/style.css"
)); bundles.Add(new ScriptBundle("~/ns51/js/tip").Include(
"~/res/ns51jslib/jquery.qtip.js"
)); bundles.Add(new StyleBundle("~/ns51/style/tip").Include(
"~/res/ns51jslib/themes/default/jquery.qtip.css"
));
#endregion #region 乡村空间
bundles.Add(new StyleBundle("~/css/vhome").Include(
"~/css/VillageHome/style.css"
)); bundles.Add(new StyleBundle("~/css/vhome/main").Include(
"~/css/VillageHome/css/comm.css",
"~/css/VillageHome/css/cjhome.css"
)); bundles.Add(new StyleBundle("~/css/vhome/page").Include(
"~/css/VillageHome/css/comm.css",
"~/css/VillageHome/css/cjhomestyle.css"
)); bundles.Add(new StyleBundle("~/css/vcenter").Include(
"~/css/VillageHome/css/comm.css",
"~/css/VillageHome/css/nsglstyle.css"
)); bundles.Add(new ScriptBundle("~/ns51/overflow").Include(
"~/res/ns51jslib/ns51.textOverflow.js",
"~/res/ns51jslib/ns51.paraOverflow.js"
)); bundles.Add(new ScriptBundle("~/ns51/resize").Include("~/res/ns51jslib/jquery.ba-resize.js"));
#endregion
//地图用脚本
bundles.Add(new ScriptBundle("~/ns51/maps").Include("~/res/ns51jslib/ns51.maps.js")); #region kindEditor 富文本编辑器
bundles.Add(new ScriptBundle("~/Farm/kindEditor").Include(
"~/js/kindeditor/kindeditor-min.js",
"~/js/kindeditor/lang/zh_CN.js"));
#endregion #region 日期控件
bundles.Add(new ScriptBundle("~/Farm/datePicker").Include("~/js/time/WdatePicker.js"));
#endregion
}
}
}
注释:这里是把要处理(封装的js和Css目录)bundles.Add(new function());
例如:
<!--定义下拉框的样式-->
<style type="text/css">
.w_100
{
/*以此来控制该下拉框的长度,可按需要添加多个长度Class,如w_100,w_200*/
width: 262px !important;
height: 23px;
}
</style>
<!--js开始-->
<script language="javascript" type="text/javascript">
function chg() {
if ($("#sel").val() == "New") {
$("#inputGName").show();
$("#GName").hide(); // var o = document.form1.sel;
}
else { //if ($("#sel").val() == "Ole")
$("#GName").show();
$("#inputGName").hide(); }
}
</script>
<!--结束--
//-------------------------------------------------------------前台的调用-------------------------------------------------------------------------//
//对样式和js的封装后,前台进行调用的方法 如下:
@Scripts.Render("~/js/jquery-1.7.1.min.js")
@Scripts.Render("~/js/jquery.validate.js")
@section Styles{
@Styles.Render("~/css/vhome/page")
@Styles.Render("~/css/vhome/page")
}
@section Scripts{
<script type="text/javascript">
function check(obj) { //先来个简单的验证
//投诉内容
if (obj.FReportContent.value == "") {
alert("投诉举报内容不能为空!");
obj.FReportContent.focus();
return false;
}
//姓名
if (obj.FName.value == "") {
alert("姓名不能为空!");
obj.FName.focus();
return false; //使程序不在往下执行
}
//电话号码
if (obj.FIdCard.value == "") {
alert("电话号码不能为空!");
obj.FIdCard.focus();
return false;
}
//邮箱
if (obj.FEmail.value == "") {
alert("邮箱不能为空!");
obj.FEmail.focus();
return false;
} }
</script>
<script type="text/javascript">
window.onload = function () {
var contents = document.getElementById("content");
var FReportContent = document.form1.FReportContent;
FReportContent.onkeyup = FReportContent.onkeydown = function () {
var str = FReportContent.value; var lengths = check(str);
var strs = 300;
if (lengths > 300) {
FReportContent.value = str.substring(0, strs)
}
contents.innerHTML = " 一共能输入" + strs + "个字符,已经输入" + lengths + "个,还剩余" + (strs - lengths) + "个";
}
function check(str) {
var num = 0
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) >= 0 && str.charCodeAt(i) <= 255) {
num++;
} else {
num = num + 2; }
}
return num;
}
}
</script>
}
注释:@section Scripts{......} 里面放置js相关代码。
ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)的更多相关文章
- ASP.NET MVC4中对JS和CSS的引用
https://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: < ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计
在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...
- ASP.NET MVC4中的bundles特性引发服务器拒绝访问(403错误)
在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...
- ASP.NET MVC4中的App_start中BundleConfig的介绍使用
在BundleConfig.cs中,指定CSS和JS,主要用来压缩JS和CSS 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压 ...
- WebSocket在ASP.NET MVC4中的简单实现
WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...
- ASP.NET MVC4中使用NHibernate
ASP.NET MVC4中使用NHibernate 1:下载安装NHibernate 打开 VS 2012新建一个 MVC4项目. 在项目名称上右击选择Manage NuGet Packages.你会 ...
- C#面试题(转载) SQL Server 数据库基础笔记分享(下) SQL Server 数据库基础笔记分享(上) Asp.Net MVC4中的全局过滤器 C#语法——泛型的多种应用
C#面试题(转载) 原文地址:100道C#面试题(.net开发人员必备) https://blog.csdn.net/u013519551/article/details/51220841 1. . ...
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...
- Asp.Net MVC4开发二: Entity Framework在Asp.Net MVC4中的应用
ORM作为一种数据库訪问机制已广泛地应用于各种项目其中,在.Net开发中,应用比較广泛的ORM框架大致有以下几个: 官方支持的有:Linq to SQL.Entity Framework.三方的有:N ...
随机推荐
- 使用Jconsole监控weblogic的配置方法
在项目中发现full gc非常频繁.达到了每分钟13次.我怀疑可能会有内存泄露.于是在晚上找了内存泄露的资料. 内存长期占用并导致系统不稳定一般有两种可能: 1. 对象被大量创建而且被缓存,在旧的对象 ...
- Hibernate,JPA注解@Version
Hibernate实现悲观锁和乐观锁. 1,悲观锁 用例代码如下: 数据库DDL语句: hibernate.cfg.xml java类 以上代码(除下面的main之外)同乐观锁. main packa ...
- Centos6.5和Centos7 php环境搭建如何实现呢
首先我们先查看下centos的版本信息 代码如下: #适用于所有的linux lsb_release -a#或者cat /etc/redhat-release#又或者rpm -q centos-rel ...
- 5、XML(1)
1 XML入门 1.1 引入 HTML: 负责网页的结构 CSS: 负责网页的样式(美观) Javascript: 负责在浏览器端与用户进行交互. 负责静态的网页制作的语言 HTML语言特点: 1)由 ...
- C# winform 中MessageBox用法大全(附效果图) (转载+说明)
声明:这篇文章是转载的转载的,由于原作者的博客被关闭 我就不再列出了,提前先说明下,if语句中的判断有些太长,建议提前声明一个变量, DialogResult MsgBoxResult; ...
- mysql同步
已安装好mysql,并且已把配置文件复制在/etc/my.cnf 主服务器的配置: 1,查看二进制日志的状态,开启二进制日志 进入mysql安装目录 #cd /usr/local/mysql 进入my ...
- Asp.net mvc5 解析route源码实现自己的route系统
url route 路由系统的责任是找到匹配的路由,创建路由数据,并将请求分配给一个处理程序. 选择动作是 MVC 的处理程序的实现细节.它使用路由数据和从传入请求其他信息来选择要执行的操作 实例 源 ...
- git 本地分支与远程分支关联的一种方法
github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...
- mysql高可用之PXC(Percona XtraDB Cluster)
简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1).同步复制,事务要么在所有节点提交或不提交 ...
- 关于IllegalMonitorStateException异常
关于IllegalMonitorStateException异常: api中的解释 另请参见: Object.notify(), Object.notifyAll(), Object.wait(), ...