Dynamically loading menus in MVC

Recently made a project, in the client dynamic display menu, that is, these menus are stored in the database, the client dynamically load the menu, the benefits of this is obvious, the menu is easy to modify, directly in the background to maintain, and will never directly in the previous view page to modify, but the shortcomings are also obvious, To achieve a certain degree of difficulty, if the menu, when the first load of the front page will be slow, I would like to talk about their experience in this area

First of all, we're going to create two tables, (actually a table is also possible, but that would be more complicated), a first-class classification table, a two-level classification table, and two tables with the following structure:

One is a class classification table, corresponding to the parent menu, one is a level two classification table, corresponding to the sub-menu

The implementation steps are as follows: Define a method to read all the first-level categories of the menu, (Note that the menu encoding (CHANNELNO) in the first Class category is unique), and then define a query out of the specified level number of the return type of all two-level dishes is the collection type

After writing the relevant data access layer, directly called in the controller can be, the key step is in the view, in the controller to define two key actions, one to get the first class classification, one to get the class two classification name, the action in my controller is written like this:

1///<summary>2///Get first class category name Help navigation list3///</summary>4///<returns></returns>5PublicActionResult GetAll ()6{7//First Class category name8var model =Channelservice.getall ();9Return Partialview ("/views/shared/_help.cshtml", model);10}111213///<summary>14///Level two classification name in the first level category Help navigation list15///</summary>16///<param name= "Chid" ></param>17///<returns></returns>18 public actionresult GetMenu (int Chid) 19  {20 /// class Two classification name 21 var model =  Partservice.getall (Chid); 22 return Partialview ( "/views/shared/_menu.cshtml" 23 24}        

The return is a partial view, in which the two-part view is so laid out

1@{2 Layout =Null;3}4 @model ienumerable<xftwl.common.channelmodel>567 <div id="Accordion1"class="accordion">8 <divclass="Accordion-top">9Ten @if (Model! =Null)11{1213foreach (VAR itemInchModel)14{15if (item. Id >0)16{<divclass="Accordion-group"><divclass="Accordion-heading"><aclass="Accordion-toggle"Href="#"Data-target="# @item. Id"Data-toggle="Collapse">@item. ChannelName</a></div><div id="@item. Id"class="Accordion-body collapse">23 @Html. Action (" help ", new {chid = item. Id}) 24 </div>25  </div>27 28 }< Span style= "color: #008080;" >29 }30 }31 32 </div>33                 

In the _menu.cshtml partial view, the view is so laid out

1@{2 Layout =Null;3}4 @model ienumerable<xftwl.common.partmodel>56 @if (Model! =Null)7{8foreach (var tInchModel)9{Ten <divclass="Accordion-inner Clearfix">11 <label class=field "><a href=" ,  "Help" , new {prtid=t . Id})  "Target= test< Span style= "color: #800000;" > "><strong>@t.partname</strong></a></label>12 </div > 13 }14}   

Finally, write this in the controller's Index view:

1 Viewbag.title ="Help Center";2 Layout ="~/views/shared/_layout.cshtml";3}4 @model ienumerable<xftwl.common.articlemodel>56 <!--main-->7 <divclass="Container Content-main-help">8 @* @Html. Partial ("_helpmeau")*@9@Html. Action ("GetAll","Help")<divclass="Help-text-right">12@if (Model! =Null)14{1516foreach (VAR itemInchModel)17{18<div style="Height:auto">20 21 <a href= " @Url. Action ( "Detail" ," , New{id=item. Id}) " > @item. Title</a>22 </div>23 24 }25 }26 27 </div>28 </div>29 30 <!--main End-->        

Where the loop traversal is to get the name of the first class classification, well, run it and see how it works.

This is what all the first-level menus look like after they are expanded. All right, let's get here today.

Dynamically loading menus in MVC