Experience summary of Bootstrap development framework based on Metronic (11)--Several rendering methods of page menu

In the normal background management system or the front-end interface, there is usually a navigation menu available to the user, easy to select the desired content. The bootstrap development framework based on metronic is the integration of the Metroinc style, as well as the contents of the Boostrap component module, so the menu effect is naturally and bootstrap same strain. Based on several menu styles used frequently, this article has carried on the related introduction and the demonstration.

1, menu display of three ways

Menu display can be made into a variety of effects, this article is only a targeted introduction of the three of them, two left vertical menu, one is horizontal horizontally placed menu.

Style 1:

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715112937701-545970898.png " Style= "border:0px;"/>

The menu shrinks after the interface as shown below.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715112947107-1707862502.png " Style= "border:0px;"/>

Style 2:

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715110307561-772269852.png " Style= "border:0px;"/>

Style 3:

The horizontal Style menu is as follows:

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715110704795-270261418.png " Style= "border:0px;"/>

2. How to organize several layouts

Because of these layouts, the content of their frame layout pages (that is, the layout page) is different, and in general we can define it as a layout page, so that it can be included when it is actually used.

I have defined several different layout pages according to the above styles, as shown below

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715111037295-1976793914.png " Style= "border:0px;"/>

In general, we generate a view page that prompts us to select a different view layout page, and the corresponding layout page will be applied at the top of the page after confirmation.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715111512951-1984663201.png " Style= "border:0px;"/>

If we need to dynamically specify the layout of the page, we can use a variable to handle it, as shown in the following code.

