Chapter 4 of the mvc44 website creation tutorial section 4.2, mvc44.2

Chapter 4 of the mvc44 website creation tutorial section 4.2, mvc44.2

Collation

I. Users

Ii. User Group

Iii. Topic

3.1 Add a topic

3.2 browse topic

Browse the topic to create a tree list. The left part of the added topic only writes the "Left list", which refers to the tree list. You can simply replace it after writing it.

First, add [ManagePartialTree] action in [CategoryController]. The Partial here is used to describe the Division view.

/// <Summary> /// partial Tree View of the column list /// </summary> /// <returns> </returns> [AdminAuthorize] public ActionResult ManagePartialTree () {return View ();}

Right-click to add the branch view ManagePartialTree. cshtml. In the Division view, the easyui tree is used to display columns and asynchronously load columns. The view code has only one line.

Copy codeThe Code is as follows: <ul id = "ctree" class = "easyui-tree" data-options = "url: '@ Url. action ("ManageTreeChildrenJson", "Category") '"> </ul>
Json data obtained from [anageTreeChildrenJson] action.

Add [anageTreeChildrenJson] of the JsonResult type in [CategoryController]

/// <Summary> /// Json data of the subtopic tree control /// </summary> /// <param name = "id"> topic 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 );}

In this example, id = 0 by default. Find the subtopic Based on the id, and traverse the subtopic to generate the node data of the tree.

Switch (c. Type) is used to set the node status and different icons based on different column types. Return in Json format.

Modify the view ManageAdd. cshtml of the column added in the previous section and replace the list on the left with @ Html. Action ("ManagePartialTree", "Category "). ManageAdd. cshtml after replacement

@ Model Ninesky. Models. Category @ {ViewBag. Title = "ManageAdd"; Layout = "~ /Views/Layout/_ Manage. cshtml ";}< div class =" workspace "> <div class =" inside "> <div class =" notebar ">  Add a column </div> @ using (Html. beginForm () {@ Html. validationSummary (true) <fieldset> <legend> topic </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> <div c Lass = "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> <div class = "editor-label"> @ Html. labelFor (model => model. parentId) </div> <div class = "editor-field"> @ Html. textBox ("ParentId", 0, new {@ class = "easyui-comb Otree ", 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 = "edi Tor-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> <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> <div class = "editor-label"> </div> <div class = "editor-field"> <input type =" submit "value =" add "/> </div> </li> </ul> </fieldset >}</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 () ;}); functi On 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_na V "). show () ;}</script> @ section Scripts {@ Styles. Render ("~ /EasyUi/icon ") @ Scripts. Render ("~ /Bundles/EasyUi ") @ Scripts. Render ("~ /Bundles/jqueryval ")}

Add a single-page node. Let's take a look at adding a link-type node.

Click the arrow in front of the column tree to show and close the lower-level column. However, the topic name does not respond. I hope that the topic name will jump to the topic details page ~ /Category/ManageDetails/id, which is implemented in js. Open ManagePartialTree. cshtml and add the script below.

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

Finished.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.