ASP. net mvc Admin homepage quick building, mvcadmin

ASP. net mvc Admin homepage quick building, mvcadmin

Preface

Background developers generally do not like to adjust styles and adopt half-day styles. They also need to consider the compatibility of various browsers, Which is laborious and thankless. Fortunately, there is a large amount of resource sharing in the Internet era to avoid us from scratch, now let's take a look at how to quickly build an ASP. to manage the admin homepage in the NETMVC background, first take a look at the final effect!

Step 1:Select an admin Template

The Internet era is the era of resource sharing. There are various front-end templates on the Internet. Here we mainly explain how to integrate the templates into our ASP. in the NETMVC project, you can select the template you like. Here we choose this refreshing version of AircraftAdmin. First, let's take a look at the effect of AircraftAdmin.

Step 2:Simplified Template

After downloading a template, you will find that there are a lot of css style js plug-ins in it. Many of them are not needed and it is not convenient to directly apply them to the project. What should we do, my experience is to delete, delete, and delete the template. That's right. Download the template, open it, and delete unnecessary html, css, and js in one step.

1. Delete unnecessary html elements

Use vs to open a page, analyze the overall layout, and delete the page step by step. For example, we need to keep the menu bar on the top and left. html deletion is not required in the main content area.

2. Streamline css files

Unknown: the last one is deleted and refresh is normal. Therefore, three css files are retained.

3. Streamline js files

Like step 2, delete unnecessary js files. If you are not familiar with js or are not clear about some js functions on the page, you can retain these js files for the moment, confirm the role of a js by deleting one refresh and checking the effect.

After the steps above, the page files and reference files have been greatly reduced, and the basic documents are also clear. The next step is to integrate it into the MVC project.

Step 3:Integrate Related Files

1. Next we will analyze the document structure, create an MVC project, and integrate relevant files. The entire document is divided into three parts: the header tool information bar, the left-side menu bar, the main content area, the header and the left side are relatively unchanged, and each page is public, extract them, as the segment VIEW _ TopBarPartial In the MVC project. cshtml and _ MenuPartial. add cshtml. Here I am on _ MenuPartial. cshtml is simplified, leaving only a few sample menus. The bottom area of the subject is also used as a public branch view _ FooterPartial. cshtml, where you can add your company and copyright information.

_ TopBarPartial. cshtml

<div class="navbar navbar-default" role="navigation">  <div class="navbar-header">   <button type="button" class="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>    <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>  </div> <div class="navbar-collapse collapse" style="height: 1px;">    <ul id="main-menu" class="nav navbar-nav navbar-right">   <li class="dropdown hidden-xs">    <a href="#" 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="divider"></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="divider"></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="dropdown-toggle" data-toggle="dropdown">      <i class="fa fa-tachometer"></i>    </a>    <ul class="dropdown-menu theme-choose">      <li>      <a href="#" data-color="1"><div class="color theme-1"></div></a>      <a href="#" data-color="2"><div class="color theme-2"></div></a>      <a href="#" data-color="3"><div class="color theme-3"></div></a>      <a href="#" data-color="4"><div class="color theme-4"></div></a>     </li>      <li>      <a href="#" data-color="5"><div class="color theme-5"></div></a>      <a href="#" data-color="6"><div class="color theme-6"></div></a>      <a href="#" data-color="7"><div class="color theme-7"></div></a>      <a href="#" data-color="8"><div class="color theme-8"></div></a>     </li>    </ul>   </li>  </ul>   </div></div>

_ MenuPartial. cshtml

<div 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>    <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-question-circle"></i> Help</a></li>  <li><a href="#" class="nav-header"><i class="fa fa-fw fa-comment"></i> Faq</a></li> </ul></div>

_ FooterPartial. cshtml

<footer> 
2. Install font-awesome font icons through NUGET, font-awesome is an excellent font icon library, would like to learn more please refer to the official http://fontawesome.dashgame.com /.

3. In the BundleConfig file of the project, add the relevant css and js files.
// For more information about binding, visit the 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 Modernizr to be used for development and learning. Then, when you are ready for production, use the build tool on the http://modernizr.com to select only the tests you need. 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, modify the content of the Index homepage, and direct the Index master page to LayoutAdmin.
@{ Layout = "~/Views/Shared/_LayoutAdmin.cshtml"; ViewBag.Title = "Home Page"; }<div class="header"> 

In this way, a simple and generous ASP. NETMVC background management template page can be created in just a few steps. It takes about half an hour to complete the process. How can this problem be solved and the efficiency is very high! Extension of your topic.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.