Mvc+easyui-based Web development Framework Experience Summary (3)-building menu data using JSON entity classes

Spent a lot of time in refactoring and further refining my web development framework, and strive to in the user experience and interface design, and WinForm development framework consistent, and on the web, I mainly use the Easyui front-end Interface processing technology, take the MVC technology route, in the reconstruction process, Many details spend a lot of time on research and refining, step by step, but also accumulated a lot of experience, this series will mainly introduce me to further improve my web framework based on the accumulated experience to share, this essay mainly describes how to use the JSON entity class to build the menu data, and then use in the main interface.

The menu interface effect is as follows, the menu is divided into one-level menu, two-level menu, three-level menu, they are different in the location of the definition, the interface layout that the level three menu is the smallest menu node, that is, the leaf node.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201404/162307402441348.png "style=" border:0px; "/>

To implement the above menu, you need to define the menu as the relevant JSON data, and then add them to the interface through the script, the following data and script is to define the relevant menu data.

<script type= "Text/javascript" >var _menus = {"Default":  [{"MenuID":  "1",   "icon":  "Icon-computer",  "Menuname":  "Rights Management", "Menus": [  {  "MenuID":   ", " menuname ": " User Management ", " icon ": " Icon-user ", " url ": "/user/index "&NBSP;} ,  {  "MenuID":  ", " Menuname ": " organization Management ", " icon ": " Icon-organ ",  "url":  "/ou/index"  },  {  "MenuID":  ", " Menuname ": " Role Management ", " Icon ": " Icon-group-key ", " url ": "/role/index " },  { " MenuID ": " 16 ",   "Menuname":  "feature Management",  "icon":  "Icon-key",  "url":  "/function/index"  },   {  "MenuID":  ", " menuname ": " Log In ", " icon ": " Icon-view ", " url ":   "/loginlog/index"  }]},   {    "MenuID":  "2",  "icon":  " Icon-user ", " menuname": " Other Management ",   " menus ": [{ " MenuID ": " ", " Menuname ": " Change Password ",   "icon":  "Icon-lock",  "url":  "Javascript:showpassworddialog ()" &NBSP;}&NBSP;&NBSP;&NBSP;] &NBSP;&NBSP;&NBSP}], "point":  [{"MenuID":  "3",  "icon":  "Icon-computer",  "menuname":   "Transaction Center", "menus": [  {  "MenuID":  "All",  "Menuname":  "Test Menu 1",  "icon" :  "Icon-user",  "url":  ". /commonpage/building.htm " },  { " MenuID ": ",  "menuname":  "Test Menu 2",  " Icon ": " Icon-organ ", " url ": ". /commonpage/building.htm " },  { " MenuID ": " ", " Menuname ": " Test Menu 3 ", " Icon ": " Icon-group-key ", " url ": ". /commonpage/building.htm " },  { " MenuID ": ",  "menuname":  "Test Menu 4",  " Icon ": " Icon-key ", " url ": ". /commonpage/building.htm " }]},{" MenuID ": " 4 ", &nbsP; " Icon ": " Icon-user ", " Menuname ": " other menu "," Menus ": [{ " MenuID ": ",  " Menuname ": " Test Menu 5 ", " icon ": " Icon-lock ", " url ": ". /commonpage/building.htm " }]}]};function showsubmenu (url, title, menucategory,  DefaultIcon)  {if  (defaulticon == null | |  defaultIcon ==  "")  {defaultIcon =  "icon-table";} AddTab (title, url,  "icon "  + defaulticon); Clearnav ();if  (menucategory !=  "")  {addnav (_menus[menucategory]);}} </script>

From the above menu JSON data, it is a dictionary of JSON data list, in the Web interface, through the following code can expand the above JSON-defined level two menu.

<li><a href= "#" onclick= "Showsubmenu ('/user/index ', ' User management ', ' Default ') > Rights Management </a></li>

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201404/171714190257186.png "style=" border:0px; "/>

Although the above definition of the data can solve the menu display problem, but for we need dynamic control of the menu, obviously do not, so we need to put the above JSON data through the menu controller dynamic generation can be, and then in the script in the way of jquery to get the JSON data, as shown below.

var _menus = {};//sync gets $.ajax ({type: ' Get ', url: '/menu/getmenudata?r= ' + math.random (), async:false,//sync datatype: ' JSON ') , Success:function (JSON) {_menus = Json;},error:function (xhr, status, error) {alert ("Operation failed");//xhr.responsetext}});

The Getmenudata method above is dynamically generated by the controller in the background, and its code is shown below

 <summary>///  Get tree Display data/// </summary>/// <returns></returns> Public actionresult getmenudata () {String json = gettreejson ("-1",  "",  ""); Json = json. Trim (', '); Return content (String. Format ("[{0}]",  json);}  <summary>///  recursive acquisition of tree-shaped information/// </summary>/// <returns></returns> Private string gettreejson (String pid, string foldericon, string leaficon) { String condition = string. Format ("Pid= ' {0} '  ",  pid); List<menuinfo> nodelist = bllfactory<menu>. Instance.find (condition); Stringbuilder content = new stringbuilder ();foreach  (MenuInfo model in  nodelist) {string parentid =  (model. pid ==  "-1"  ?  "0"  : model. PID); String submenu = this. Gettreejson (model.id, foldericon, leaficon); string parentmenu = string. Format ("{{ \" id\ ": \" {0}\ ",  \" pid\ ": \" {1}\ ",  \" name\ ": \" {2}\ " ", model.id,  Parentid, model. Name);if  (string. IsNullOrEmpty (submenu)) {if  (!string. IsNullOrEmpty (Leaficon)) {parentmenu += string. Format (", \" icon\ ": \" {0}\ "&NBSP;}},",  leaficon);} else{parentmenu +=  "},";}} else{if  (!string. IsNullOrEmpty (Foldericon)) {parentmenu += string. Format (", \" icon\ ": \" {0}\ "&NBSP;}},",  foldericon);} else{parentmenu +=  "},";}} Content. Appendline (Parentmenu.trim ()); content. Appendline (Submenu.trim ());} Return content. ToString (). Trim ();}

However, for the above code, I think that although it can solve the problem, can correctly generate the relevant JSON code, but not feeling elegant, I do not like to use the patchwork method to build data.

Before looking at the JSON script of menu, I said that he is a dictionary type of JSON data format, then we can use the dictionary and entity information to carry, and then directly through the Tojson method come out? The answer is yes.

 <summary>///  Get the menu tree display data/// </summary>/// <returns></returns> Public actionresult getmenudata () {dictionary<string, list<menudata>> dict  = new Dictionary<string, List<MenuData>> (); list<menuinfo>  List = bllfactory<menu>. Instance.gettopmenu (Myconstants.systemtype);int i = 0;foreach  (MenuInfo info in  list) {if  (! Hasfunction (info. FunctionId)) {continue;}               List<MenuData>  Treelist = new list<menudata> (); List<menunodeinfo> nodelist = bllfactory<menu>. Instance.gettreebyid (info.id);foreach  (menunodeinfo nodeinfo in nodelist) {if  (! Hasfunction (Nodeinfo.functionid)) {continue;}                                                                                                                                                                                menudata menudata = new menudata ( Nodeinfo.id, nodeinfo.Name, string. IsNullOrEmpty (Nodeinfo.webicon)  ?  "Icon-computer"  : nodeinfo.webicon);foreach  ( Menunodeinfo subnodeinfo in nodeinfo.children) {if  (! Hasfunction (Subnodeinfo.functionid)) {continue;} String icon = string. IsNullOrEmpty (Subnodeinfo.webicon)  ?  "Icon-organ"  : subnodeinfo.webicon;menudata.menus.add (New menudata (Subnodeinfo.id, subnodeinfo.name, icon, subnodeinfo.url));} Treelist.add (menudata);} Add to Dictionary, if first, default name string dictname =  (i++ == 0)  ?  "Default"   :  info.id;dict. ADD (dictname, treelist);} String content = tojson (dict); return content (content. Trim (', '));}

The above code, through the Menudata object data, to host the relevant menu information, and then add it to the dictionary dictionary<string, list<menudata>> dict inside can, such code, Not so much to put together the feeling, is not very good-looking? Convert the object to JSON data, directly through the Tojson can be solved, very simple.

and the menu permission control, is through the collection permission management to judge, the parent menu if does not have the permission, directly skips, does not continue to generate the following sub-menu, the permission judgment is as follows.

if (! Hasfunction (info. FunctionId)) {continue;}

Of course, in the interface to expand the two-level menu interface, should also be generated dynamically through the script, so as to achieve the dynamic construction of all content.

<ul class= "navigation" style= "Display:block" > @Html. Raw (@ViewBag. Headerscript) </ul>

The above uses the ViewBag object to pass the script content to the interface, actually generates the operation in the background, is the line HTML code is, the code resembles the following content.

<li><a href= "#" onclick= "Showsubmenu ('/user/index ', ' User management ', ' Default ') > Rights Management </a></li>

The final effect is that the blog began to introduce the interface, there is no change, but the code we have been a few steps to optimize the finishing, looks very refreshing, more able to achieve dynamic changes.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201404/162307402441348.png "style=" border:0px; "/>

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828935

Mvc+easyui-based Web development Framework Experience Summary (3)-building menu data using JSON entity classes