MVC4做網站后台:欄目管理1、添加欄目-續

欄目類型跟原來一樣分為常規欄目、單頁欄目和外部鏈接。根據欄目類型的不同要隱藏相應的表單和驗證（服務器端驗證）。另外一個是父欄目必須是常規欄目才行，easyui-combotree要用到樹形json數據，考慮不用遞歸函數而是用ParentPath字段排序的方式實現。

 

首先在在【CategoryController】中添加這個action，代碼

/// <summary>
        /// 欄目樹
        /// </summary>
        /// <param name="categoryId">欄目Id，調用所有欄目為0</param>
        /// <param name="categoryType">欄目類型-1所有欄目，0常規欄目</param>
        /// <param name="jsonType">返回的數據類型【默認（0）-EasyuiTree類型】</param>
        /// <returns>Json類型數據</returns>
        public JsonResult Tree(int categoryId = 0, int categoryType = 0, int jsonType = 0)
        {
            IQueryable<Category> _categorys;
            if (categoryType == -1) _categorys = categoryRepository.Progeny(categoryId).OrderByDescending(c => c.ParentPath).ThenBy(c => c.Order);
            else _categorys = categoryRepository.Progeny(categoryId, categoryType).OrderByDescending(c => c.ParentPath).ThenBy(c => c.Order);
            switch (jsonType)
            {
                default:
                    List<EasyuiTreeNodeViewModel> _trees = new List<EasyuiTreeNodeViewModel>();
                    Dictionary<int, EasyuiTreeNodeViewModel> _nodes = new Dictionary<int, EasyuiTreeNodeViewModel>();
                    foreach (var _category in _categorys)
                    {
                        if (_trees.Exists(n => n.parentid == _category.CategoryId))//存在子節點
                        {
                            var _childern = _trees.Where(n => n.parentid == _category.CategoryId).ToList();
                            _trees.RemoveAll(n => n.parentid == _category.CategoryId);
                            _trees.Add(new EasyuiTreeNodeViewModel { parentid = _category.ParentId, id = _category.CategoryId, text = _category.Name, state = "open", children = _childern });
                        }
                        else _trees.Add(new EasyuiTreeNodeViewModel { parentid = _category.ParentId, id = _category.CategoryId, text = _category.Name, state = "close"});
                    }
                    return Json(_trees);
            }
        }

 

再在控制器中添加Add的局部視圖方法

/// <summary>
        /// 添加欄目
        /// </summary>
        /// <returns>局部視圖</returns>
        public PartialViewResult Add()
        {
            return PartialView(new Category { CategoryView = "Index", ContentOrder = 0, ContentView = "Detail", Model = "", Order = 0, PageSize = 20, ParentId = 0, RecordName = "文章", RecordUnit = "篇", Type = 0 });
        }

右鍵添加強類型局部視圖

