構建 ASP.NET MVC4+EF5+EasyUI+Unity2.x 後台管理系統（14）：EasyUI 缺陷修復與系統優化七大項目

經過 13 講的建置，基礎框架已成型。但在實際開發中發現 EasyUI 存在數個體驗與效能問題，且架構層面仍有優化空間。本篇盤點 7 大優化項目，並逐一提供解決方案，將系統推向生產就緒狀態。

七大優化項目清單

1. EasyUI Window 彈出視窗未置中
2. DataGrid 瀏覽器縮放時變形、不自適應
3. JavaScript 檔案分散引用，未捆綁壓縮
4. DataGrid 日期欄位顯示為 /Date(1370000000000)/ 格式
5. BLL 層重複實例化 DBContainer，缺乏基類封裝
6. 前端提示訊息硬編碼分散，缺乏集中管理
7. 工具列按鈕程式碼重複，需封裝 HtmlHelper 擴充

優化方案詳細實作

1. EasyUI Window 強制置中

// 開啟視窗前計算置中座標
function openCenteredWindow(winSelector, options) {
    var $win = $(winSelector);
    var winW = options.width || 600;
    var winH = options.height || 400;
    var left = ($(window).width() - winW) / 2 + $(document).scrollLeft();
    var top = ($(window).height() - winH) / 2 + $(document).scrollTop();
    
    $win.window($.extend({}, options, { left: left, top: top })).window('open');
}

// 監聽視窗 resize 事件動態調整
$(window).resize(function() {
    $('.window-body:visible').each(function() {
        var $win = $(this).closest('.window');
        var opts = $win.window('options');
        var left = ($(window).width() - opts.width) / 2;
        var top = ($(window).height() - opts.height) / 2;
        $win.window('move', { left: left, top: top });
    });
});

2. DataGrid 自適應瀏覽器寬高

// 初始化時綁定 resize 事件
$('#List').datagrid({
    // ... 其他選項
    onLoadSuccess: function() {
        fixDatagridSize();
    }
});

function fixDatagridSize() {
    var $dg = $('#List');
    var parent = $dg.datagrid('getPanel').parent();
    $dg.datagrid('resize', {
        width: parent.width(),
        height: $(window).height() - 35
    });
}

$(window).resize(function() {
    clearTimeout(window._dgResizeTimer);
    window._dgResizeTimer = setTimeout(fixDatagridSize, 100);
});

3. JavaScript 捆綁與壓縮

在 BundleConfig.cs 中註冊：

bundles.Add(new ScriptBundle("~/bundles/easyui").Include(
    "~/Scripts/jquery.min.js",
    "~/Scripts/jquery.easyui.min.js",
    "~/Scripts/easyui-extend.js"  // 自訂擴充
));

bundles.Add(new StyleBundle("~/Content/easyui").Include(
    "~/Content/themes/blue/easyui.css",
    "~/Content/themes/blue/icon.css",
    "~/Content/Site.css"
));

// 啟用最佳化（壓縮）
BundleTable.EnableOptimizations = true;

在 _Layout.cshtml 統一引用：

@Scripts.Render("~/bundles/easyui")
@Styles.Render("~/Content/easyui")

4. 解決 JSON 日期序列化格式問題

原因：預設 JavaScriptSerializer 將 DateTime 序列化為 /Date(ticks)/ 格式。

方案：自訂 JsonResult 使用 Json.NET 並設定 IsoDateTimeConverter：

public class JsonNetResult : JsonResult {
    public JsonSerializerSettings Settings { get; set; }
    
    public override void ExecuteResult(ControllerContext context) {
        if (context == null) throw new ArgumentNullException("context");
        
        var response = context.HttpContext.Response;
        response.ContentType = string.IsNullOrEmpty(ContentType) ? "application/json" : ContentType;
        if (ContentEncoding != null) response.ContentEncoding = ContentEncoding;
        
        if (Data != null) {
            var settings = Settings ?? new JsonSerializerSettings {
                DateFormatHandling = DateFormatHandling.IsoDateFormat,  // ISO 8601: "2013-10-15T14:30:00"
                DateTimeZoneHandling = DateTimeZoneHandling.Local,
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };
            response.Write(JsonConvert.SerializeObject(Data, settings));
        }
    }
}

