Learn more about the quick build of the ASP. NET MVC Admin Home page

This article is mainly for you to introduce the ASP. NET MVC Admin Homepage Rapid construction of relevant information, with a certain reference value, interested in small partners can refer to

Objective

Background developers generally do not like to adjust the style, do half a day style out, but also to consider a variety of browser compatibility, bother not to please, fortunately, the internet era has a lot of resources to share, to avoid our zero start, Now let's see how to quickly build a ASP.NETMVC Admin home page method, first look at the final effect!

First step: Select an admin template

Internet era is the era of resource sharing, various front-end templates on the web, Here is mainly to explain how to integrate the template into our ASP.NETMVC project, as for the template you can choose to like, here we choose this refreshing version of the aircraftadmin, first look at the effect of aircraftadmin.

Step Two: streamline the template

Usually download a template after opening will find that there is a lot of CSS style JS plug-in, there are many are we do not need, directly applied to the project is not convenient, how to do it, my experience is, delete and delete, yes, download the template after the open, html,css,js do not need to step by step to kill.

1. Delete unwanted HTML elements

Use vs to open a page, analyze the overall layout, and then step Delete, such as the top and left side of the menu bar we need to keep, the main content area does not need to delete HTML.

2. Thin CSS Files

Through analysis, a total of four CSS files were quoted, Bootstrap.css (bootstrap style), font-awesome.css (icon font), Theme.css (theme), Premium.css (unknown), the last one deleted, refreshed after normal, so keep three CSS files.

3. Thin JS file

As in step 2, some do not need to delete JS, if you are not very familiar with JS or do not know the page of some JS role, you can temporarily retain these JS, by deleting a refresh to see the effect of a JS function confirmation.

After a few steps above, the paging file and the reference file have been greatly reduced, and the basic document is clear to us. The next step is to integrate into the MVC project.

Step three: integrate relevant documents

1. Below we begin to analyze the document structure, build an MVC project, and integrate the relevant files. The entire document we are divided into three pieces, the Head tool Information Bar, the left menu bar, the main content area, the head and left side is relatively constant, and each page is a common part, extract them out, as a partial view of the MVC project _topbarpartial.cshtml and _ menupartial.cshtml add in. Here I have simplified _menupartial.cshtml, leaving only a few sample menus, and the bottom of the body as a public partial view _footerpartial.cshtml, where you can add your company and copyright information.

_topbarpartial.cshtml

<p class= "NavBar navbar-default" role= "navigation" > <p class= "Navbar-header" > <button type= "button" CLA Ss= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= ". Navbar-collapse" > <span class= "sr-only" > Toggle navigation</span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span&gt    ; <span class= "Icon-bar" ></span> </button> <a class= "" href= "index.html" ><span class= " Navbar-brand "><span class=" fa fa-paper-plane "></span> aircraft</span></a> </p> <p class= "navbar-collapse collapse" style= "height:1px;" > <ul id= "main-menu" class= "nav navbar-nav navbar-right" > <li class= "dropdown hidden-xs" > <a HRE f= "#" class= "Dropdown-toggle" data-toggle= "dropdown" > <span class= "padding-right-small" style= "position: relative;top:3px; " ></span> <i class= "fa fa-user" ></i> Jack Smith <i class= "FA fa-cAret-down "></i> </a> <ul class=" Dropdown-menu "> <li><a href="./">my account<     /a></li> <li class= "Pider" ></li> <li class= "Dropdown-header" >admin panel</li> <li><a href= "./" >Users</a></li> <li><a href= "./" >security</a></li     > <li><a tabindex= "-1" href= "./" >Payments</a></li> <li class= "Pider" ></li> <li><a tabindex= "-1" href= "sign-in.html" >Logout</a></li> </ul> </li> </ul > <ul class= "nav navbar-nav navbar-right" > <li class= "dropdown hidden-xs" > <a href= "#" class= "D Ropdown-toggle "data-toggle=" dropdown "> <i class=" fa fa-tachometer "></i> </a> <ul class = "Dropdown-menu theme-choose" > <li> <a href= "#" data-color= "1" ><p class= "color theme-1" >&lt ;/p></a> <a HRef= "#" data-color= "2" ><p class= "color theme-2" ></p></a> <a href= "#" data-color= "3" ><p C lass= "Color theme-3" ></p></a> <a href= "#" data-color= "4" ><p class= "color theme-4" ></p& gt;</a> </li> <li> <a href= "#" data-color= "5" ><p class= "color theme-5" ></p& Gt;</a> <a href= "#" data-color= "6" ><p class= "color theme-6" ></p></a> <a href= "# "Data-color=" 7 "><p class=" color theme-7 "></p></a> <a href=" # "data-color=" 8 "><p class= "Color theme-8" ></p></a> </li> </ul> </li> </ul> </p></p>

