構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（14）-EasyUI缺陷修複與擴充

標籤：

不知不覺已經過了13講，（本來還要講多一講是，資料驗證之自訂驗證，基於園友還是對許可權這塊比較敢興趣，講不講驗證還是看大家的反映），我們應該對系統有一個小結。
首先這是一個團隊開發項目，基於介面編程，我們從EasyUI搭建系統的架構開始，開始了一個範例程式對EasyUI的DataGrid進行了操作，並實現Unity的注入到容器，使程式 
的效能大大提升，代碼品質上升，更佳利於單元測試，使用日誌和異常堅固系統穩定性等等。。。。

當然你應該覺得系統還有存在很多不足，我們應該動手來最佳化一下。
下面我羅列了需要最佳化的項目，如果你覺得還有最佳化的，請提交，我將加入以後的文章中去

1. UI方面，我們的easyui window彈出表單，是不是沒有置中，好醜啊;
2. DataGrid雖然我在綁定時候寫入了根據第一次表單的變化去適應架構，這時你點擊遊覽器的縮小或者擴大按鈕，那麼你的DataGrid變形了;
3. JS我們在Details頁面引入了JS，我們是否應該把他嵌入到_Layout_----裡面去？並進行捆綁？
4. 我們DataGrid返回的日期格式是/Date(20130450000365)你看得懂嗎？
5. 我們的BLL每次都要去執行個體化 DBContainer db = new DBContainer();重複操作，我們是不是應該寫一個BaseBLL基類類繼承
6. 我們前端很多提示資訊都一樣，是不是應該封裝起來，比如點擊：Details時沒有選擇提示的“請選擇要操作的記錄”
7. 工具列的增、刪、改按鈕一樣每次粘貼的代碼也不少，我們應該擴充Mvc的HtmlHelper的封裝，之後我們@html.就出來了多方便，以後還用於許可權控制

最佳化後的系統將可能做為最後一個發布源碼的版本，如無必要以後不再提供源碼下載，但所講的內容中，將全部包含完整源碼，請你將完成的系統“珍藏”起來，因 
為這是你的勞動成果

最後我們將接受一個更大的目標挑戰，許可權管理系統。我覺得這個是大家最關心的事情了，但是在此之前，我們將要補充一些知識。

• MVC內建的過濾器用法
• MVC路由Rotun概念

許可權系統講完了，我們講T4模板，匯出報表和圖表，檔案上傳，系統設定等等補充..讓我們的系統拿出來就能當項目來用。
由於接下來的東西邏輯性和編碼都要比之前的複雜很多,所以更新可能會比以前慢。請大家耐心等待，謝謝園友的支援，無論多忙我都會不斷的更新

現在我們先來解決以上7個問題吧！

1.UI方面，我們的easyui window彈出表單，是不是沒有置中，好醜啊;

　　

easyui1.3.2版本,window的彈出不會置中了。而dialog是會置中的,我們必須為為window的open事件做擴充

代碼如下：只要加入以下代碼即可.如果你是看了MVC項目系列的，把他放到jquery.easyui.plus.js裡面就可以了

//讓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;

jquery.easyui.plus.js

 

完美置中。

點擊最大化後，再次最小化時也會出現不置中現象，我們必須，擴充resize事件。

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;

window組件可以相容了

2.DataGrid雖然我在綁定時候寫入了根據第一次表單的變化去適應架構，這時你點擊遊覽器的縮小或者擴大按鈕，那麼你的DataGrid變形了;

　　

