欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后臺管理系統(tǒng)之前端頁面框架構(gòu)建源碼分享

 更新時間：2016年07月08日 09:29:17   作者：YmNets  
這篇文章主要為大家分享了ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后臺管理系統(tǒng)之easyui前端頁面框架構(gòu)建源碼，感興趣的小伙伴們可以參考一下

開始，我們有了一系列的解決方案，我們將動手搭建新系統(tǒng)吧。

用戶的體驗已經(jīng)需要越來越注重，這次我們是左右分欄，左邊是系統(tǒng)菜單，右邊是一個以tabs頁組成的頁面集合，每一個tab都可以單獨刷新和關(guān)閉，因為他們會是一個iframe

工欲善其事必先利其器。需要用到以下工具。

Visual Studio 2012

您可以安裝MVC4 for vs2010用VS2010來開發(fā)，但是貌似你將不能使用EF5.0將會是EF4.4版本，但這沒有多大的關(guān)系。

MVC4將掛載在.NET Framework4.5上。

好！

打開我們熟悉的VS創(chuàng)建一個空解決方案。我起了個名字叫AppSolution，類庫命名空間將與App開頭，如App.BLL,App.Web等命名，喜歡酷一點的朋友你可以用的名字來命名

如Joy.BLL,Jason.BLL,zhangsan.BLL，隨便你。直接是BLL也可以

我們將創(chuàng)建項目

1. MVC4.0的App.Admin 網(wǎng)站 Internet選項，選擇Razor視圖

　　

先下載Easyui1.3.2：http://www.jeasyui.com/download/index.php

最高版本是1.3.4我們選擇1.3.2是因為1.3.2以上的是jquery 2.0

jquery2.0將不支持IE8.假如你已經(jīng)拋棄IE8，那您可以體驗更高的版本和更小更快的js庫。（官方他是這樣說的）

刪掉不必要的東西，因為有些東西我們要了，有些保留，復(fù)制easyui到相應(yīng)目錄下，我喜歡把腳本和樣式分開放。

1.把jquery.easyui.min.js放到scripts目錄下

2.主題themes放到到content下 這里我只保留灰色和藍色主題，其他主題我的審美有限度，大家可以到easyui官方下載新的主題

3.把Images文件夾移動到content下

4.Filters文件刪掉

5.把素材放到content目錄下，我已經(jīng)為大家準(zhǔn)備好這個項目所要用到的圖片素材，不夠我們再添加

6.把controllers的AccountController.cs,HomeController.cs刪除

7.把View視圖自帶的cshtml刪掉。

8.把script無關(guān)或者不是壓縮的我都刪掉了，因為我認(rèn)為不必要調(diào)試。以后我們遇到問題，用其他工具來輔助調(diào)試，如httpAnalyes軟件等

好了，我們開始搭建

還是新建一個“空”的控制器，添加index視圖

index代碼

<!DOCTYPE html>

<html>
<head>
 <title>Index</title>
 <meta name="viewport" content="width=device-width" />
 <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
 @Styles.Render("~/Content/css")
 @Styles.Render("~/Content/themes/blue/css")
 @Scripts.Render("~/bundles/home")
</head>
<body class="easyui-layout">
 <div id="OverTimeLogin" class="easyui-dialog" data-options="closed:true,modal:true">
 <iframe width="726px" scrolling="no" height="497px" frameborder="0" id="iOverTimeLogin"></iframe>
 </div>
 <div data-options="region:'north',border:false,split:true" style="height: 60px;">
 <div class="define-head">
  <div class="define-logo">
  <div id="LoginTopLine">System Manage</div>
  <div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
  </div>
  <div class="define-account">
   
  </div>
 </div>
 </div>
 <div data-options="region:'west',split:true,title:'菜單列表'" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
 <div id="RightTree" style=" background-color:#fff;">
  <div class="panel-loading">加載中...</div>
 </div>
 </div>
 <div data-options="region:'south',border:false" style="height: 20px;">
 <div class="define-bottom">
  

 </div>
 </div>
 <div data-options="region:'center',border:false">
 <div id="mainTab" class="easyui-tabs" data-options="fit:true">
  <div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
  <iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
  </div>
 </div>
 </div>
 <div id="tab_menu" class="easyui-menu" style="width: 150px;">
 <div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
  刷新</div>
 <div id="tab_menu-openFrame">
  在新的窗體打開</div>
 <div id="tab_menu-tabcloseall">
  關(guān)閉所有</div>
 <div id="tab_menu-tabcloseother">
  關(guān)閉其他標(biāo)簽頁</div>
 <div class="menu-sep">
 </div>
 <div id="tab_menu-tabcloseright">
  關(guān)閉右邊</div>
 <div id="tab_menu-tabcloseleft">
  關(guān)閉左邊</div>
 <div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
  關(guān)閉</div>
 <div id="menu" class="easyui-menu" style="width: 150px;">
 </div>
 </div>
</body>
</html>