_menupartial.cshtml

<p class= "Sidebar-nav" > <ul> <li><a href= "#" data-target= ". Accounts-menu" class= "Nav-header Collapsed "data-toggle=" collapse "><i class=" fa fa-fw fa-briefcase "></i> account <span class=" label Label-info ">+3</span></a></li> <li> <ul class=" Accounts-menu nav nav-list collapse " > <li><a href= "#" ><span class= "fa fa-caret-right" ></span> sign in</a></li> &L T;li><a href= "#" ><span class= "fa fa-caret-right" ></span> sign up</a></li> <li ><a href= "#" ><span class= "fa fa-caret-right" ></span> Reset password</a></li> </ ul> </li> <li><a href= "#" data-target= ". Legal-menu" class= "Nav-header collapsed" data-toggle= " Collapse "><i class=" fa fa-fw fa-legal "></i> legal<i class=" fa fa-collapse "></i></a> </li> <li> <ul class= "Legal-menu Nav nav-list CollApse "> <li><a href=" # "><span class=" fa fa-caret-right "></span> Privacy policy</a> </li> <li><a href= "#" ><span class= "fa fa-caret-right" ></span> Terms and conditions</ a></li> </ul> </li> <li><a href= "#" class= "Nav-header" ><i class= "FA fa-fw fa-quest Ion-circle "></i> help</a></li> <li><a href=" # "class=" Nav-header "><i class=" FA FA-FW fa-comment "></i> faq</a></li> </ul></p>

_footerpartial.cshtml

<footer> 
2. Install Font-awesome font icon through NuGet, Font-awesome is a good font icon library, for more information please refer to the official website http://fontawesome.dashgame.com/.


3. In the project's Bundleconfig file, add the relevant CSS and JS files.



For more information about bindings, visit http://go.microsoft.com/fwlink/. linkid=301862 public static void Registerbundles (Bundlecollection bundles) {  bundles. ADD (New Scriptbundle ("~/bundles/jquery"). Include (   "~/scripts/jquery-{version}.js"));  Bundles. ADD (New Scriptbundle ("~/bundles/jqueryval"). Include (   "~/scripts/jquery.validate*"));  Use the development version of the MODERNIZR to be used for development and learning. Then, when you're  ready for//production, use the build tool on http://modernizr.com to select only the tests you want.  bundles. ADD (New Scriptbundle ("~/bundles/modernizr"). Include (   "~/scripts/modernizr-*"));  Bundles. ADD (New Scriptbundle ("~/bundles/bootstrap"). Include (   "~/scripts/bootstrap.js",   "~/scripts/respond.js"));  Bundles. ADD (New Stylebundle ("~/content/css"). Include (   "~/content/bootstrap.css",   "~/content/site.css",   "~/content/theme.css",    "~/ Content/css/font-awesome.min.css "   )); }
4. Add the Layoutadmin master page and modify the index home page to point to the index master pages layoutadmin



@{Layout = "~/views/shared/_layoutadmin.cshtml"; Viewbag.title = "Home page"; }<p class= "header" > 

In this way, through a few simple steps to set up a simple and generous ASP.NETMVC background Management template page, half an hour to take care of, how, high efficiency bar! Here I add the theme style to the top of the homepage menu, by simply switching to choose the top style, you can also expand your theme in the THEME.CSS.