MVC4 Making Web Tutorials Fourth Chapter 4.2_ practical skills of browsing columns

Order

First, users

Second, the user group

Third, column

3.1 Add columns

3.2 Browse Columns

Browse the column to make a tree-like list, add the left part of the column only wrote the sentence "left list" refers to this tree-shaped list, and so we finish the replacement can be.

First in the "Categorycontroller" inside add [Managepartialtree]action, where the partial to explain is a partial view

<summary>
    ///Column list local tree view
    ///</summary>
    ///<returns></returns>
    [ Adminauthorize] public
    actionresult managepartialtree ()
    {return
      View ();
    }

Right-click to add partial View managepartialtree.cshtml. The partial view uses Easyui tree to display columns, using asynchronous loading, with only one line of view code.

Copy Code code as follows:

<ul id= "Ctree" class= easyui-tree "data-options=" url: ' @Url. Action ("Managetreechildrenjson", "Category") ' "> </ul>

Here is the JSON data obtained from [Anagetreechildrenjson]action].

Add Jsonresult Type [Anagetreechildrenjson] to "Categorycontroller"

<summary>///subtree Control JSON data///</summary>///<param name= "id" > Column 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); }

Here the default id=0, according to the ID lookup sub column, and then traversing the child columns to generate tree node data.

Switch (C.type) is based on the column type, to set the node state and to set different icons. Finally, the JSON type returns.

Modify the view manageadd.cshtml of the column added in the previous section to replace the left list with @html.action ("Managepartialtree", "Category"). After replacement manageadd.cshtml

@model Ninesky.Models.Category @{viewbag.title = "Manageadd";
Layout = "~/views/layout/_manage.cshtml"; } <div class= "Workspace" > <div class= "Inside" > <div class= "Notebar" >  Add columns </div> @using (Html.BeginForm ()) {@Html. Vali Dationsummary (True) <fieldset> <legend> columns </legend> <ul> <li&gt
            ; <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= "edi Tor-label "> @Html labelfor (model => model. Model) </div> <div class= "Editor-field" > @Html. DropDownList ("model") @Html. Validationmessagefor (Model => mode L.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 =& Gt 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 =&G T Model.
    Contentview)          @Html. Validationmessagefor (model => model. Contentview) @Html. Displaydescriptionfor (model => model. Contentview) </div> </li> <li id= "Li_nav" > <div class= "Ed Itor-label "> @Html labelfor (model => model. Navigation) </div> <div class= "Editor-field" > @Html. Editorfor (Model =&gt ; Model. Navigation) @Html. VALIDATIONMESSAGEFOR (model => model. Navigation) @Html. DISPLAYDESCRIPTIONFOR (model => model. Navigation) </div> </li> <li> <div class= "Editor-label" &G
              T @Html. Labelfor (model => model. Order) </div> <div class= "Editor-field" > @Html. Editorfor (Model => MoD El. 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= "Add"/> </div> </li> </ul> </fieldset>} </div> </div&
Gt <div class= "Left" > <div class= "Top" ></div> @Html. Action ("Managepartialtree", "Category") </div&
Gt
  <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") @Script

 S.render ("~/bundles/jqueryval")}

Add a single page type node, add a link type node to look at

Click the small arrow in front of the column tree to display and close the subordinate columns. But the point column name does not respond, I hope is the point column name can jump to the column detail information page ~/CATEGORY/MANAGEDETAILS/ID, now uses the JS to realize. 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>

Completed.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.