@model Ninesky.Models.Category
<div class="c_navbar">欄目管理 >> 添加欄目</div>
@using (Html.BeginForm("Add", "Category", FormMethod.Post, new { id = "categoryadd_form" }))
{
    @Html.AntiForgeryToken()
    <div class="fs_wapper">
        <div class="header">添加欄目</div>
        @Html.ValidationSummary()
        <table class="fieldset">
            <tr>
                <th>@Html.LabelFor(model => model.Name)<span>*</span></th>
                <td>@Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                    @Html.DisplayDescriptionFor(model => model.Name)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.ParentId)<span>*</span></th>
                <td>
                    <input id="ParentId" name="ParentId" style="width: 200px;" data-url="@Url.Action("Tree", "Category")" value="@Model.ParentId" />
                    @Html.ValidationMessageFor(model => model.ParentId)
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.Type)<span>*</span></th>
                <td>
                    <input id="Type" name="Type" value="@Model.Type" />
                    @Html.ValidationMessageFor(model => model.Type)
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.Model)<span>*</span></th>
                <td>
                    <input id="Model" name="Model" value="@Model.Model" data-url="@Url.Action("Items", "Module", new { id = 1 })" />
                    @Html.ValidationMessageFor(model => model.Model)
                    @Html.DisplayDescriptionFor(model => model.Model)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.CategoryView)<span>*</span></th>
                <td>
                    <input id="CategoryView" class="easyui-combobox" name="CategoryView" data-options="valueField:'Name',textField:'Name',url:'@Url.Action("Views", "View", new { controllerName="Category" })'" value="@Model.CategoryView">
                    @Html.ValidationMessageFor(model => model.CategoryView)
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.ContentView)<span>*</span></th>
                <td>
                    <input id="ContentView" class="easyui-combobox" name="ContentView" data-url="@Url.Action("Views", "View")" data-options="valueField:'Name',textField:'Name',url:'@Url.Action("Views", "Category", new { controllerName="Article" })'" value="@Model.ContentView">
                    @Html.ValidationMessageFor(model => model.CategoryView)
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.LinkUrl)<span>*</span></th>
                <td>
                    @Html.EditorFor(model => model.LinkUrl)
                    @Html.ValidationMessageFor(model => model.LinkUrl)
                    @Html.DisplayDescriptionFor(model => model.LinkUrl)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.Order)<span>*</span></th>
                <td>
                    @Html.EditorFor(model => model.Order)
                    @Html.ValidationMessageFor(model => model.Order)
                    @Html.DisplayDescriptionFor(model => model.Order)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.ContentOrder)<span>*</span></th>
                <td>
                    <select id="ContentOrder" name="ContentOrder" class="easyui-combobox" style="width: 200px;"
                        data-options="url:'@Url.Action("OrderList", "Item", new {area="" })',valueField:'Value',textField:'Name'">
                    </select>
                    @Html.ValidationMessageFor(model => model.ContentOrder)
                    @Html.DisplayDescriptionFor(model => model.ContentOrder)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.PageSize)<span>*</span></th>
                <td>
                    @Html.EditorFor(model => model.PageSize)
                    @Html.ValidationMessageFor(model => model.PageSize)
                    @Html.DisplayDescriptionFor(model => model.PageSize)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.RecordUnit)<span>*</span></th>
                <td>
                    @Html.EditorFor(model => model.RecordUnit)
                    @Html.ValidationMessageFor(model => model.RecordUnit)
                    @Html.DisplayDescriptionFor(model => model.RecordUnit)
                    
                </td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.RecordName)<span>*</span></th>
                <td>
                    @Html.EditorFor(model => model.RecordName)
                    @Html.ValidationMessageFor(model => model.Name)
                    @Html.DisplayDescriptionFor(model => model.RecordName)
                    
                </td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <a id="CategoryAdd_Save" href="javascript:void()" class="easyui-linkbutton">保存</a>
                </td>
            </tr>
        </table>
    </div>
    @Scripts.Render("~/Areas/Admin/Scripts/Category.js");
    <script type="text/javascript">
        CategoryAddReady();
    </script>
}
@Scripts.Render("~/bundles/jqueryval")

在category.js中添加相應的js函數