這里我們看到head@Styles.Render("~/Content/css")這些代碼，這是MVC4的捆版壓縮技術(shù)，將css和javascript壓縮輸出到頁面。我已經(jīng)做好了所以大家只要看下就可以。也可以谷歌一下他的原理組成。博客園很多大蝦也都給出了答案。其文件是App_Start下的BundleConfig.cs

$(function () {
  $('#tab_menu-tabrefresh').click(function () {
  /*重新設(shè)置該標(biāo)簽 */
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
  });
  //在新窗口打開該標(biāo)簽
  $('#tab_menu-openFrame').click(function () {
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  window.open(url);
  });
  //關(guān)閉當(dāng)前
  $('#tab_menu-tabclose').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('#mainTab').tabs('close', currtab_title);
  if ($(".tabs li").length == 0) {
   //open menu
   $(".layout-button-right").trigger("click");
  }
  });
  //全部關(guān)閉
  $('#tab_menu-tabcloseall').click(function () {
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   $('#mainTab').tabs('close', t);
   }
  });
  //open menu
  $(".layout-button-right").trigger("click");
  });
  //關(guān)閉除當(dāng)前之外的TAB
  $('#tab_menu-tabcloseother').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   if (t != currtab_title)
    $('#mainTab').tabs('close', t);
   }
  });
  });
  //關(guān)閉當(dāng)前右側(cè)的TAB
  $('#tab_menu-tabcloseright').click(function () {
  var nextall = $('.tabs-selected').nextAll();
  if (nextall.length == 0) {
   $.messager.alert('提示', '前面沒有了!', 'warning');
   return false;
  }
  nextall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#mainTab').tabs('close', t);
   }
  });
  return false;
  });
  //關(guān)閉當(dāng)前左側(cè)的TAB
  $('#tab_menu-tabcloseleft').click(function () {

  var prevall = $('.tabs-selected').prevAll();
  if (prevall.length == 0) {
   $.messager.alert('提示', '后面沒有了!', 'warning');
   return false;
  }
  prevall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#mainTab').tabs('close', t);
   }
  });
  return false;
  });

 });
$(function () {
 /*為選項卡綁定右鍵*/
 $(".tabs li").live('contextmenu', function (e) {
 /*選中當(dāng)前觸發(fā)事件的選項卡 */
 var subtitle = $(this).text();
 $('#mainTab').tabs('select', subtitle);
 //顯示快捷菜單
 $('#tab_menu').menu('show', {
  left: e.pageX,
  top: e.pageY
 });
 return false;
 });
});




function addTab(subtitle, url, icon) {
 if (!$("#mainTab").tabs('exists', subtitle)) {
 $("#mainTab").tabs('add', {
  title: subtitle,
  content: createFrame(url),
  closable: true,
  icon: icon
 });
 } else {
 $("#mainTab").tabs('select', subtitle);
 $("#tab_menu-tabrefresh").trigger("click");
 }
 $(".layout-button-left").trigger("click");
 //tabClose();
}
function createFrame(url) {
 var s = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="width:100%; height:99%"></iframe>';
 return s;
}


 $(function () {
 $(".ui-skin-nav .li-skinitem span").click(function () {
  var theme = $(this).attr("rel");
  $.messager.confirm('提示', '切換皮膚將重新加載系統(tǒng)！', function (r) {
  if (r) {
   $.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
  }
  });
 });
 });

index的腳本，這個home視圖的腳本，他集成了tab頁的右鍵菜單我已經(jīng)集成到系統(tǒng)。運行之前要在Global.asax啟用壓縮

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace App.Admin
{
 // 注意: 有關(guān)啟用 IIS6 或 IIS7 經(jīng)典模式的說明，
 // 請訪問 http://go.microsoft.com/?LinkId=9394801

 public class MvcApplication : System.Web.HttpApplication
 {
 protected void Application_Start()
 {
  AreaRegistration.RegisterAllAreas();

  WebApiConfig.Register(GlobalConfiguration.Configuration);
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  //啟用壓縮
  BundleTable.EnableOptimizations = true;
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  AuthConfig.RegisterAuth();
 }
 }
}

在BundleConfig.RegisterBundles(BundleTable.Bundles);前面加入

//啟用壓縮
BundleTable.EnableOptimizations = true;
好，我們來看看效果！

如果你要啟用灰色主題那么在將@Styles.Render("~/Content/themes/blue/css")

修改為@Styles.Render("~/Content/themes/gray/css")即可

其實這一些沒什么好說的，只是為系統(tǒng)搭建了一個簡單的框架。如果用easyui沒有不下幾個小時也是很難搭建起來的，不過別擔(dān)心，我為大家準(zhǔn)備了原代碼

代碼下載 下載的源碼有的同學(xué)運行有問題請把App_Start下的BundleConfig.cs更改為

using System.Web;
using System.Web.Optimization;

