MVC4制作网站教程第四章 浏览栏目4.2

这篇文章主要为大家详细介绍了MVC4制作网站教程,浏览栏目功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、用户

二、用户组

三、栏目

3.1添加栏目

3.2浏览栏目

浏览栏目这块做个一个树形列表,添加栏目的左侧部分只写了句“左侧列表”就是指这个树形列表,等我们写完替换一下就可以了。

先在【CategoryController】里面添加[ManagePartialTree]action,这里的Partial用来说明是分部视图

 ///  /// 栏目列表局部树视图 ///  ///  [AdminAuthorize] public ActionResult ManagePartialTree() { return View(); } 

右键添加分部视图ManagePartialTree.cshtml。分部视图里用easyui的tree来显示栏目,使用异步加载,视图代码只有一行。

复制代码 代码如下:
    url:'@Url.Action("ManageTreeChildrenJson", "Category")'">

这里从[anageTreeChildrenJson]action获取的json数据。

在【CategoryController】添加JsonResult类型的[anageTreeChildrenJson]

 ///  /// 子栏目树形控件Json数据 ///  /// 栏目id ///  [AdminAuthorize] public JsonResult ManageTreeChildrenJson(int id = 0) { categoryRsy = new CategoryRepository(); var _children = categoryRsy.Children(id); List _trees = new List(_children.Count()); foreach(var c in _children) { Tree _t = new Tree { id = c.CategoryId, text = c.Name}; switch (c.Type) { case 0: _t.state = "closed"; _t.iconCls = "icon-general"; break; case 1: _t.state = "open"; _t.iconCls = "icon-page"; break; case 2: _t.state = "open"; _t.iconCls = "icon-link"; break; } _trees.Add(_t); } return Json(_trees, JsonRequestBehavior.AllowGet); }

这里默认id=0,根据id查找子栏目,然后遍历子栏目生成树的节点数据。

switch (c.Type) 是根据栏目类型不同来,来设置节点状态并,设置不同的图标。最后以Json类型返回。

修改一下上一节中添加栏目的视图ManageAdd.cshtml,将左侧列表替换成@Html.Action("ManagePartialTree", "Category")。替换后ManageAdd.cshtml

 @model Ninesky.Models.Category @{ ViewBag.Title = "ManageAdd"; Layout = "~/Views/Layout/_Manage.cshtml"; } 
添加栏目
@using (Html.BeginForm()) { @Html.ValidationSummary(true)
栏目
  • @Html.LabelFor(model => model.Type)
    @Html.DropDownList("Type") @Html.ValidationMessageFor(model => model.Type) @Html.DisplayDescriptionFor(model => model.Type)
  • @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) @Html.DisplayDescriptionFor(model => model.Name)
  • @Html.LabelFor(model => model.ParentId)
    @Html.TextBox("ParentId", 0, new { @class = "easyui-combotree", data_options = "url:'" + Url.Action("JsonTreeParent", "Category") + "'" }) @Html.ValidationMessageFor(model => model.ParentId) @Html.DisplayDescriptionFor(model => model.ParentId)
  • @Html.LabelFor(model => model.Model)
    @Html.DropDownList("Model") @Html.ValidationMessageFor(model => model.Model) @Html.DisplayDescriptionFor(model => model.Model)
  • @Html.LabelFor(model => model.CategoryView)
    @Html.EditorFor(model => model.CategoryView) @Html.ValidationMessageFor(model => model.CategoryView) @Html.DisplayDescriptionFor(model => model.CategoryView)
  • @Html.LabelFor(model => model.ContentView)
    @Html.EditorFor(model => model.ContentView) @Html.ValidationMessageFor(model => model.ContentView) @Html.DisplayDescriptionFor(model => model.ContentView)
  • @Html.LabelFor(model => model.Navigation)
    @Html.EditorFor(model => model.Navigation) @Html.ValidationMessageFor(model => model.Navigation) @Html.DisplayDescriptionFor(model => model.Navigation)
  • @Html.LabelFor(model => model.Order)
    @Html.EditorFor(model => model.Order, new { value = 0 }) @Html.ValidationMessageFor(model => model.Order) @Html.DisplayDescriptionFor(model => model.Order)
}
@Html.Action("ManagePartialTree", "Category")
@section Scripts { @Styles.Render("~/EasyUi/icon") @Scripts.Render("~/bundles/EasyUi") @Scripts.Render("~/bundles/jqueryval") }

添加一个单页类型节点,在添加一个链接类型节点看一下

点一下栏目树前的小箭头能够显示和关闭下级栏目。但点栏目名称没什么反应,我希望的是点栏目名称能够跳转到栏目详细信息页面~/Category/ManageDetails/id,现在用js实现。打开ManagePartialTree.cshtml,在下面添加脚本。

 

完工。

以上就是MVC4制作网站教程第四章 浏览栏目4.2的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » ASP编程