Summary of "One" Frame Overview and Menu module processing _javascript skills based on the experience of Bootstrap metronic development framework

What do you know about the bootstrap framework knowledge?

Bootstrap is a front-end technical framework, many platforms can be used, java/php/. NET can be used to do the front-end interface, integrated jquery can achieve a very rich interface effect, there are many bootstrap plug-ins can be provided for everyone to use, but in the domestic many based on the introduction of bootstrap or stay on the basis of teaching, This paper introduces the basic knowledge and the simple use of bootstrap. This article hopes to base on the MVC actual project based on C #, the bootstrap development framework carries on the comprehensive case introduction, the actual project code and the effect screenshot carries on the explanation, seeks the thorough, the intuition to introduce this aspect experience and the lesson.

1. Overview of bootstrap development framework based on Metronic

Metronic is a foreign based on HTML, JS and other technology bootstrap development framework integration, the integration of a lot of bootstrap front-end technology and plug-in use, is a very good technical framework. This paper, based on this, combines my research on MVC's web framework to integrate the bootstrap development framework based on MVC to meet the actual project needs of the real project.

The following is the overall effect of my project.

Start the contents of the menu area, dynamic from the database to get, the system top bar to put some information display, as well as provide users of personal data processing, such as viewing personal information, cancellation, lock screen and other operations, the content area is mainly visual display of data, can be displayed through the Tree list control, table control, The general data also has the need for additional deletions and paging, so it is necessary to integrate the processing of various functions. In addition, the user's data, in addition to the query display, but also need to import, export and other related operations, these are the conventional data processing functions. Once these rules and interface effects are identified, we can build them through the code generation tool and quickly build the interface effects of these Web projects.

2, Bootstrap Development Framework menu display

The entire framework covers a wide range of content, including the use of various CSS features of the general Bootstrap, as well as menu bars, bootstrap icon management, System top columns, tree controls Jstree, portlet containers, modal dialogs, tab controls, Drop-down lists Select2 , check box Icheck, multiple Edit control summernote, file and picture upload display fileinput, hint control bootstrap-toastr and Sweetalert, numeric adjustment control Touchspin, Video playback Display control Video-player and so on, these features in the overall solution are designed to assemble these excellent plug-ins, to provide our framework with more powerful features and a rich interface experience.

This section continues back to the beginning of the framework, menu processing and presentation. Generally in order to manage conveniently, the menu is divided into three levels, the selected menu and other menu styles are differentiated, the menu can be folded minimized, the effect is as follows.

In Bootstrap, the Build menu is a relatively easy thing, mainly using the UL and Li, through the style of processing, you can achieve the layout of the menu set up, the code is as shown below.

        <ul class= "Page-sidebar-menu page-sidebar-menu-hover-submenu" data-keep-expanded= "false" data-auto-scroll= "tr
              UE "data-slide-speed=" > <li class= "Start" id= "1" > <a href= "/home/index" >  <i class= "Icon-home" ></i> <span class= "title" > Home </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:yello"
   W "> <i class=" icon-home "></i>             Industry trends </li> <li> <a href= "#" >
                  <i class= "Icon-home" ></i> <span class= "badge Badge-danger" >4</span> Policy </a> </li> <li> <a href= "#"
                  ;
                  <i class= "Icon-basket" ></i> <span class= "badge badge-warning" >4</span> Announcement </a> </li> <li> <a href= "#" > <i class= "icon-tag" ></i> <span class= "badge badge-success" >4&lt ;/span> Dynamic Information </a> </li> </ul> & Lt;/li> </ul>

However, our general menu is dynamically changing, that is, the need to get from the database, and set to the front end display, so we need in the MVC controller, Output menu content, and then bound to the front-end interface, to achieve the dynamic menu data, at the same time this is the basis for the control of authority processing.

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

The specific code as shown below, first to determine whether the user landing, if landing, then get the user's menu data, there is viewbag inside to be used.

<summary>
    ///override base class processing before action execution
    ///</summary>
    ///<param name= "Filtercontext" > parameter of overriding method </param>
    protected override void OnActionExecuting (ActionExecutingContext filtercontext)
    {
      base. OnActionExecuting (filtercontext);
      Get user login information
      CurrentUser = session["UserInfo"] as UserInfo;
      if (CurrentUser = = null)
      {
        Response.Redirect ("/login/index");//If the user is null to jump to the login interface
      }
      else
      {
        //Set authorization properties and assign values to ViewBag save
        Convertauthorizedinfo ();
        Viewbag.authorizekey = Authorizekey;
        Login Information Unified Set
        Viewbag.fullname = Currentuser.fullname;
        Viewbag.name = Currentuser.name;
        viewbag.menustring = Getmenustring ();
        viewbag.menustring = Getmenustringcache (); Use caching to update} at intervals
    

Among them, the Getmenustring function is the assembly processing of the menu. The menu information in the database is a tree structure, as shown below.

We can build some of the HTML code used by the interface according to the menu information of the database.

 #region-defined format template
      //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 ' {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 level three menu can be generated by code.

 Level three
            icon = Subnodeinfo.webicon;
            Tid the top-level category Id,sid to 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 amount of concurrency, you can reduce the frequent retrieval of menus, this part of the data into the Memerycache inside, the following processing can be.

 public string Getmenustringcache ()
    {
      string itemvalue = Memorycachehelper.getcacheitem<string> (" Getmenustringcache ", delegate ()
        {return
          getmenustring ();
        },
        null, DateTime.Now.AddMinutes (5)/ /5 minutes later expired, regain
      );
      return itemvalue;
    }

3, layout of the use of the page

At the same time, in order to improve the reuse of pages, in general, the content of the same part of each page is drawn out, put on the general layout page, so that the content area, other parts are inherited from the layout view of the content of the page, our dynamic menu part of the layout view is also part of the content.

The _layout.cshtml of the above image is the General Layout view page based on C # 's MVC. In this way, we set up the contents of the menu in this page, as well as the part of the content of the main page, as well as the part of the script to show it.

The display code for the menu looks like this:

The layout page leaves out the page Show section as shown below.

Because bootstrap generally put the JS file to the last load, so we are in the layout of the page to retain some of the necessary jquery and other scripts, but also need to put the script part of the content at the bottom of the page to load, and we can use MVC bundles technology to compress integration processing. For this technology, you can refer to my previous article on the Mvc4+easyui Web development Framework Experience (11)--use bundles process to simplify the page code.

In this way, we are in the view of each subpage, introduce layout view page, only need to write the part of personalized display content, the specific code as shown below.

Then at the bottom of the page, include the required part of the script code, so that after the page is generated, it will be based on the layout of the order block set up a good, reasonable display, and is to integrate all parts of the content.

4, the use of page Editing tool sublime text

I have a screenshot ahead, many are in the VS environment, but generally we edit the view page, is the use of sublime text this powerful editing tools, rich plug-ins, smart grammar tips, etc., will let you put it down later, is the Edit View page very fast tool, strongly recommended.

VS generally we use to do file management, as well as compile and so on processing can be.

The above content is small make up to everybody introduced based on Bootstrap Metronic development Framework Experience Summary "one" Frame Overview and Menu module processing related knowledge, hope to help everyone, if you want to know more information please pay attention to cloud Habitat community website!