ASP.NET MVC5+EF6+EasyUI 後臺管理系統（2）-easyui構建前端頁面框架[附源碼]

時間  2019-11-07
標籤 asp.net asp mvc5+ef6+easyui mvc easyui 後臺 管理 系統 構建 前端 頁面 框架 源碼 欄目 ASP 简体版
原文   原文鏈接

系列目錄javascript

前言

爲了符合後面更新後的重構系統，本文於2016-10-31日修正一些截圖，文字php

咱們有了一系列的解決方案，咱們將動手搭建新系統吧。css

後臺系統沒有多大的UI視覺，此次咱們採用的是標準的左右分欄，左邊是系統菜單，右邊是一個以tabs頁組成的頁面集合，每個tab均可以單獨刷新和關閉html

開發工具

Visual Studio 2012（以上）前端

開始搭建

打開咱們熟悉的VS建立一個空解決方案。我起了個名字叫Apps，類庫命名空間將與Apps開頭java

如Apps.BLL,Apps.Web等命名jquery

1. 新建MVC5.0的Web站點

　　

2.前端框架EasyUI

EasyUI下載：有多新用多新 http://www.jeasyui.com/download/list.php
json

關於素材的存放，我列了下面前端框架

  • 1.把jquery.easyui.min.js放到scripts目錄下
  • 2.主題themes放到到content下 這裏我只保留灰色和藍色主題，其餘主題個人審美有限度，你們能夠到easyui官方下載新的主題
  • 3.把Images文件夾移動到content下
  • 4.Filters文件刪掉
  • 5.把素材放到content目錄下，我已經爲你們準備好這個項目所要用到的圖片素材，不夠咱們再添加
  • 6.把controllers的AccountController.cs,HomeController.cs刪除
  • 7.把View視圖自帶的cshtml刪掉。

3.新建Home控制器

 仍是新建一個「空」的控制器，添加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">
            關閉全部</div>
        <div id="tab_menu-tabcloseother">
            關閉其餘標籤頁</div>
        <div class="menu-sep">
        </div>
        <div id="tab_menu-tabcloseright">
           關閉右邊</div>
        <div id="tab_menu-tabcloseleft">
           關閉左邊</div>
        <div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
          關閉</div>
        <div id="menu" class="easyui-menu" style="width: 150px;">
        </div>
    </div>
</body>
</html>
View Code

這裏咱們看到head @Styles.Render("~/Content/css")這些代碼，這是MVC的捆版壓縮技術，將css和javascript壓縮輸出到頁面。我已經作好了因此你們只要看下就能夠。也能夠谷歌一下他的原理組成。博客園不少大蝦也都給出了答案。其文件是App_Start下的BundleConfig.cs

      $(function () {
          $('#tab_menu-tabrefresh').click(function () {
              /*從新設置該標籤 */
              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);
          });
          //在新窗口打開該標籤
          $('#tab_menu-openFrame').click(function () {
              var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
              window.open(url);
          });
          //關閉當前
          $('#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");
              }
          });
          //所有關閉
          $('#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");
          });
          //關閉除當前以外的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);
                  }
              });
          });
          //關閉當前右側的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;
          });
          //關閉當前左側的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) {
        /*選中當前觸發事件的選項卡 */
        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('提示', '切換皮膚將從新加載系統！', function (r) {
                if (r) {
                    $.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
                }
            });
        });
    });
View Code

index的腳本，這個home視圖的腳本，他集成了tab頁的右鍵菜單我已經集成到系統。運行以前要在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
{
    // 注意: 有關啓用 IIS6 或 IIS7 經典模式的說明，
    // 請訪問 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();
        }
    }
}
View Code

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

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

若是你要啓用灰色主題那麼在將@Styles.Render("~/Content/themes/blue/css")

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

其實這一些沒什麼好說的，只是爲系統搭建了一個簡單的框架。若是用easyui沒有不下幾個小時也是很難搭建起來的，不過別擔憂，我爲你們準備了原代碼

代碼下載  下載的源碼有的同窗運行有問題請把App_Start下的BundleConfig.cs更改成

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

namespace App.Admin
{
    public class BundleConfig
    {
        // 有關 Bundling 的詳細信息，請訪問 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 的開發版本進行開發和了解信息。而後，當你作好
            // 生產準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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





        }
    }
}
View Code

 關於代碼：代碼沒有上傳整個解決方案，你下載解壓後，只須要引用現有類庫便可，關於裏面的素材，不懂的能夠問我，裏面包含裏之後全部要用到的素材

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程