namespace App.Admin
{
 public class BundleConfig
 {
 // 有關(guān) Bundling 的詳細(xì)信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725
 public static void RegisterBundles(BundleCollection bundles)
 {

  bundles.Add(new ScriptBundle("~/bundles/common").Include(
   "~/Scripts/common.js"));

  bundles.Add(new ScriptBundle("~/bundles/home").Include(
   "~/Scripts/home.js"));
  bundles.Add(new ScriptBundle("~/bundles/account").Include(
   "~/Scripts/Account.js"));
  //easyui
  bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
  bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
  bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));


  bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
   "~/Scripts/jquery.form.js"));

  bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
   "~/Scripts/jquery.easyui.plus.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
   "~/Scripts/jquery.validate.unobtrusive.plus.js"));

  // 使用 Modernizr 的開發(fā)版本進行開發(fā)和了解信息。然后，當(dāng)你做好
  // 生產(chǎn)準(zhǔn)備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
   "~/Scripts/modernizr-*"));

  bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));





 }
 }
}

關(guān)于代碼：代碼沒有上傳整個解決方案，你下載解壓后，只需要引用現(xiàn)有類庫即可，關(guān)于里面的素材，不懂的可以問我，里面包含里以后所有要用到的素材，請關(guān)注系統(tǒng)的童鞋不要刪除，可以修改

下一講預(yù)告：漂亮的登錄頁面

作者：YmNets
出處：http://ymnets.cnblogs.com/

相關(guān)文章

  • ASP.NET?Core?WebApi返回結(jié)果統(tǒng)一包裝實踐記錄

    ASP.NET?Core?WebApi返回結(jié)果統(tǒng)一包裝實踐記錄

    本文主要是展示了針對ASP.NET Core WeApi結(jié)果統(tǒng)一返回格式的相關(guān)操作，通過示例我們一步一步的展示了完成這一目標(biāo)的不斷升級的實現(xiàn)，雖然整體看起來比較簡單，但是卻承載著筆者一次又一次的思考升級
    2022-04-04
  • asp.net 每天定點執(zhí)行任務(wù)

    asp.net 每天定點執(zhí)行任務(wù)

    下面是每天零點執(zhí)行一個存儲過程
    2009-05-05
  • 深入理解.NET對象的內(nèi)存布局

    深入理解.NET對象的內(nèi)存布局

    在.NET中，理解對象的內(nèi)存布局是非常重要的，這將幫助我們更好地理解.NET的運行機制和優(yōu)化代碼，本文將介紹.NET中的對象內(nèi)存布局，感興趣的可以了解一下
    2023-08-08
  • .NET Core結(jié)合Nacos實現(xiàn)配置加解密的方法

    .NET Core結(jié)合Nacos實現(xiàn)配置加解密的方法

    當(dāng)我們把應(yīng)用的配置都放到配置中心后，很多人會想到這樣一個問題，配置里面有敏感的信息要怎么處理呢？本文就詳細(xì)的介紹了.NET Core Nacos配置加解密，感興趣的可以了解一下
    2021-06-06
  • 詳解在.net中讀寫config文件的各種方法

    詳解在.net中讀寫config文件的各種方法

    本篇文章主要介紹了在.net中讀寫config文件的各種方法，詳細(xì)的介紹各種配置文件的讀寫操作，具有一定的參考價值，有興趣的可以了解一下。
    2016-12-12
  • asp.net 控件驗證 FCKeditor

    asp.net 控件驗證 FCKeditor

    FCKEditor是一個很不錯的在線編輯器，可稱得上完美，但是它有一個問題，就是在使用RequiredFieldValidator進行驗證的時候，即使內(nèi)容不為空，也需要點擊兩次才能完成
    2009-06-06
  • WEB頁面多語言支持解決方案

    WEB頁面多語言支持解決方案

    WEB頁面多語言支持解決方案...
    2006-09-09
  • 創(chuàng)建第一個ASP.NET應(yīng)用程序(第1節(jié))

    創(chuàng)建第一個ASP.NET應(yīng)用程序(第1節(jié))

    本文通過創(chuàng)建第一個ASP.NET應(yīng)用程序，了解.net代碼后置技術(shù)以及事件驅(qū)動機制和web頁面設(shè)計中的基本控件使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2015-08-08
  • .net客戶端導(dǎo)出Excel實現(xiàn)代碼及注意事項

    .net客戶端導(dǎo)出Excel實現(xiàn)代碼及注意事項

    將DataGrid導(dǎo)出為Excel文件及導(dǎo)出dgData中0-3列的數(shù)據(jù)到excel文件中的優(yōu)缺點介紹,感興趣的朋友可以了解下，希望本文對你有所幫助
    2013-02-02
  • .NET Core 實現(xiàn)微信小程序支付功能（統(tǒng)一下單）

    .NET Core 實現(xiàn)微信小程序支付功能（統(tǒng)一下單）

    最近公司研發(fā)了幾個電商小程序，還有一個核心的電商直播，只要是電商一般都會涉及到交易信息，離不開支付系統(tǒng)，這里我們統(tǒng)一實現(xiàn)小程序的支付流程。感興趣的朋友跟隨小編一起看看吧
    2019-09-09

最新評論