學用MVC4作網站六:後臺管理(續)

關於後臺的說明：

後臺將會用easyui + ajax模式。

這裏涉及兩個問題，一個是使用easyui如何在前臺驗證模型的問題，另外一個是ajax提交後返回數據。

1、Easyui驗證

前臺驗證採用easyui控件的ValidateBox驗證，經過自定義htmlhelper的方式創建與模型的聯繫。

一、到http://www.jeasyui.com/download/index.php下載EasyUi的最新版本,將js文件解壓到~/script文件夾

將式樣放到~/Areas/Admin/Content/Easyui/

而後打開BundleConfig.cs，添加以下代碼

bundles.Add(new ScriptBundle("~/Scripts/Easyui").Include(
                        "~/Scripts/Easyui/jquery.easyui.js", "~/Scripts/Easyui/locale/easyui-lang-zh_CN.js"));
bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Easyui/icon.css", "~/Areas/Admin/Content/Easyui/metro-blue/easyui.css"));

二、在~/Extensions文件夾中添加類EasyuiExtensions.cs

此類的目的是利用ModelMetadata元數據獲取Model的驗證Attribute而後生成帶ValidateBox驗證輸入控件。

思路爲：使用ModelMetadata.FromLambdaExpression獲取模型字段的元數據->使用ModelValidatorProviders.Providers.GetValidators獲取元數據中驗證屬性->根據屬性生成ValidateBox的validType。

代碼以下：

////////////////////
//Easyui控件Mvc擴展
//版本v1
//建立日期2013-09-28
////////////////////
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;

namespace System.Web.Mvc.Html
{
    /// <summary>
    /// EasyUi控件
    /// </summary>
    public static class EasyuiExtensions
    {
        public static MvcHtmlString EasyuiInput<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string type = "input")
        {
            return htmlHelper.EasyuiInput(expression, null,type:type);
        }
        public static MvcHtmlString EasyuiInput<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes, string type = "input")
        {
            return htmlHelper.EasyuiInput(expression, htmlAttributes: HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes),type:type);
        }

        public static MvcHtmlString EasyuiInput<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes, string type = "input")
        {
            ModelMetadata _metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            string _name = ExpressionHelper.GetExpressionText(expression);
            string _fullName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(_name);
            string _htmlCtrlstr = string.Empty;//控件Html字符
            if (String.IsNullOrEmpty(_fullName))
            {
                throw new ArgumentException(_name + " 字段不存在！", "name");
            }
            TagBuilder tagBuilder = new TagBuilder(type);
            tagBuilder.MergeAttributes(htmlAttributes);
            tagBuilder.MergeAttribute("name", _fullName, true);
            tagBuilder.MergeAttribute("id", _fullName, true);
            //值
            if (_metadata.Model != null)
            {
                if (type.ToLower() == "input") tagBuilder.MergeAttribute("value", (string)_metadata.Model);
                else if (type.ToLower() == "textarea") tagBuilder.InnerHtml = (string)_metadata.Model;
                
            }
            ///驗證部分代碼開始
            Dictionary<string, object> _results = new Dictionary<string, object>();
            string _validType = string.Empty;
            if (htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled)
            {
                IEnumerable<ModelClientValidationRule> _clientRules = ModelValidatorProviders.Providers.GetValidators(_metadata ?? ModelMetadata.FromStringExpression(_name, htmlHelper.ViewData), htmlHelper.ViewContext).SelectMany(v => v.GetClientValidationRules());
                if (_clientRules.Count() > 0)
                {
                    _validType = string.Empty;
                    foreach (ModelClientValidationRule rule in _clientRules)
                    {
                        switch (rule.ValidationType)
                        {
                            case "required":
                                break;
                            case "length":
                                if (!string.IsNullOrEmpty(_validType)) _validType += ",";
                                if (rule.ValidationParameters.ContainsKey("min")) _validType += "'" + rule.ValidationType + "[" + rule.ValidationParameters["min"].ToString() + "," + rule.ValidationParameters["max"].ToString() + "]'";
                                else _validType += "'" + rule.ValidationType + "[0," + rule.ValidationParameters["max"].ToString() + "]'";
                                break;
                            default:
                                if (!string.IsNullOrEmpty(_validType)) _validType += ",";
                                _validType += "'" + rule.ValidationType + "'";
                                break;
                        }
                    }
                    if(!string.IsNullOrEmpty(_validType)) _validType = "validType:["+_validType+"]";
                    if (_metadata.IsRequired)
                    {
                        if (string.IsNullOrEmpty(_validType)) _validType = "required:true";
                        else _validType = "required:true," + _validType;
                    }
                    if (!string.IsNullOrEmpty(_validType)) tagBuilder.MergeAttribute("data-options", _validType);
                }
            }
            ///驗證部分代碼結束
            if (type.ToLower() == "input") _htmlCtrlstr = tagBuilder.ToString((TagRenderMode.SelfClosing));
            else if (type.ToLower() == "textarea") _htmlCtrlstr = tagBuilder.ToString();
            return new MvcHtmlString(_htmlCtrlstr);
        }
    }
}

