How to develop browsing columns in MVC4 production website

Today, I will talk to you about how to browse the columns in the MVC4 production website, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Order

I. users

II. User groups

III. Columns

3.1 add columns

3.2 browse the column

Browse the column to make a tree list, add the left part of the column to write only the sentence "left list" refers to the tree list, when we finish writing and replace it.

First add [ManagePartialTree] action to [CategoryController]. The Partial here is used to indicate that it is a partial view.

/ / column list partial tree view / [AdminAuthorize] public ActionResult ManagePartialTree () {return View ();}

Right-click to add a partial view ManagePartialTree.cshtml. In the partial view, the tree of easyui is used to display the column, and asynchronous loading is used. The view code is only one line.

The copy code is as follows:

Here is the json data obtained from [anageTreeChildrenJson] action.

Add [anageTreeChildrenJson] of type JsonResult to [CategoryController]

/ Sub-column Tree Control Json data / column id / [AdminAuthorize] public JsonResult ManageTreeChildrenJson (int id = 0) {categoryRsy = new CategoryRepository (); var _ children = categoryRsy.Children (id); List _ trees = new List (_ 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);}

By default here id=0, look up the sub-column according to id, and then traverse the node data of the spanning tree in the sub-column.

Switch (c.Type) is to set the node status and set different icons according to the column type. Finally, it is returned as a Json type.

Modify the view ManageAdd.cshtml that added the column 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";}

Add column @ using (Html.BeginForm ()) {@ Html.ValidationSummary (true) column @ Html.LabelFor (model = > model.Type) @ Html.DropDownList ("Type") @ Html.ValidationMessageFor (model = > model.Type) Html.DisplayDescriptionFor (model = > model.Type) @ Html.LabelFor (model = > model.Name) @ Html.EditorFor (model = > model.Name) @ Html.ValidationMessageFor (model = > model.Name) @ Html.DisplayDescriptionFor (model = > model. Name) @ Html.LabelFor (model = > model.ParentId) @ 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) @ Html.LabelFor (model = > model.Model) @ Html.DropDownList ("Model") Html.ValidationMessageFor (model = > model.Model) @ Html.DisplayDescriptionFor (model = > model.Model) @ Html.LabelFor (model = > model.CategoryView) @ Html.EditorFor (model = > model.CategoryView) @ Html.ValidationMessageFor (model = > model.CategoryView) Html.DisplayDescriptionFor (model = > model.CategoryView) @ Html.LabelFor (model = > model.ContentView) @ Html.EditorFor (model = > model.ContentView) @ Html.ValidationMessageFor (model = > model.ContentView) @ Html.DisplayDescriptionFor (model = > Model.ContentView) @ Html.LabelFor (model = > model.Navigation) @ Html.EditorFor (model = > model.Navigation) @ Html.ValidationMessageFor (model = > model.Navigation) @ Html.DisplayDescriptionFor (model = > model.Navigation) @ Html.LabelFor (model = > model.Order) @ Html.EditorFor (model = > model.Order) New {value = 0}) @ Html.ValidationMessageFor (model = > model.Order) @ Html.DisplayDescriptionFor (model = > model.Order) @ Html.Action ("ManagePartialTree", "Category") 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 ();} @ section Scripts {@ Styles.Render ("~ / EasyUi/icon") @ Scripts.Render ("~ / bundles/EasyUi") @ Scripts.Render ("~ / bundles/jqueryval")}

Add a single page type node and take a look at adding a link type node

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. What I hope is that the point column name can jump to the column details page ~ / Category/ManageDetails/id, which is now implemented in js. Open ManagePartialTree.cshtml and add the script below.

Using ("tree", function () {$("# ctree") .tree ({onClick: function (node) {top.location = "@ Url.Action (" ManageDetails "," Category ") /" + node.id;}});})

It's done.

After reading the above content, do you have any further understanding of how to browse the column in the MVC4 production website? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.