//Add視圖添加載完成函數
function CategoryAddReady() {
    $.post($('#ParentId').attr('data-url'), null, function (data) {
        if (data == "") data = [{ id: 0, text: "無" }];
        else {
            data.unshift({ id: 0, text: "無" });
        }
        $('#ParentId').combotree({ required: true, data: data });

    });
    $('#Type').combobox({
        valueField: 'id',
        textField: 'text',
        data: [{ 'id': 0, 'text': '常規欄目' }, { 'id': 1, 'text': '單頁欄目' }, { 'id': 2, 'text': '外部鏈接' }],
        required: true,
        onSelect: function (rec) {
            CategoryAdd_TypeChange(rec.id);
        }
    });
    $.post($('#Model').attr("data-url"), null, function (data) {
        if (data == "") data = [{ Model: "", Name: "無" }];
        else {
            data.unshift({ Model: "", Name: "無" });
        }
        $('#Model').combobox({
            valueField: 'Model',
            textField: 'Name',
            data: data,
            required: true,
            onSelect: function (rec) {
                CategoryAdd_ModelChange(rec.Model);
            }
        });
    });

    $('#ContentView').parent().parent().hide();
    $('#LinkUrl').parent().parent().hide();
    $('#ContentOrder').parent().parent().hide();
    $('#RecordUnit').parent().parent().hide();
    $('#PageSize').parent().parent().hide();
    $('#RecordName').parent().parent().hide();
    //保存事件
    $('#CategoryAdd_Save').click(function () {
        CategoryAdd_Save();
    });
    //CategoryAdd_TypeChange(0);
}
//Add視圖類型切換事件
function CategoryAdd_TypeChange(typeId) {
    //常規欄目
    if (typeId == 0) {
        //模型
        $('#Model').parent().parent().show();
        var _modelValue = $('#Model').combobox('getValue');
        CategoryAdd_ModelChange(_modelValue);

    }//單頁欄目
    else if (typeId == 1) {
        //模型
        $('#Model').parent().parent().hide();
        //欄目視圖
        $('#CategoryView').parent().parent().show();
        //內容視圖
        $('#ContentView').parent().parent().hide();
        //鏈接地址
        $('#LinkUrl').parent().parent().hide();
        //內容排序
        $('#ContentOrder').parent().parent().hide();
        //每頁記錄數
        $('#PageSize').parent().parent().hide();
        //記錄單位
        $('#RecordUnit').parent().parent().hide();
        //記錄名稱
        $('#RecordName').parent().parent().hide();
    }//外部鏈接
    else if (typeId == 2) {
        //模型
        $('#Model').parent().parent().hide();
        //欄目視圖
        $('#CategoryView').parent().parent().hide();
        //內容視圖
        $('#ContentView').parent().parent().hide();
        //鏈接地址
        $('#LinkUrl').parent().parent().show();
        //內容排序
        $('#ContentOrder').parent().parent().hide();
        //每頁記錄數
        $('#PageSize').parent().parent().hide();
        //記錄單位
        $('#RecordUnit').parent().parent().hide();
        //記錄名稱
        $('#RecordName').parent().parent().hide();
    }
}

//Add視圖模型切換事件
function CategoryAdd_ModelChange(value) {
    if (value == "")//模型為無
    {
        //欄目視圖

        $('#CategoryView').parent().parent().show();
        //內容視圖
        $('#ContentView').parent().parent().hide();
        //鏈接地址
        $('#LinkUrl').parent().parent().hide();
        //內容排序
        $('#ContentOrder').parent().parent().hide();
        //每頁記錄數
        $('#PageSize').parent().parent().hide();
        //記錄單位
        $('#RecordUnit').parent().parent().hide();
        //記錄名稱
        $('#RecordName').parent().parent().hide();
    }
    else {
        $('#CategoryView').parent().parent().show();
        //內容視圖
        $('#ContentView').parent().parent().show();
        //鏈接地址
        $('#LinkUrl').parent().parent().hide();
        //內容排序
        $('#ContentOrder').parent().parent().show();
        //每頁記錄數
        $('#PageSize').parent().parent().show();
        //記錄單位
        $('#RecordUnit').parent().parent().show();
        //記錄名稱
        $('#RecordName').parent().parent().show();
        var _modelValue = $('#Model').combobox('getValue');
        $('#ContentView').combobox('reload', $('#ContentView').attr('data-url') + '?controllerName=' + _modelValue);
    }
}
//添加保存
function CategoryAdd_Save() {
    $('#categoryadd_form').form('submit', {
        success: function (data) {
            var rt = jQuery.parseJSON(data);
            //驗證
            Authentication(data.Authentication);
            //操作成功
            if (rt.Success) {
                $(document.body).append("<div id='CategoryAdd_SuccessDialog'></div>");
                $('#CategoryAdd_SuccessDialog').dialog({
                    title: '操作成功',
                    width: 280,
                    height: 138,
                    closed: false,
                    cache: false,
                    content: '<br />添加欄目成功',
                    modal: true,
                    buttons:[{
                        text:'繼續添加欄目',
                        handler: function () {
                            var _layout = $('#layout');
                            var _center = _layout.layout('panel', 'center');
                            _center.panel('refresh');
                            var _west = _layout.layout('panel', 'west');
                            _west.panel('refresh');
                            $('#CategoryAdd_SuccessDialog').dialog('destroy');
                        }
                    },{
                        text:'關閉',
                        handler: function () {
                            var _layout = $('#layout');
                            var _west = _layout.layout('panel', 'west');
                            _west.panel('refresh');
                            $('#CategoryAdd_SuccessDialog').dialog('destroy');
                        }
                    }]
                });
            }
            else {
                var msg = "";
                if (rt.ValidationList != undefined) ShowValidationMessage(rt.ValidationList);
                if (msg != "") msg = rt.Message + "<br /> <p> 原因如下：" + "<ul>" + msg + "</ul></p>";
                else msg = rt.Message;
                $.messager.alert("添加欄目失敗", msg, "error");
            }
        }
    });
}

