一、新建MVC项目,选择mvc4,选择.NET Framework4框架。考虑对server 2003的支持,选择.NET Framework4框架。
二、选择项目模板:选“空”,视图引擎:选“Razor”。为方便编辑查找,设置显示代码行号,“工具”-“选项”-“文本编辑器”。
三、添加easy ui
1、右键选择“管理NuGet程序包”
2、在联机中搜索easyui ,此处为1.4.5版本,点击安装。安装完成后项目中自动新增“Content”和“script”两个文件夹。
在联机中搜索ClosedXML,输出Excel的控件,此处为0.92.1版本,点击安装。
3、添加其他第三方控件,可选择添加bootstrap、
在Visual Studio中Tools(工具)菜单中找到NuGet程序包管理器中打开包管理器控制台,
在其中输入以下命令并按回车键:
PM> Install-Package jQuery.Validation
PM> Install-Package jQuery.Validation.Unobtrusive
PM> Install-Package -version 3.0.0 bootstrap
4、自定义添加js文件,在Scripts文件夹下添加jquery.easyui-plus.js文件,内容如下
//ifram 返回 function frameReturnByClose() { $("#modalwindow").window('close'); } //iframe 返回并刷新 function frameReturnByReload(flag) { if (flag) $("#List").datagrid('load'); else $("#List").datagrid('reload'); } //输出信息 function frameReturnByMes(mes) { $.messageBox5s('提示', mes); } //解决ieurl缓存问题 function GetGuid() { var s4 = function () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; return s4() + s4() + s4() + "-" + s4(); } /** * 在iframe中调用,在父窗口中出提示框(herf方式不用调父窗口) */ $.extend({ messageBox5s: function (title, msg) { $.messager.show({ title: title, msg: msg, timeout: 5000, showType: 'slide', style: { left: '', right: 5, top: '', bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5 } }); } }); $.extend({ messageBox10s: function (title, msg) { $.messager.show({ title: title, msg: msg, height: 'auto', width: 'auto', timeout: 10000, showType: 'slide', style: { left: '', right: 5, top: '', bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5 } }); } }); $.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); } }); /** * panel关闭时回收内存,主要用于layout使用iframe嵌入网页时的内存泄漏问题 */ $.fn.panel.defaults.onBeforeDestroy = function () { var frame = $('iframe', this); try { // alert('销毁,清理内存'); if (frame.length > 0) { for (var i = 0; i < frame.length; i++) { frame[i].contentWindow.document.write(''); frame[i].contentWindow.close(); } frame.remove(); if ($.browser.msie) { CollectGarbage(); } } } catch (e) { } }; //让window居中 var easyuiPanelOnOpen = function (left, top) { var iframeWidth = $(this).parent().parent().width(); var iframeHeight = $(this).parent().parent().height(); var windowWidth = $(this).parent().width(); var windowHeight = $(this).parent().height(); var setWidth = (iframeWidth - windowWidth) / 2; var setHeight = (iframeHeight - windowHeight) / 2; $(this).parent().css({/* 修正面板位置 */ left: setWidth, top: setHeight }); if (iframeHeight < windowHeight) { $(this).parent().css({/* 修正面板位置 */ left: setWidth, top: 0 }); } $(".window-shadow").hide(); }; $.fn.window.defaults.onOpen = easyuiPanelOnOpen; var easyuiPanelOnResize = function (left, top) { var iframeWidth = $(this).parent().parent().width(); var iframeHeight = $(this).parent().parent().height(); var windowWidth = $(this).parent().width(); var windowHeight = $(this).parent().height(); var setWidth = (iframeWidth - windowWidth) / 2; var setHeight = (iframeHeight - windowHeight) / 2; $(this).parent().css({/* 修正面板位置 */ left: setWidth - 6, top: setHeight - 6 }); if (iframeHeight < windowHeight) { $(this).parent().css({/* 修正面板位置 */ left: setWidth, top: 0 }); } $(".window-shadow").hide(); //$(".window-mask").hide().width(1).height(3000).show(); }; $.fn.window.defaults.onResize = easyuiPanelOnResize; function onSelect(date) { //开始日期选择时触发 $('#enddate').datebox('enable'); //启用结束日期控件 $('#enddate').datebox('reset') //重置结束日期的值 }; $.extend($.fn.validatebox.defaults.rules, { equaldDate: { validator: function (value, param) { var d1 = $(param[0]).datetimebox('getValue'); //获取开始时间 return value >= d1; //有效范围为大于开始时间的日期 }, message: '结束日期不能早于开始日期!' } })
四、启用捆绑压缩技术,将css和javascript压缩输出到页面
1、在App_Star文件夹下新建一个BundleConfig.cs类,
2、定义RegisterBundles方法,BundleCollection对象作为参数,代码如下:
public static void RegisterBundles(BundleCollection bundles)
{
}
备注:因为没有BundleCollection类,提示缺少引用。解决:程序添加对System.Web.Optimization.dll的引用,类中添加using System.Web.Optimization。
如果手动添加时在整个库中都找不到:System.Web.Optimization命名空间。打开程序包管理控制台,
在控制台中输入:Install-Package Microsoft.AspNet.Web.Optimization按回车。
在控制台中看到提示:“已成功将“Microsoft.AspNet.Web.Optimization 1.1.3”添加到****。表示项目中就已添加了Microsoft.AspNet.Web.Optimization.dll的引用,就可以找到“System.Web.Optimization”命名空间,同时使用BundleCollection对象。
五、注册BundleConfig.cs类并在web.config中添加命名空间
1、BundleConfig.cs类写好后,在Global.asax文件的Application_Start方法中注册,
写入一行:BundleConfig.RegisterBundles(BundleTable.Bundles);
并添加对System.Web.Optimization.dll的引用
2、命名空间是需要在web.config中添加,在程序目录下有个web.config ,在View文件夹下也有个web.config,在两个文件中都加上如下代码:
<add namespace="System.Web.Optimization"/> ,具体位置在<namespaces></namespaces>节点内。
六、补充BundleConfig类下的RegisterBundles方法,
代码如下
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { //easyui bundles.Add(new StyleBundle("~/Content/themes/css").Include("~/Content/themes/icon.css", "~/Content/themes/color.css")); //bootstrap bundles.Add(new StyleBundle("~/Content/themes/bootstrapcss").Include("~/Content/bootstrap.css")); bundles.Add(new StyleBundle("~/Content/themes/black/css").Include("~/Content/themes/black/easyui.css")); bundles.Add(new StyleBundle("~/Content/themes/bootstrap/css").Include("~/Content/themes/bootstrap/easyui.css")); bundles.Add(new StyleBundle("~/Content/themes/default/css").Include("~/Content/themes/default/easyui.css")); bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css")); bundles.Add(new StyleBundle("~/Content/themes/material/css").Include("~/Content/themes/material/easyui.css")); bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css")); bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/jqueryeasyui").Include("~/Scripts/jquery.easyui-{version}.js", "~/Scripts/jquery.easyui-plus.js", "~/Scripts/locale/easyui-lang-zh_CN.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js")); } }
常用脚本库
脚本文件 | 说明 |
jquery-1.7.1.js | jquery的基本类库 |
jquery-ui-1.8.20.js | jquery的UI类库,方便我们创建丰富的用户控件,基于jquery基本类库 |
jquery.mobile-1.1.0.js | 用于移动设备UI控件的类库,在创建移动模板的工程时添加 |
jquery-validate.js | 用于客户端验证的类库 |
knockout-2.1.0.js | 客户端的模型-视图-视图模式类库,在客户端将显示数据和没模型分开,可以认为是浏览器上的MVC |
modernizr-2.5.3.js | 用于检测浏览器对HTML5和CSS3的支持 |
jquery-1.7.1.intellisense.js | 用于Visual studio在编写jQuery代码时提供函数名称的提示 |
jquery.unobtrusive-ajax.js | 用于MVC框架的unobtrusive Ajax功能 |
jquery.validate-vsdoc.js | 用于Visual studio在编写jQuery验证函数时提示函数名称 |
jquery.validate.unobtrusive.js | 用于MVC的客户端验证,依赖jquery-validate.js |
七、将css和javascript压缩输出到页面,网页引用easyui框架,代码:
1 @Styles.Render("~/Content/themes/css") 2 @Styles.Render("~/Content/themes/gray/css") 3 @Scripts.Render("~/bundles/jquery") 4 @Scripts.Render("~/bundles/jqueryeasyui")