Shulou(Shulou.com)06/03 Report--

Xiaobian to share with you how to build Admin homepage in ASP.NET MVC, I believe most people still do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let us go to understand it together!

effect

Step 1: Select an admin template

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

Step 2: Streamlining Templates

Usually download a template after opening will find, which mixed with a large number of CSS style JS plug-ins, there are many we do not need, directly applied to the project is not convenient, how to do it, my experience is, delete delete, yes, download the template after opening, do not need html, CSS, JS step by step to kill.

1. Remove unwanted 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. The menu bar at the top and left side we need to keep, and the html that is not needed in the main content area is deleted.

2. Streamlining CSS files

Through analysis, a total of four css files are referenced, bootstrap.css (bootstrap style), font-awesome.css (icon font), theme.css (theme), premium.css (unknown), delete the last one, refresh normal, so keep three css files.

3. Streamlining JS files

As in step 2, delete some unwanted js. If you are not familiar with js or don't know the role of some js in the page, you can temporarily keep these js, and confirm the role 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 will be integration into MVC projects.

Step 3: Integrate relevant documents

1. Let's start analyzing the document structure, build an MVC project, and integrate related files. The whole document is divided into three parts, the header toolbar, the left menu bar, the main content area, the header and the left side are relatively unchanged, and each page is common. Extract them and add them as the partial views_TopBarPartial.cshtml and_MenuPartial.cshtml in the MVC project. Here I simplified_MenuPartial.cshtml, leaving only a few sample menus, and the bottom of the main body also serves as a public partial view_FooterPartial.cshtml, where you can add your company and copyright information.

_TopBarPartial.cshtml

Toggle navigation Aircraft

Jack Smith My Account Admin Panel Users Security Payments Logout

_MenuPartial.cshtml

Account +3 Sign In Sign Up Reset Password Legal Privacy Policy Terms and Conditions Help Faq

_FooterPartial.cshtml

A Free Bootstrap Theme by Portnine

© 2014 Portnine

2. Install font-awesome font icons via NUGET, font-awesome is an excellent font icon library, please refer to the official website http://fontawesome.dashgame.com/for more information.

3. In the project's BundleConfig file, add the relevant css and js files.

//For more information on 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 are 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 LayoutAdmin master page and modify Index home page content to point Index master page to LayoutAdmin

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

@Html.Partial("_FooterPartial")

In this way, through a few simple steps to build a simple and generous ASP.NET VC background management template page, half an hour to get done, how, efficient! Here I add the theme style to the top menu of the home page by the way. You can choose the top style by simply switching. You can also expand your theme in theme.css.

The above is "ASP.NET MVC how to build Admin home page" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.