Rapid construction of asp.net MVC admin home page

Time:2021-9-14

preface

Background developers generally don’t like to adjust the style. They can’t get out of the style for half a day. They also need to consider the compatibility of various browsers. It’s hard and thankless. Fortunately, there are a lot of resource sharing in the Internet era, so we can avoid starting from scratch. Now let’s see how to quickly build an asp.net MVC background management admin home page. Let’s take a look at the final effect first!

Step 1:Select an admin template

The Internet era is the era of resource sharing. There are various front-end templates on the Internet. This is mainly to explain how to integrate the template into our asp.net MVC project. As for the template, you can choose what you like. Here we choose this refreshing version of aircraftadmin. First, let’s see the effect of aircraftadmin.

Step 2:Compact template

Usually, after downloading a template and opening it, you will find that there are a large number of CSS style JS plug-ins, many of which are not needed by us. It is not convenient to directly apply them to the project. What to do? My experience is to delete, delete, delete, delete, yes, open it after downloading the template and kill the unnecessary HTML, CSS and JS step by step.

1. Delete unnecessary HTML elements

Use VS to open a page, analyze the overall layout, and then delete it step by step. As shown in the figure below, we need to keep the menu bars at the top and left, and delete the HTML unnecessary in the main content area.

2. Streamline CSS files

Through analysis, a total of four CSS files are referenced, including bootstrap.css (bootstrap style), font-awesome.css (icon font), theme.css (Theme) and premium.css (unknown). The last one is deleted and refreshed normally, so three CSS files are retained.

3. Streamline JS files

As in synchronization step 2, delete some unnecessary JS. If you are not very familiar with JS or do not know some JS functions in the page, you can retain these JS temporarily, and confirm the function of a JS by deleting one and then refreshing to see the effect.

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

Step 3:Integrate relevant documents

1. Let’s start to analyze the document structure, establish an MVC project and integrate relevant documents. The whole document is divided into three parts: the header tool information bar, the left menu bar and the main content area. The header and left are relatively unchanged, and each page has common parts. They are extracted as a partial view in the MVC project_ Topbarpartial.cshtml and_ Add menupartial.cshtml. Here I am right_ Menupartial.cshtml is simplified, leaving only a few sample menus, and the bottom area of the main body is also used as a public partial view_ Footerpartial.cshtml, where you can add your company and copyright information.

_TopBarPartial.cshtml


<div role="navigation">
  <div>
   <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span>Toggle navigation</span>
    <span></span>
    <span></span>
    <span></span>
   </button>
   <a href="index.html"><span><span></span> Aircraft</span></a>
  </div>
 <div style="height: 1px;">
  
  <ul>
   <li>
    <a href="#" data-toggle="dropdown">
     <span style="position:relative;top: 3px;"></span> <i></i> Jack Smith
     <i></i>
    </a>
    <ul>
     <li><a href="./">My Account</a></li>
     <li></li>
     <li>Admin Panel</li>
     <li><a href="./">Users</a></li>
     <li><a href="./">Security</a></li>
     <li><a tabindex="-1" href="./">Payments</a></li>
     <li></li>
     <li><a tabindex="-1" href="sign-in.html">Logout</a></li>
    </ul>
   </li>
  </ul>
   
  <ul>
   <li>
    <a href="#" data-toggle="dropdown"> 
     <i></i>
    </a>
    <ul> 
     <li>
      <a href="#" data-color="1"><div></div></a>
      <a href="#" data-color="2"><div></div></a>
      <a href="#" data-color="3"><div></div></a>
      <a href="#" data-color="4"><div></div></a>
     </li> 
     <li>
      <a href="#" data-color="5"><div></div></a>
      <a href="#" data-color="6"><div></div></a>
      <a href="#" data-color="7"><div></div></a>
      <a href="#" data-color="8"><div></div></a>
     </li>
    </ul>
   </li>
  </ul>
  
 </div>
</div>

_MenuPartial.cshtml


<div>
 <ul>
  <li><a href="#" data-target=".accounts-menu" data-toggle="collapse"><i></i> Account <span>+3</span></a></li>
  <li>
   <ul>
    <li><a href="#"><span></span> Sign In</a></li>
    <li><a href="#"><span></span> Sign Up</a></li>
    <li><a href="#"><span></span> Reset Password</a></li>
   </ul>
  </li>
  <li><a href="#" data-target=".legal-menu" data-toggle="collapse"><i></i> Legal<i></i></a></li>
  <li>
   <ul>
    <li><a href="#"><span></span> Privacy Policy</a></li>
    <li><a href="#"><span></span> Terms and Conditions</a></li>
   </ul>
  </li>
  <li><a href="#"><i></i> Help</a></li>
  <li><a href="#"><i></i> Faq</a></li>
 </ul>
</div>

_FooterPartial.cshtml


<footer>
 <hr>
 <!-- Purchase a site license to remove this link from the footer: http://www.portnine.com/bootstrap-themes -->
 <p>A <a href="http://www.portnine.com/bootstrap-themes" target="_blank">Free Bootstrap Theme</a> by <a href="http://www.portnine.com" target="_blank">Portnine</a></p>
 <p>© 2014 <a href="http://www.portnine.com" target="_blank">Portnine</a></p>
</footer>

2. Install font awesome font icons through nuget. Font awesome is an excellent Font Icon Library. For more information, please refer to the official websitehttp://fontawesome.dashgame.com/

3. In the bundleconfig file of the project, 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 modernizr to be used for development and learning. Then, when you do
  //When preparing for production, please use http://modernizr.com  To select only the required tests.
  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 home page, and point the index master page to layoutadmin


@{
 Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
 ViewBag.Title = "Home Page"; 
}

<div>
 <h1>Help</h1>
 <ul>
  <li><a href="#">Home</a> </li>
  <li>Help</li>
 </ul>
</div>

<div>

 <div>

 </div>
 @Html.Partial("_FooterPartial")
</div>

In this way, a simple and generous ASP. Net MVC background management template page is built in a few simple steps, and it will be done in half an hour. How about it? It’s very efficient! Here, I add the theme style to the top menu of the home page. You can select the top style through simple switching. You can also expand your theme in theme.css.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

Recommended Today

Beautify your code VB (VBS) code formatting implementation code

However, vb.net does have many new functions that VB6 does not have. The automatic typesetting of code is one, which is the function we want to realize today – VB code formatting.Let’s look at the effect: Before formatting: Copy codeThe code is as follows: For i = 0 To WebBrowser1.Document.All.length – 1 If WebBrowser1.Document.All(i).tagName = […]