在MVC4.0加Easyui1.5.3的最簡單方式
阿新 • • 發佈：2017-12-30
同時 技術 star 選項 cls 基本 data- art undle
新建MVC4.0 Web項目
當系統同時裝了VS2012和VS2013時，新建項目，在VisualC#模板點擊Web選項時，左邊會出現ASP.NET Web應用程序，這個Web程序是VS2013自帶的MVC5.0版本，當選中下面的VS2012會出現MVC4.0版本，本次使用的是MVC4.0版本，點擊確定，選擇基本模板，一個MVC4.0的應用程序就建好了。（VS013自帶的MVC5.0應用了Bootstrap，後續進行學習）
運行新建的項目，發現會出現報錯的網頁，這是沒有添加主頁的原因。
添加Easyui
為了能快點加進Easyui，就直接介紹了：
在content新建Easyui文件夾，將在easyui官網下載easyui的文件，按圖拖進去
打開view文件夾，將viewstart和shared/layout的代碼註釋，在home/index添加html代碼
<!DOCTYPE html> <html> <head> <title>Index</title> <meta name="viewport" content="width=device-width" /> <link href="~/Content/Easyui/themes/default/easyui.css" rel="stylesheet" /> <linkhref="~/Content/Easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Content/Easyui/jquery.min.js"></script> <script src="~/Content/Easyui/jquery.easyui.min.js"></script> <script src="~/Content/Easyui/easyui-lang-zh_CN.js"></script> </head> <body class="easyui-layout" style="width: 100%;height: 100%;" id="layout"> <div style="width: 100%;height: 93%;" id="layout"> <div data-options="region:‘west‘,split:true" style="width:13%;" title="目錄"> <div class="easyui-accordion" style="width:auto;height:100%;"> <div data-options="iconCls:‘icon-search‘" style:"padding:5px;" title="圖層"></div> <div data-options="iconCls:‘icon-ok‘" style="overflow: auto;padding:5px;" title="信息"></div> <div data-options="iconCls:‘icon-help‘" style="padding:5px;" title="幫助"></div> </div> </div> <div data-options="region:‘east‘,split:true" title="備註" style="width:30%;"></div> <div data-options="region:‘center‘,iconCls:‘icon-help‘" title="信息"> <div class="easyui-tabs" style="padding:0px;margin:0px;width: 100%;height: 100%;"> <div title="2D地圖" style="padding: 0px;"></div> <div title="3D地圖" style="padding: 0px;"></div> <div id="pivot" title="分析圖表" data-options="iconCls:‘icon-sum‘" style="padding: 0px;"></div> </div> </div> <div id="tb" data-options="region:‘south‘,split:true,collapsed:true" title="屬性表" style="height: 30%;"></div> </div> </body> </html>
運行結果
使用bundles打包easyui
打開App_Start/BundleConfig.cs,添加代碼
1 //easyui 2 3 bundles.Add(new StyleBundle("~/Content/Easyui/css").Include( 4 5 "~/Content/Easyui/themes/default/easyui.css", 6 7 "~/Content/Easyui/themes/icon.css")); 8 9 bundles.Add(new ScriptBundle("~/Content/Easyui/easyui").Include( 10 11 "~/Content/Easyui/jquery.min.js", 12 13 "~/Content/Easyui/jquery.easyui.min.js", 14 15 "~/Content/Easyui/easyui-lang-zh_CN.js"));
將view/home/index的easyui引用代碼
<link href="~/Content/Easyui/themes/default/easyui.css" rel="stylesheet" /> <link href="~/Content/Easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Content/Easyui/jquery.min.js"></script> <script src="~/Content/Easyui/jquery.easyui.min.js"></script> <script src="~/Content/Easyui/easyui-lang-zh_CN.js"></script>
改成下面這樣，是不是簡化了許多
@Styles.Render("~/Content/Easyui/css")
@Scripts.Render("~/Content/Easyui/easyui")
未完待續。。。
第一次寫，有錯誤的地方希望能夠理解，如果有好的見解與方法，敬請留言，謝謝！
在MVC4.0加Easyui1.5.3的最簡單方式