DataGrid有100%寬度的設定，但是有時不是很讓人滿意，比如你你放大或者拉放你的瀏覽器，那麼DataGrid只維持第一次載入的寬高，非常難看

 $(‘#List‘).datagrid({            url: ‘/SysSample/GetList‘,            width: $(window).width() - 10,            methord: ‘post‘,            height: $(window).height() - 35,            fitColumns: true,.................................

你看到$(window).width() - 10和$(window).height() - 35

這是我設定的頁面第一次載入，去後去表單的寬度和高度進行計算，那麼在第一次載入顯示是正常的，但是放大或者展開瀏覽器,datagrid將不做改變了，我們這是要用到一個jquery的方法，叫resize()

 

參數

 

fnFunction V1.0

在每一個匹配元素的resize事件中綁定的處理函數。

[data],fnString,Function V1.4.3

data:resize([Data], fn) 可傳入data供函數fn處理。

fn:在每一個匹配元素的resize事件中綁定的處理函數。

看到瀏覽器變化時候激發的事件，所以我們要加入:

!--自動DataGrid 從第一次載入與重設表單大小時候發生的事件:分部視圖--><script type="text/javascript">    $(function () {        $(window).resize(function () {            $(‘#List‘).datagrid(‘resize‘, {                width: $(window).width() - 10,                height: $(window).height() - 35            }).datagrid(‘resize‘, {                width: $(window).width() - 10,                height: $(window).height() - 35            });        });            });</script>

好了，我們來做一個對比（第一載入的時候）

縮小瀏覽器的時候

完美顯示

3.JS我們在Details頁面引入了JS，我們是否應該把他嵌入到_Layout_----裡面去？並進行捆綁？

　　我已經進行壓縮了.源碼帶出.
4.我們DataGrid返回的日期格式是/Date(20130450000365)你看得懂嗎？

　　MVC解決Json DataGrid返回的日期格式是/Date(20130450000365)

實際上是Json格式化問題，我們應該在返回json的時候進行格式化，我們需要重寫系統的JsonResult類,新增引用system.web和system.web.extensions

 

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web.Mvc;using System.Text.RegularExpressions;using System.Web;using System.Web.Script.Serialization;namespace App.Common{    public class ToJsonResult : JsonResult    {        const string error = "該請求已被封鎖，因為敏感資訊透露給第三方網站，這是一個GET請求時使用的。為了可以GET請求，請設定JsonRequestBehavior AllowGet。";        /// <summary>        /// 格式化字串        /// </summary>        public string FormateStr        {            get;            set;        }        public override void ExecuteResult(ControllerContext context)        {            if (context == null)            {                throw new ArgumentNullException("context");            }            if (JsonRequestBehavior == JsonRequestBehavior.DenyGet &&                String.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))            {                throw new InvalidOperationException(error);            }            HttpResponseBase response = context.HttpContext.Response;            if (!String.IsNullOrEmpty(ContentType))            {                response.ContentType = ContentType;            }            else            {                response.ContentType = "application/json";            }            if (ContentEncoding != null)            {                response.ContentEncoding = ContentEncoding;            }            if (Data != null)            {                JavaScriptSerializer serializer = new JavaScriptSerializer();                string jsonstring = serializer.Serialize(Data);                //string p = @"\\/Date\((\d+)\+\d+\)\\/";                string p = @"\\/Date\(\d+\)\\/";                MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);                Regex reg = new Regex(p);                jsonstring = reg.Replace(jsonstring, matchEvaluator);                response.Write(jsonstring);            }        }        /// <summary>        /// 將Json序列化的時間由/Date(1294499956278+0800)轉為字串        /// </summary>        private string ConvertJsonDateToDateString(Match m)        {            string result = string.Empty;            string p = @"\d";            var cArray = m.Value.ToCharArray();            StringBuilder sb = new StringBuilder();            Regex reg = new Regex(p);            for (int i = 0; i < cArray.Length; i++)            {                if (reg.IsMatch(cArray[i].ToString()))                {                    sb.Append(cArray[i]);                }            }            // reg.Replace(m.Value;            DateTime dt = new DateTime(1970, 1, 1);            dt = dt.AddMilliseconds(long.Parse(sb.ToString()));            dt = dt.ToLocalTime();            result = dt.ToString("yyyy-MM-dd HH:mm:ss");            return result;        }    }}

 

建立Controller的基類，BaseController讓Controller去繼承Controller

 

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web;using System.Web.Mvc;using App.Common;using App.Models.Sys;namespace App.Admin{    public class BaseController : Controller    {        /// <summary>        /// 擷取目前使用者Id        /// </summary>        /// <returns></returns>        public string GetUserId()        {            if (Session["Account"] != null)            {                AccountModel info = (AccountModel)Session["Account"];                return info.Id;            }            else            {                return "";            }        }        /// <summary>        /// 擷取目前使用者Name        /// </summary>        /// <returns></returns>        public string GetUserTrueName()        {            if (Session["Account"] != null)            {                AccountModel info = (AccountModel)Session["Account"];                return info.TrueName;            }            else            {                return "";            }        }        /// <summary>        /// 擷取目前使用者資訊        /// </summary>        /// <returns>使用者資訊</returns>        public AccountModel GetAccount()        {            if (Session["Account"] != null)            {                return (AccountModel)Session["Account"];            }            return null;        }        protected override JsonResult Json(object data, string contentType, Encoding contentEncoding, JsonRequestBehavior behavior)        {            return new ToJsonResult            {                Data = data,                ContentEncoding = contentEncoding,                ContentType = contentType,                JsonRequestBehavior = behavior,                FormateStr = "yyyy-MM-dd HH:mm:ss"            };        }        /// <summary>        /// 返回JsonResult.24         /// </summary>        /// <param name="data">資料</param>        /// <param name="behavior">行為</param>        /// <param name="format">json中dateTime類型的格式</param>        /// <returns>Json</returns>        protected JsonResult MyJson(object data, JsonRequestBehavior behavior, string format)        {            return new ToJsonResult            {                Data = data,                JsonRequestBehavior = behavior,                FormateStr = format            };        }        /// <summary>        /// 返回JsonResult42         /// </summary>        /// <param name="data">資料</param>        /// <param name="format">資料格式</param>        /// <returns>Json</returns>        protected JsonResult MyJson(object data, string format)        {            return new ToJsonResult            {                Data = data,                FormateStr = format            };        }        /// <summary>        /// 檢查SQL語句合法性        /// </summary>        /// <param name="sql"></param>        /// <returns></returns>        public bool ValidateSQL(string sql, ref string msg)        {            if (sql.ToLower().IndexOf("delete") > 0)            {                msg = "查詢參數中含有非法語句DELETE";                return false;            }            if (sql.ToLower().IndexOf("update") > 0)            {                msg = "查詢參數中含有非法語句UPDATE";                return false;            }            if (sql.ToLower().IndexOf("insert") > 0)            {                msg = "查詢參數中含有非法語句INSERT";                return false;            }            return true;        }    }}

 

好了，我們運行，其實就是這麼一回事！

 

5.我們的BLL每次都要去執行個體化 DBContainer db = new DBContainer();重複操作，我們是不是應該寫一個BaseBLL基類類繼承

　　我已經進行分離，源碼帶出.
6.我們前端很多提示資訊都一樣，是不是應該封裝起來，比如點擊：Details時沒有選擇提示的“請選擇要操作的記錄”

　　在App.Common加入以下類Suggestion

 View Code

　　在視圖中的使用

$("#btnDelete").click(function () {            var row = $(‘#List‘).datagrid(‘getSelected‘);            if (row != null) {                $.messager.confirm(‘提示‘, ‘@Suggestion.YouWantToDeleteTheSelectedRecords‘, function (r) {                        if (r) {                            $.post("/SysSample/Delete?id=" + row.Id, function (data) {                                if (data.type == 1)                                    $("#List").datagrid(‘load‘);                                $.messageBox5s(‘提示‘, data.message);                            }, "json");                        }                    });                } else { $.messageBox5s(‘提示‘, ‘@Suggestion.PlaseChooseToOperatingRecords‘); }            });

@Suggestion.PlaseChooseToOperatingRecords‘

7.工具列的增、刪、改按鈕一樣每次粘貼的代碼也不少，我們應該擴充Mvc的HtmlHelper的封裝，之後我們@html.就出來了多方便，以後還用於許可權控制

　　這個必須返回MvcHtmlString和在視圖中引入命名空間。在App.Admin的Core檔案夾中建立類ExtendMvcHtml

　　並加入以下代碼

 View Code

　　並在視圖中使用它，使用例子！

@Html.ToolButton("btnQuery", "icon-search","查詢",true)@Html.ToolButton("btnCreate", "icon-add", "新增",true)@Html.ToolButton("btnEdit", "icon-edit", "編輯", true)@Html.ToolButton("btnDetails", "icon-details", "詳細", true)@Html.ToolButton("btnDelete", "icon-remove", "刪除", true)@Html.ToolButton("btnExport", "icon-export","匯出",true)

 

構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（14）-EasyUI缺陷修複與擴充