欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-05 21:57:04
序 一、用户 二、用户组 三、栏目 3.1添加栏目 3.2浏览栏目 浏览栏目这块做个一个树形列表,添加栏目的左侧部分只写了句“左侧列表”就是指这个树形列表,等我...

一、用户

二、用户组

三、栏目

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]

/// <summary>
    /// 子栏目树形控件json数据
    /// </summary>
    /// <param name="id">栏目id</param>
    /// <returns></returns>
    [adminauthorize]
    public jsonresult managetreechildrenjson(int id = 0)
    {
      categoryrsy = new categoryrepository();
      var _children = categoryrsy.children(id);
      list<tree> _trees = new list<tree>(_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";
}


<div class="workspace">
  <div class="inside">
    <div class="notebar">
      <img alt="" src="~/skins/default/manage/images/category.gif" />添加栏目
    </div>
    @using (html.beginform())
    {
      @html.validationsummary(true)

      <fieldset>
        <legend>栏目</legend>
        <ul>
          <li>
            <div class="editor-label">
              @html.labelfor(model => model.type)
            </div>
            <div class="editor-field">
              @html.dropdownlist("type")
              @html.validationmessagefor(model => model.type)
              @html.displaydescriptionfor(model => model.type)
            </div>
          </li>
          <li>
            <div class="editor-label">
              @html.labelfor(model => model.name)
            </div>
            <div class="editor-field">
              @html.editorfor(model => model.name)
              @html.validationmessagefor(model => model.name)
              @html.displaydescriptionfor(model => model.name)
            </div>
          </li>
          <li>
            <div class="editor-label">
              @html.labelfor(model => model.parentid)
            </div>
            <div class="editor-field">
              @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)
            </div>
          </li>
          <li id="li_model">
            <div class="editor-label">
              @html.labelfor(model => model.model)
            </div>
            <div class="editor-field">
              @html.dropdownlist("model")
              @html.validationmessagefor(model => model.model)
              @html.displaydescriptionfor(model => model.model)
            </div>
          </li>
          <li id="li_categoryview">
            <div class="editor-label">
              @html.labelfor(model => model.categoryview)
            </div>
            <div class="editor-field">
              @html.editorfor(model => model.categoryview)
              @html.validationmessagefor(model => model.categoryview)
              @html.displaydescriptionfor(model => model.categoryview)
            </div>
          </li>
          <li id="li_contentview">
            <div class="editor-label">
              @html.labelfor(model => model.contentview)
            </div>
            <div class="editor-field">
              @html.editorfor(model => model.contentview)
              @html.validationmessagefor(model => model.contentview)
              @html.displaydescriptionfor(model => model.contentview)
            </div>
          </li>
          <li id="li_nav">
            <div class="editor-label">
              @html.labelfor(model => model.navigation)
            </div>
            <div class="editor-field">
              @html.editorfor(model => model.navigation)
              @html.validationmessagefor(model => model.navigation)
              @html.displaydescriptionfor(model => model.navigation)
            </div>
          </li>
          <li>
            <div class="editor-label">
              @html.labelfor(model => model.order)
            </div>
            <div class="editor-field">
              @html.editorfor(model => model.order, new { value = 0 })
              @html.validationmessagefor(model => model.order)
              @html.displaydescriptionfor(model => model.order)
            </div>
          </li>
          <li>
            <div class="editor-label">
            </div>
            <div class="editor-field">
              <input type="submit" value="添加" />
            </div>
          </li>
        </ul>
      </fieldset>
    }
  </div>
</div>
<div class="left">
  <div class="top"></div>
    @html.action("managepartialtree", "category")
</div>
<div class="split"></div>
<div class="clear"></div>
<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>
@section scripts {
  @styles.render("~/easyui/icon")
  @scripts.render("~/bundles/easyui")
  @scripts.render("~/bundles/jqueryval")
}

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

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

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

<script type="text/javascript">
  using("tree", function () {
    $("#ctree").tree({
      onclick: function (node) {
        top.location ="@url.action("managedetails", "category")/"+node.id;
      }
    });
  });
</script>

完工。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。