@{Layout = configdata.viewlayoutfile;//"~/views/shared/_layout.cshtml"; Viewbag.title = "Role Information";}

In fact, our General page layout is OK, it is relatively less change, so in order not to break the layout of the generated page, we can put the previous processing of the LAYOUT1/2/3 and so on to the layout page to deal with.

However, it is necessary to specify different resources depending on the layout page.

The resources we add to the style are as follows.

Start global required style reference css_metronic. Include ("~/content/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css",    "~/ Content/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css ",   " ~/ Content/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css ",   " ~/Content/metronic/ Assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css ",  &nbsp, .................    //Theme Global Style     "~/content/metronic/assets/global/css/components-rounded.css",     "~/content/metronic/assets/global/css/plugins.min.css",//Theme layout style     "~/content/ metronic/assets/layouts/" + Layout + "/css/layout.css ",   " ~/content/ metronic/assets/layouts/" + Layout + "/css/themes/default.min.css ",   " ~/ content/metronic/assets/layouts/" + Layout + "/css/custom.min.css "   );

The red layout above is a variable that we get based on different layout pages, which allows the styles and scripts of different layout pages to be introduced smoothly.

    /// <summary>    ///  Some common variables defined by the system      /// </summary>    public class ConfigData     {        /// <summary>         /// web the system type definition that the development framework belongs to         /// </ summary>        public const string systemtype  =  "Waremis";        /// <summary>         ///  Configure a view's style layout         /// </ Summary>        public static layouttype layout  = LayoutType.Layout2;    }    /// <summary>     /// Layout Style Enumeration     /// </summary>    public enum  layouttype    {        layout,         Layout2,        Layout3     }

3, the dynamic creation of the menu

In order to achieve the dynamic menu generation, we need to understand the menu structure of these several ways, and then we can build the data structure according to their characteristics.

The first and second layout of the menu structure data is the same, and their contents are as follows.

<ul class= "Page-sidebar-menu page-header-fixed" data-keep-expanded= "false" data-auto-scroll= "true" data-slide-speed= "><li class=" nav-item start "id=" 1 "><a href="/home/index?tid=1 "class=" Nav-link Nav-toggle "><i class=" icon-home "></i><span class=" title "> Home </span><span class=" Selected "></span><span class=" Arrow open ></span></a></li> @Html. Raw (@ viewbag.menustring) </ul>

We can generate it from the background:@Html. Raw (@ViewBag. menustring)

Then the output of the interface can be.

Let's take a look at the structure of the first two menus, the simple structure is as follows

<li class= "nav-item start" id= "1" ><a href= "/home/index?tid=1" class= "Nav-link nav-toggle" ><i class= " Icon-home "></i><span class=" title "> Home </span><span class=" selected "></span>< Span class= "Arrow Open" ></span></a></li>

If there is a submenu, then the structure of the level two menu is as follows.

<li class= "nav-item "  id= "3" ><a href= " javascript:; "  class= "Nav-link nav-toggle" ><i class= "Icon-rocket" ></i><span class= " Title "> Customer Management </span><span class=" arrow "></span></a><ul class=" sub-menu " ><li class= "nav-item "  id= "><a href=" second?tid=3&sid=31 "><i"  class= "Glyphicon glyphicon-th-list" ></i><span class= "title" > Customer Management </span> </a></li><li class= "nav-item  "  id= "><a href=" second?tid=3 &sid=32 "><i class=" Icon-basket "></i><span class=" badge badge-roundless  badge-danger ">new</span><span class=" title > Customer Contact </span></a></li> </ul></li> 

If the structure of the level three menu is as follows:

<li class= "Nav-item active open"  id= "2" ><a href= "javascript:;"  class= "Nav-link nav-toggle" ><i class= "Icon-basket" ></i><span class= " Title "> Industry dynamic </span><span class=" selected "></span><span class=" Arrow open "></span></a><ul class=" sub-menu "><li class=" nav-item  active  open " id=" "><a href=" javascript:;  class= "Nav-link nav-toggle" ><i class= "Icon-home" ></i><span class= "title "> Industry Dynamics </span><span class=" Arrow "></span><span class=" Selected "></span ></a><ul class= "sub-menu" ><li class= "Nav-item  active open"  id = "211" ><a href= "second?tid=2&sid=21&ssid=211" ><i class= "Icon-home" ></i> <span class= "Badge badge-danger" >4</span><span class= "tItle "> Policies and Regulations </span></a></li><li class=" nav-item  " id=" 212 "><a  href= "second?tid=2&sid=21&ssid=212" ><i class= "Icon-basket" ></i><span class = "Badge badge-warning" >4</span><span class= "title" > Notice Announcement </span></a></li ></ul></li></ul></li>

Based on these, we can dynamically output the menu structure in the background.

For example, in the base class controller, the output of the menu content is realized by judging the processing of the view.

<summary>///Heavy-duty view display interface for easy placement of some regular viewbag variables. If placed in onactionexecuting, it will cause any request to execute once, resulting in multiple executions and reduced response efficiency//</summary>protected override ViewResult View ( String ViewName, String Mastername, object model) {//Login information uniformly set if (CurrentUser! = null) {Viewbag.fullname = Currentuser.fullname; Viewbag.name = Currentuser.name;//viewbag.menustring = Getmenustring (); viewbag.menustring = Getmenustringcache (); Use the cache to update}return base over time. View (ViewName, mastername, model);}

In order to improve the response of the menu, to avoid time-consuming multiple recursion, we can put the generated menu content into the cache, through the key value to implement processing.

<summary>///Cache processing of menu data using distributed cache//</summary>///<returns></returns>public string Getmenustringcache () {String itemvalue = memorycachehelper.getcacheitem<string> ("getmenustringcache_" + Currentuser.id, delegate () {return getmenustring ();},null, DateTime.Now.AddMinutes (5)//5 minutes expires, re-acquired); return Itemvalue;}

For horizontal menu processing, the two are different from the previous.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715152614826-1641308427.png " Style= "border:0px;"/>

If the two level menu data is shown below.

<li class= "menu-dropdown classic-menu-dropdown " > <a href= "index.html"  class= "nav-link  " ><i class= "Icon-bar-chart" ></i > default<span class= "Arrow" ></span></a></li><li class= " Menu-dropdown classic-menu-dropdown active "><a href=" javascript:; "  class= "nav-link nav-toggle " ><i class= "Icon-basket" ></i> dashboard <span class= "Arrow" ></span></a><ul class= "Dropdown-menu pull-left" >< li class= " active" ><a href= "index.html"  class= "nav-link  active" ><i  class= "Icon-bar-chart" ></i>dashboard<span class= "Arrow" ></span></a></ Li></ul></li> 

<li class= "menu-dropdown classic-menu-dropdown " ><a href= "javascript:;"  class= "nav-link nav-toggle " ><i class= "Icon-briefcase" ></i> Pages< Span class= "Arrow" ></span></a><ul class= "Dropdown-menu pull-left" ><li  class= "dropdown-submenu " ><a href= "javascript:;"  class= "nav-link nav-toggle " ><i class= "Icon-basket" ></i> ecommerce <span class= "Arrow" ></span></a><ul class= "Dropdown-menu" ><li class= "   "><a href=" ecommerce_index.html " class=" nav-link  "><i class=" Icon-home " ></i> dashboard</a></li><li class= " " ><a href= "Ecommerce_ Orders.html " class=" nav-link  "><i class=" Icon-basket "></i> Orders</a> </li></ul></li><li class= "Dropdown-submenu"><a href= "javascript:;"  class= "Nav-link nav-toggle" ><i class= "Icon-notebook" ></i> login<span  class= "Arrow" ></span></a><ul class= "Dropdown-menu pull-left" ><li  class= "" ><a href= "page_user_login_1.html"  class= "nav-link "  target= "_blank" >  login page 1 </a></li><li class= "" ><a href= "Page_user_ Login_2.html " class=" nav-link  " target=" _blank "> Login Page 2 </a> </li></ul></li></ul></li>

All we need to do is to put the menu data in our database and dynamically construct this progressive type data structure.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160715152918920-1905774197.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/1828743

Experience summary of Bootstrap development framework based on Metronic (11)--Several rendering methods of page menu