2、ajax返回數據

ajax提交後返回數據包含是否成功，及消息提示，另外若是服務器驗證失敗的話還要返回一個失敗字段列表，乾脆建一個類。

在~/Models文件夾中添加類JsonData，代碼以下：

/////////////////
//版本：V1
//建立日期：2013-10-23
/////////////////
using System.Collections.Generic;

namespace Ninesky.Models
{
    public class JsonData
    {
        /// <summary>
        /// 操做成功
        /// </summary>
        public bool Success { get; set; }
        /// <summary>
        /// 消息
        /// </summary>
        public string Msg { get; set; }
        /// <summary>
        /// 消息列表
        /// </summary>
        public Dictionary<string, string> MsgLsit { get; set; }
        public JsonData()
        {
            MsgLsit = new Dictionary<string, string>();
        }
    }
}

後臺ajax提交後固定返回JsonData的json類型。

3、開始搭架子

一、添加布頁

在~/Areas/Admin/Views/Shared中添加_Layout.cshtml。

後臺頁面採用easyui的layout，分north、south、west、center四個部分。代碼以下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Css/Admin")
    @Styles.Render("~/Css/Admin/Easyui")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Scripts/Easyui")
    @Scripts.Render("~/Areas/Admin/Scripts/global.js")
</head>
<body class="easyui-layout">
    <div id="north" data-options="region:'north'">
        @Html.Action("PartialNorth","Home")
        </div>
    <div id="south" data-options="region:'south'"></div>
    @RenderBody()
</body>
</html>

二、後臺管理的主頁——Home

在~/Areas/Admin/Controllers 添加【HomeController】

爲[Index] action添加視圖

@{
    ViewBag.Title = "管理中心";
}
<div id="west" data-options="region:'west',title:' ',split:true" style="border-top:solid 1px #1BA1E2;border-right:solid 1px #1BA1E2;border-bottom:solid 1px #1BA1E2"></div>
<div id="center" data-options="region:'center'">
    <div id="tabs" class="easyui-tabs" data-options="fit:true" style="margin-left: auto; margin-right: auto">
        <div title="歡迎" style="padding:20px;">歡迎使用後臺管理……</div>
    </div>
</div>

這裏用到了easyui的layout和tabs。

添加返回分部視圖的action [PartialNorth] 這個在佈局也中調用，顯示layout的North部分，也就是頁面的頭部（圖中1的位置）。

/// <summary>
        /// 頂部視圖
        /// </summary>
        /// <returns></returns>
        public PartialViewResult PartialNorth()
        {
            return PartialView();
        }

添加相應視圖。

<div class="admininfo_bar">歡迎您：洞庭夕照  修改密碼   退出 </div>
<div class="tools_bar">
    <a id="home" href="#"><img src="~/Areas/Admin/Content/images/home.png" /> 首頁</a>
    <a id="cagegory_cfg" href="#"><img src="~/Areas/Admin/Content/images/folder.png" /> 欄目管理</a>
    <a id="system_cfg" href="javascript:void(0)"><img src="~/Areas/Admin/Content/images/config.png" /> 系統設置</a>
</div>

完成後界面以下：