再次在控制器中添加處理action

[HttpPost]
        public JsonResult Add(Category category)
        {
            JsonViewModel _jdata = new JsonViewModel();
            if (ModelState.IsValid)//模型驗證通過
            {
                //父欄目
                if (category.ParentId == 0) category.ParentPath = "0";
                else
                {
                    var _parentCategory = categoryRepository.Find(category.ParentId);
                    if (_parentCategory == null) ModelState.AddModelError("ParentId", "父欄目不存在。");
                    else if (_parentCategory.Type != 0) ModelState.AddModelError("ParentId", "父欄目不是常規欄目，不能添加子欄目。");
                    else category.ParentPath = _parentCategory.ParentPath + "," + _parentCategory.CategoryId;
                }
                //根據欄目類型驗證字段
                switch (category.Type)
                {
                    case 0://常規欄目
                        if (string.IsNullOrEmpty(category.Model))//模型為空
                        {
                            category.ContentView = category.LinkUrl = category.RecordUnit = category.RecordName = null;
                            category.ContentOrder = category.PageSize = null;
                        }
                        else
                        {
                            if (string.IsNullOrEmpty(category.CategoryView)) ModelState.AddModelError("CategoryView", "欄目視圖不能為空。");
                            if (string.IsNullOrEmpty(category.ContentView)) ModelState.AddModelError("ContentView", "內容視圖不能為空。");
                            if (category.ContentOrder == null) ModelState.AddModelError("ContentOrder", "內容排序方式不能為空。");
                            if (category.PageSize == null) ModelState.AddModelError("PageSize", "每頁記錄數不能為空。");
                            if (string.IsNullOrEmpty(category.RecordUnit)) ModelState.AddModelError("RecordUnit", "記錄單位不能為空。");
                            if (string.IsNullOrEmpty(category.RecordName)) ModelState.AddModelError("RecordName", "記錄名稱不能為空。");
                            category.LinkUrl = null;
                        }
                        break;
                    case 1://單頁欄目
                        if (string.IsNullOrEmpty(category.CategoryView)) ModelState.AddModelError("CategoryView", "欄目視圖不能為空。");;
                        category.Model = category.ContentView = category.LinkUrl = category.RecordUnit = category.RecordName = null;
                        category.ContentOrder = category.PageSize = null;
                        break;
                    case 2:
                        if (string.IsNullOrEmpty(category.LinkUrl)) ModelState.AddModelError("LinkUrl", "鏈接地址不能為空。");
                        category.Model = category.CategoryView = category.ContentView = category.RecordUnit = category.RecordName =category.ContentView = null;
                        category.ContentOrder = category.PageSize = null;
                        break;
                }
                //存在邏輯驗證錯誤
                if (!ModelState.IsValid) return Json(new JsonViewModel(ModelState));
                else
                {
                    if (categoryRepository.Add(category)) return Json(new JsonViewModel() { Success = true, Message = "添加欄目成功！" });
                    else return Json(new JsonViewModel() { Success = false, Message = "未能保存導數據庫。" });
                }
            }
            //模型驗證失敗
            else return Json(new JsonViewModel(ModelState));
        }