MVC4制作网站教程第四章 添加栏目4.1(2)

@model Ninesky.Models.Category @{ ViewBag.Title = "ManageAdd"; Layout = "~/Views/Layout/_Manage.cshtml"; } <div> <div></div> 左侧列表 </div> <div></div> <div> <div> <div> <img alt="" src="https://www.jb51.net/~/Skins/Default/Manage/Images/Category.gif" />添加栏目 </div> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>栏目</legend> <ul> <li> <div> @Html.LabelFor(model => model.Type) </div> <div> @Html.DropDownList("Type") @Html.ValidationMessageFor(model => model.Type) @Html.DisplayDescriptionFor(model => model.Type) </div> </li> <li> <div> @Html.LabelFor(model => model.Name) </div> <div> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) @Html.DisplayDescriptionFor(model => model.Name) </div> </li> <li> <div> @Html.LabelFor(model => model.ParentId) </div> <div> @Html.EditorFor(model => model.ParentId) @Html.ValidationMessageFor(model => model.ParentId) @Html.DisplayDescriptionFor(model => model.ParentId) </div> </li> <li> <div> @Html.LabelFor(model => model.Model) </div> <div> @Html.DropDownList("Model") @Html.ValidationMessageFor(model => model.Model) @Html.DisplayDescriptionFor(model => model.Model) </div> </li> <li> <div> @Html.LabelFor(model => model.CategoryView) </div> <div> @Html.EditorFor(model => model.CategoryView) @Html.ValidationMessageFor(model => model.CategoryView) @Html.DisplayDescriptionFor(model => model.CategoryView) </div> </li> <li> <div> @Html.LabelFor(model => model.ContentView) </div> <div> @Html.EditorFor(model => model.ContentView) @Html.ValidationMessageFor(model => model.ContentView) @Html.DisplayDescriptionFor(model => model.ContentView) </div> </li> <li> <div> @Html.LabelFor(model => model.Navigation) </div> <div> @Html.EditorFor(model => model.Navigation) @Html.ValidationMessageFor(model => model.Navigation) @Html.DisplayDescriptionFor(model => model.Navigation) </div> </li> <li> <div> @Html.LabelFor(model => model.Order) </div> <div> @Html.EditorFor(model => model.Order) @Html.ValidationMessageFor(model => model.Order) @Html.DisplayDescriptionFor(model => model.Order) </div> </li> <li> <div> </div> <div> <input type="submit" value="添加" /> </div> </li> </ul> </fieldset> } </div> </div> <div></div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

这里给一些<li>添加id属性，实现用户在显示不同的栏目类型的时候显示不同的项目。
 在ManageAdd.cshtml底部添加脚本 

<script type="text/javascript"> Details(); $("#Type").change(function () { Details(); }); function Details() { var v = $("#Type").val(); if (v == "0") { $("#li_model").show(); $("#li_categoryview").show(); $("#li_contentview").show(); $("#li_nav").hide(); } else if (v == "1") { $("#li_model").hide(); $("#li_categoryview").show(); $("#li_contentview").hide(); $("#li_nav").hide(); } else if (v == "2") { $("#li_model").hide(); $("#li_categoryview").hide(); $("#li_contentview").hide(); $("#li_nav").show(); } } </script>

从浏览器中看一下。父栏目这里还有些问题，设想中这里应该是一个下拉框，用户可以选择已存在栏目类型为一般栏目的栏目做父栏目。这里需要下拉树形列表，设想中应该是这个样子,是一个下拉列表和属性列表框的组合框。

html中没有这种类型的控件，mcv4 中带的jquery UI是一个比较好的库，本身包含一定的控件，并且可以自己扩展，但是他缺少一些像，数据表（datagirdview），树形控件（tree），树形组合控件（combotree）等，且jqueryui的式样也不太好变换，决定丢弃jqueryui，而是用easyui（相对jqueryui功能更全面，更容易控制式样），在“引用”上点右键选择管理NuGet程序包 

在已安装的包->全部，选择Jquery Ui点击卸载。 

去选在最新版本，在项目的/Scripts文件夹中新建EasyUi文件夹，将easyui中的一下文件夹复制到该文件夹。

打开App_Start\BundleConfig.cs，删除jqueryui相关项，添加