// Controller 基類統一使用
protected override JsonResult Json(object data, string contentType, Encoding contentEncoding, JsonRequestBehavior behavior) {
    return new JsonNetResult { Data = data, ContentType = contentType, ContentEncoding = contentEncoding };
}

5. BLL 基類封裝資料庫上下文

public abstract class BaseBLL<T> : IDisposable where T : class {
    protected DBContainer DbContext { get; private set; }
    
    protected BaseBLL() {
        DbContext = new DBContainer();
        // 可在此設定 DbContext.Configuration.ProxyCreationEnabled = false 等
    }
    
    public void Dispose() {
        if (DbContext != null) {
            DbContext.Dispose();
            DbContext = null;
        }
    }
    
    // 通用 CRUD 方法可選擇性實作於此
}

具體 BLL 繼承：

public class SysSampleBLL : BaseBLL<SysSample>, ISysSampleBLL {
    // 直接使用 DbContext 進行操作
    public IQueryable<SysSample> GetList() {
        return DbContext.SysSample.AsQueryable();
    }
}

6. 統一前端提示訊息常數類別

在 App.Common 建立 Suggestion.cs：

namespace App.Common {
    public static class Suggestion {
        public const string PlaseChooseToOperatingRecords = "請選擇要操作的記錄";
        public const string AreYouLogOff = "您確定要登出系統嗎？";
        public const string YouWantToDeleteTheSelectedRecords = "您確定要刪除所選記錄嗎？";
        public const string InsertSucceed = "建立成功";
        public const string InsertFail = "建立失敗";
        public const string EditSucceed = "修改成功";
        public const string EditFail = "修改失敗";
        public const string DeleteSucceed = "刪除成功";
        public const string DeleteFail = "刪除失敗";
        public const string CheckSucceed = "審核成功";
        public const string CheckFail = "審核失敗";
        public const string UnCheckSucceed = "反審核成功";
        public const string UnCheckFail = "反審核失敗";
        public const string Export = "匯出";
        public const string Import = "匯入";
        public const string Loading = "載入中...";
        public const string LoginSucceed = "登入成功，歡迎使用！";
        public const string UserTimeOver = "登入逾時，請重新登入";
        // ... 更多訊息常數
    }
}

前端使用：

$.messageBox5s('提示', Suggestion.PlaseChooseToOperatingRecords);

7. 擴充 Mvc HtmlHelper 封裝工具列按鈕

public static class ToolbarExtensions {
    public static MvcHtmlString ToolbarButton(this HtmlHelper helper, string id, string text, string iconClass, string onclick) {
        var builder = new TagBuilder("a");
        builder.MergeAttribute("id", id);
        builder.MergeAttribute("class", "l-btn l-btn-plain");
        builder.MergeAttribute("onclick", onclick);
        builder.MergeAttribute("style", "float:left;");
        
        var spanOuter = new TagBuilder("span");
        spanOuter.AddCssClass("l-btn-left");
        
        var spanInner = new TagBuilder("span");
        spanInner.AddCssClass("l-btn-text " + iconClass);
        spanInner.MergeAttribute("style", "padding-left:20px;");
        spanInner.SetInnerText(text);
        
        spanOuter.InnerHtml = spanInner.ToString();
        builder.InnerHtml = spanOuter.ToString();
        
        return MvcHtmlString.Create(builder.ToString() + "<div class='datagrid-btn-separator'></div>");
    }
}

View 中優雅調用：

@Html.ToolbarButton("btnCreate", "新增", "icon-add", "openCreateWindow()")
@Html.ToolbarButton("btnEdit", "編輯", "icon-edit", "openEditWindow()")
@Html.ToolbarButton("btnDelete", "刪除", "icon-remove", "deleteSelected()")

優化成果總結

原始碼發布說明

優化後的完整原始碼將作為本系列最後一個提供下載的版本。後續章節將專注於權限系統、T4 模板、報表引擎等核心功能講解，程式碼將以關鍵片段形式呈現。請妥善保存此版本原始碼作為專案基礎模板。

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