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

Recently 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 to maintain consistency, while on the web, I mainly use 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.

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"}, {"MenuID": "+", "Menuname": "Organization Management", "icon": "Icon-organ", "url": "/ou/index"}, {"MenuID": "", "" Menuname ":" Role Management "," icon ":" Icon-group-key "," url ":"/role/index "}, {"MenuID": "+", "Menuname": "Feature Management", "icon": "Icon-key", "url": "/function/index"}, {"MenuID": "+", "menuname": "Login Log", "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 ()"}]}], "point": [{"MenuID": "3", "icon": "Icon-computer", "Menuname": "Transaction Center", "Menus": [{"MenuID": "$", "menuname": "Test Menu 1", "icon": "Icon-user", "url": "). /commonpage/building.htm "}, {"MenuID": "The", "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", "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><href= "#" onclick= "showsubmenu ('/user/index ', ' User management ', ' Default ')"> Rights Management </a></li>           

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 = {};            // synchronize get  $.ajax ({ Type: ' GET ' 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>PublicActionResult Getmenudata () {String json = Gettreejson ("-1","",""); JSON = JSON. Trim (‘,‘);Return Content (String. Format ("[{0}]", JSON)); }///<summary>///Get Tree information recursively///</summary>///<returns></returns>PrivateString Gettreejson (String PID,String Foldericon,StringLeaficon) {String condition =String. Format ("Pid= ' {0} '", PID); list<menuinfo> nodeList = bllfactory<menu>. Instance.find (condition); StringBuilder content =NewStringBuilder ();foreach (Menuinfo modelInchNodeList) {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}\"}},", Leaficon); }Else{Parentmenu + ="},"else {if (!stringstring. Format (,\" icon\ ": \" {0}\ "}},  "else" Span style= "color: #800000;" >}, "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 tree display data for a menu///</summary>///<returns></returns>PublicActionResult 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 infoInchList) {if (!Hasfunction (info. FunctionId)) {Continue; } list<menudata> treelist =New list<menudata>(); list<menunodeinfo> nodeList = bllfactory<menu>. Instance.gettreebyid (info.id);foreach (Menunodeinfo nodeinfoInchNodeList) {if (!Hasfunction (Nodeinfo.functionid)) {Continue; } Menudata Menudata =New Menudata (Nodeinfo.id, Nodeinfo.name,String. IsNullOrEmpty (Nodeinfo.webicon)?"Icon-computer": Nodeinfo.webicon);foreach (Menunodeinfo subnodeinfoInchNodeinfo.children) {if (!Hasfunction (Subnodeinfo.functionid)) {Continue; }string icon =String. IsNullOrEmpty (Subnodeinfo.webicon)?"Icon-organ"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.

        <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><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.

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