Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing, metronicbootstrap

Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing, metronicbootstrap

I have been writing a lot of things recently. I have stopped my blog for a long time. I will sort out my ideas and summarize my experiences with the Metronic-based Bootstrap development framework, at the same time, I also recorded my own learning and research on Bootstrap development. I hope to open a series of articles titled MVC4 + EasyUI-based Web Development Framework experience summary, gradually introduce the details of this responsive framework.

Bootstrap is a front-end technical framework that can be used by many platforms, such as JAVA/PHP /. NET can be used for front-end interfaces, and JQuery can be integrated to achieve a rich set of Interface Effects. Currently, many Bootstrap plug-ins can be provided for you to use, however, many Bootstrap-based introductions in China are still based on the teaching, introducing the basic knowledge and simple use of Bootstrap. This article hopes to base on the actual MVC project based on C, A comprehensive case study of the Bootstrap development framework is provided to explain the code and effects of the actual project, and strive to provide detailed and intuitive introduction to your experiences and experiences in this area.

1. Metronic-based Bootstrap development framework Overview

Metronic is a foreign Bootstrap development framework integration based on HTML, JS and other technologies. It integrates a lot of Bootstrap front-end technologies and plug-ins, and is a very good technical framework. Based on this, and my research on the MVC Web framework, this article integrates the MVC-based Bootstrap development framework so that it can meet the actual project structure needs.

The following is my overall project.

Start the content in the menu area and dynamically obtain it from the database. Some information is displayed on the top bar of the system, and users can quickly process personal data, such as viewing personal information, logging out, And locking screen, the content area mainly displays visualized data, which can be displayed through the tree list control and table control. Generally, data also needs to be added, deleted, modified, queried, and paged, therefore, various functions must be integrated. In addition to querying and displaying user data, operations such as import and export are also required, which are conventional data processing functions. After determining these rules and interface effects, we can use the code generation tool to quickly generate the interface effects of these Web projects.

2. Bootstrap development framework menu display

The entire framework involves a lot of content, including the use of various CSS features of conventional Bootstrap, menu Bar, Bootstrap icon management, system top bar, tree control JSTree, Portlet container, Modal dialog box, Tab control, drop-down list Select2, check box iCheck, multi-text editing control summernote, file and the fileinput, bootstrap-toastr, sweetalert, touchspin, and video-player controls for image uploading and display, these features are designed in a holistic solution. These excellent plug-ins can provide more powerful functions and rich interface experience for our framework.

This section continues to return to the starting part of the framework, processing and displaying the menu. For ease of management, menus are divided into three levels. The selected menus are differentiated from other menu styles, and menus can be folded to a minimum. The effect is as follows.

In Bootstrap, it is relatively easy to build a menu, mainly because UL and LI can be used to implement menu layout settings through style processing. The Code is as follows.

<Ul class = "page-sidebar-menu-hover-submenu" data-keep-expanded = "false" data-auto-scroll = "true" data- slide-speed = "200"> <li class = "start" id = "1"> <a href = "/Home/index"> <I class = "icon-home "> </I> <span class =" title "> homepage </span> <span class =" selected "> </span> <span class =" arrow open "> </span> </a> </li> <li id = "2"> <a href = "javascript :; "> <I class =" icon-basket "> </I> <span class =" title "> industry news </span> <span class =" selected "> </ span> <span class = "arrow open"> </span> </a> <ul class = "sub-menu"> <li class = "heading" style = "font -size: 14px; color: yellow "> <I class =" icon-home "> </I> industry news </li> <a href =" # "> <I class =" icon -home "> </I> <span class =" badge-danger "> 4 </span> Policies and Regulations </a> </li> <a href = "#"> <I class = "icon-basket"> </I> <span class = "badge-warning"> 4 </span> notice announcement </> </li> <a href = "#"> <I class = "icon-tag"> </I> <span class = "badge-success"> 4 </span> Dynamic Information </a> </li> </ul>

However, our general menu changes dynamically, that is, we need to obtain it from the database and set it to the front-end display. In this way, we need to output the menu content in the MVC controller, then it is bound to the front-end interface to realize the dynamic menu data, which is also the basic processing of permission control.

In the base class, we can get the menu data after the user logs on to the ViewBag object.

The specific code is as follows. First, determine whether the user logs in. If the user logs in, obtain the user's menu data, which is available in ViewBag.

