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") }
添加一个单页类型节点,在添加一个链接类型节点看一下
点一下栏目树前的小箭头能够显示和关闭下级栏目。但点栏目名称没什么反应,我希望的是点栏目名称能够跳转到栏目详细信息页面~/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>
完工。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。