今天我们来讲讲ASP.NET方面的知识。

一、用户

二、用户组

三、栏目

3.1添加栏目

3.2浏览栏目

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

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

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

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

演示代码如下:
<ul id="ctree" class="easyui-tree" data-options="url:'@Url.Action("ManageTreeChildrenJson", "Category")'"></ul>

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

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

/// &lt;summary&gt;
    /// 子栏目树形控件Json数据
    /// &lt;/summary&gt;
    /// &lt;param name="id"&gt;栏目id&lt;/param&gt;
    /// &lt;returns&gt;&lt;/returns&gt;
    [AdminAuthorize]
    public JsonResult ManageTreeChildrenJson(int id = 0)
    {
      categoryRsy = new CategoryRepository();
      var _children = categoryRsy.Children(id);
      List&lt;Tree&gt; _trees = new List&lt;Tree&gt;(_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";
}


&lt;div class="workspace"&gt;
  &lt;div class="inside"&gt;
    &lt;div class="notebar"&gt;
      &lt;img alt="" src="~/Skins/Default/Manage/Images/Category.gif" /&gt;添加栏目
    &lt;/div&gt;
    @using (Html.BeginForm())
    {
      @Html.ValidationSummary(true)

      &lt;fieldset&gt;
        &lt;legend&gt;栏目&lt;/legend&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Type)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.DropDownList("Type")
              @Html.ValidationMessageFor(model =&gt; model.Type)
              @Html.DisplayDescriptionFor(model =&gt; model.Type)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Name)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Name)
              @Html.ValidationMessageFor(model =&gt; model.Name)
              @Html.DisplayDescriptionFor(model =&gt; model.Name)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ParentId)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.TextBox("ParentId", 0, new { @class = "easyui-combotree", data_options = "url:'" + Url.Action("JsonTreeParent", "Category") + "'" })
              @Html.ValidationMessageFor(model =&gt; model.ParentId)
              @Html.DisplayDescriptionFor(model =&gt; model.ParentId)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="li_model"&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Model)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.DropDownList("Model")
              @Html.ValidationMessageFor(model =&gt; model.Model)
              @Html.DisplayDescriptionFor(model =&gt; model.Model)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="li_categoryview"&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.CategoryView)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.CategoryView)
              @Html.ValidationMessageFor(model =&gt; model.CategoryView)
              @Html.DisplayDescriptionFor(model =&gt; model.CategoryView)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="li_contentview"&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ContentView)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ContentView)
              @Html.ValidationMessageFor(model =&gt; model.ContentView)
              @Html.DisplayDescriptionFor(model =&gt; model.ContentView)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="li_nav"&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Navigation)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Navigation)
              @Html.ValidationMessageFor(model =&gt; model.Navigation)
              @Html.DisplayDescriptionFor(model =&gt; model.Navigation)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Order)
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Order, new { value = 0 })
              @Html.ValidationMessageFor(model =&gt; model.Order)
              @Html.DisplayDescriptionFor(model =&gt; model.Order)
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="editor-label"&gt;
            &lt;/div&gt;
            &lt;div class="editor-field"&gt;
              &lt;input type="submit" value="添加" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/fieldset&gt;
    }
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="left"&gt;
  &lt;div class="top"&gt;&lt;/div&gt;
    @Html.Action("ManagePartialTree", "Category")
&lt;/div&gt;
&lt;div class="split"&gt;&lt;/div&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
  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();
    }
  }
&lt;/script&gt;
@section Scripts {
  @Styles.Render("~/EasyUi/icon")
  @Scripts.Render("~/bundles/EasyUi")
  @Scripts.Render("~/bundles/jqueryval")
}

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

MVC4制作网站教程第四章 浏览栏目4.2 – ASP.NET笔记 – CFEI.NET-飞网

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

&lt;script type="text/javascript"&gt;
  using("tree", function () {
    $("#ctree").tree({
      onClick: function (node) {
        top.location ="@Url.Action("ManageDetails", "Category")/"+node.id;
      }
    });
  });
&lt;/script&gt;

完工。

好啦,今天飞哥就讲到这里,后续会有更多的精彩的内容,但愿今天的这篇文章能够帮助到同道中的你,也希望大家多多支持飞网。

今天就讲到这里。因为水平有限,难免有疏忽或者不准确的地方,如有错误地方,麻烦到飞网论坛反馈一下,我会及时改正。一切为了知识的分享。

再次感谢大家关注飞网。