/// <Summary> /// rewrite the parameters of the base class before the Action is executed /// </summary> /// <param name = "filterContext"> override method </param> protected override void OnActionExecuting (ActionExecutingContext filterContext) {base. onActionExecuting (filterContext); // obtain the user logon information CurrentUser = Session ["UserInfo"] as UserInfo; if (CurrentUser = null) {Response. redirect ("/Login/Index"); // if the user is empty, jump to the logon interface} else {// set the authorization attribute and assign it to ViewBag to save ConvertAuthorizedInfo (); ViewBag. authorizeKey = AuthorizeKey; // set ViewBag for logon information. fullName = CurrentUser. fullName; ViewBag. name = CurrentUser. name; ViewBag. menuString = GetMenuString (); // ViewBag. menuString = GetMenuStringCache (); // use cache, updated over time }}

The GetMenuString function is used to assemble menus. The menu information in the database is a tree structure, as shown below.

We can build part of the HTML code used in the interface based on the menu information of the database.

# Format template defined by region // javascript:; // {0 }? Tid = {1} var firstTemplate = @ "<li id = '{3}'> <a href = '{0}'> <I class = '{1}'> </I> <span class = 'title'> {2} </span> <span class = 'selected'> </span> <span class = 'arrow open'> </span> </a> "; var secondTemplate = @ "<li class = 'heading' style = 'font-size: 14px; color: yellow '> <I class =' {0} '> </I> {1} </li> "; var thirdTemplate = @ "<li id = '{3}'> <a href = '{0}'> <I class = '{1}'> </I> {2} </a> </li> "; var firstTemplateEnd = "</li>"; var secondTemplateStart = "<ul class = 'sub-menu '>"; var secondTemplateEnd = "</ul>"; # endregion

For example, a three-level menu can be generated by code.

// Level 3 icon = subNodeInfo. webIcon; // tid is the top-level category id, and sid is the third-level menu id tmpUrl = string. format ("{0} {1} tid = {2} & sid = {3}", subNodeInfo. url, GetUrlJoiner (subNodeInfo. url), info. ID, subNodeInfo. ID); url = (! String. IsNullOrEmpty (subNodeInfo. Url) & subNodeInfo. Url. Trim ()! = "#")? TmpUrl: "javascript:;"; sb = sb. AppendFormat (thirdTemplate, url, icon, subNodeInfo. Name, subNodeInfo. ID );

 

Of course, if you want to increase the concurrency, you can reduce the frequent menu retrieval and put this part of data into MemeryCache for processing as follows.

Public string GetMenuStringCache () {string itemValue = MemoryCacheHelper. getCacheItem <string> ("GetMenuStringCache", delegate () {return GetMenuString () ;}, null, DateTime. now. addMinutes (5) // expire in 5 minutes and get it again); return itemValue ;}

3. Use of layout pages

At the same time, to improve Page Reuse, we usually extract the content of the same part of each page and place it on the general layout page. In this way, outside the content area, the others are all inherited from the layout view page. Our dynamic menu is also part of the Layout View.

_ Layout. cshtml is the overall Layout view page of MVC Based on C. In this way, we can set the display content of the menu, the content of the home page, and the script.

The menu display code is as follows:

The Section displayed on the layout page is as follows.

Since Bootstrap generally puts the JS file to the final load, we need to put some content at the bottom of the page to load in addition to retaining some essential Jquery and other scripts on the layout page, in addition, we can use the MVC Bundles Technology for compression and integration for Script Loading. For more information about this technology, see my previous article titled MVC4 + EasyUI Web Development Framework experience (11)-use Bundles to simplify Page code.

In this way, after introducing the layout view page in the view of each sub-page, you only need to write the part of the personalized display content. The specific code is as follows.

 

Then, at the bottom of the page, you can include the required part of the script code. After the page is generated, it will be properly displayed based on the sequence block set on the layout page, in addition, all parts of the content are integrated.

4. Use of the page editing tool Sublime Text

Many of them are in the VS environment. However, when editing a view page, we usually use Sublime Text, a powerful editing tool, a wide range of plug-ins, and smart syntax prompts, it is a quick tool for editing view pages and is strongly recommended.

VS is generally used for file management, compilation, and other processing.

 

If you are interested, you can continue to refer to the series of articles:

Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing

Metronic-based Bootstrap development framework Experience Summary (2) -- list paging processing and use of the plug-in JSTree

Metronic-based Bootstrap development framework experience (3) -- Use of Select2 plug-in the drop-down list