ASP. NET MVC uses the Bootstrap method to introduce

This article mainly introduced the ASP. NET MVC uses the bootstrap method, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Let's take a look at it with a little knitting.

As a web developer, it is very difficult to build friendly pages from scratch using HTML and CSS without any front-end frames. Especially for Windows Form developers, it's even more difficult.

It was for such a reason that Bootstrap was born. Twitter Bootstrap provides developers with a rich set of CSS styles, components, plugins, responsive layouts, and more. At the same time, Microsoft is fully integrated in the ASP. NET MVC template.

Bootstrap Structure Introduction

You can download the latest version of Bootstrap by Http://getbootstrap.com.

After extracting the folder, you can see that the file distribution structure of Bootstrap is as follows, containing 3 folders:

• Css

• Fonts

• Js

The CSS folder contains 4. css files and 2. map files. We just need to include the Bootstrap.css file in the project so that we can apply the bootstrap to our page. BOOTSTRAP.MIN.CSS is the compressed version of the above CSS.

The. map file does not have to be included in the project, and you can ignore it. These files are used as debug symbols (similar to. pdb files in Visual Studio) and ultimately allow developers to edit pre-processing files online.

Bootstrap uses the font Awesome (a font file contains all glyph icons, designed for bootstrap only) to display different icons and symbols, and the Fonts folder contains 4 types of font files in different formats:

• Embedded OpenType (Glyphicons-halflings-regular.eot)

• Scalable Vector Graphics (glyphicons-halflings-regular.svg)

• TrueType Font (GLYPHICONS-HALFLINGS-REGULAR.TTF)

• Web Open Font Format (Glyphicons-halflings-regular.woff)

It is recommended that you include all font files in your Web application, as this will allow your site to display the correct fonts in different browsers.

EOT font format file requires IE9 and above browser support, TTF is a traditional old font format file, Woff is a compressed font format file from TTF. If you only need to support IE8 after the browser, IOS 4 or later, and support Android, then you only need to include woff fonts.

JS folder contains 3 files, all the bootstrap plug-ins are included in the Boostrap.js file, Bootstrap.min.js is the above JS compressed version, npm.js through the project build tool grunt automatically generated.

Before referencing the Boostrap.js file, make sure you have referenced the jquery library because all the bootstrap plugins require jquery.

To add a bootstrap file to an ASP. NET MVC Project

Open Visual Studio 2013, create a standard ASP. NET MVC project, and automatically add all of the bootstrap files by default, as follows:

Note that Microsoft is highly recognized for Bootstrap, and is heavily integrated in Visual Studio.

It is worth noting that a file named _references.js has been added to the scripts file, which is a useful feature that helps Visual Studio enable smart hints when we use some front-end libraries such as Bootstrap.

Of course we can also create an empty ASP. NET MVC project manually to add these dependent files, as shown in this, select the empty template:

For the newly created blank ASP. NET. NET MVC project, the Content,fonts,scripts folder is useless-we must manually create them as follows:

Of course, you can also add bootstrap resource files using NuGet. If you use the graphical interface to add the bootstrap NuGet package, search directly for bootstrap, or if you use the Package Manager console to add the bootstrap NuGet package, then enter Install-package Bootstrap.

Create layout layouts page for a Web site

To keep our site in a consistent style, I'll use bootstrap to build layout layouts pages. Create the MVC layout Page (Razor) layouts file in the Views folder, as shown in:

In the newly created layout layouts page, use the following code to refer to the bootstrap resource file.

<link href= "@Url. Content (" rel= "external nofollow" rel= "external nofollow" ~/css/bootstrap.css ")" Rel= "stylesheet" ><script src= "@Url. Content (" ~/js/bootstrap.js ")" ></script>

The use of @Url. Content converts a virtual or relative path to an absolute path, ensuring that the bootstrap resource file is referenced.

Create a new controller named Home and add a view of the default index so that it applies to the layout page above, as shown below:

Use bundled packaging and compression to improve website performance

Bundled packaging (bundling) and compression (minification) is a new feature in ASP., which allows you to increase the speed of Web site loading by limiting the number of requests for CSS and JavaScript files. Essentially, this type of file is combined into a large file and all unnecessary characters (such as comments, spaces, line breaks) are removed.

For most modern browsers accessing a host name has the limit of 6 concurrent connections, which means that if you refer to more than 6 CSS and JavaScript files on a single page, the browser will only download 6 files at a time. So it's a good idea to limit the number of resource files, and the real mission will be to do it, not to waste it on loading resources.

Using bundle packaging in bootstrap projects

Because we created an empty ASP. NET MVC project, we did not automatically reference the assembly associated with the package. Open the NuGet package Manager console to complete the installation of the assembly using the following PowerShell command:

Install-package Microsoft.AspNet.Web.Optimization to install the Microsoft.AspNet.Web.Optimization NuGet package and its dependencies, As shown below:

After the installation is complete, add the Bundleconfig class in App_start:

public static void Registerbundles (Bundlecollection bundles) {  bundles. ADD (New Scriptbundle ("~/bootstrap/js"). Include (  "~/js/bootstrap.js",  "~/js/site.js"));  Bundles. ADD (New Stylebundle ("~/bootstrap/css"). Include (  "~/css/bootstrap.css",  "~/css/site.css"));}

Scriptbundle and Stylebundle objects are instantiated with a single parameter that represents the virtual path to the packaged file, including the file you need in the include name.

Then register it in the Application_Start method:

protected void Application_Start () {  arearegistration.registerallareas ();  Routeconfig.registerroutes (routetable.routes);  Bundleconfig.registerbundles (bundletable.bundles);  Bundletable.enableoptimizations = true;}

Remember, do not include. Min types of files into packaged files, such as Bootstrap.min.css, Bootstrap.min.js, which the compiler ignores because they are already compressed.

Use @styles.render ("~/bootstrap/css"), @Scripts. Render ("~/bootstrap/js") on the ASP. NET MVC layout page to add a reference to the packaged file.

If the Visual Studio HTML editor indicates that the styles and scripts objects cannot be found, it means that you are missing a reference to the namespace, and you can manually add the System.Web.Optimization namespace at the top of the layout page, as shown in the following code:

@using system.web.optimization<! DOCTYPE html>
For versatility, of course, the best practice is to add a reference to the System.Web.Optimization namespace in the Views folder's Web. config, as follows:



<namespaces> <add namespace= "SYSTEM.WEB.MVC"/> <add namespace= "System.Web.Mvc.Ajax"/> <add Namespace= "System.Web.Mvc.Html"/> <add namespace= "System.Web.Routing"/> <add namespace= "Bootstrap.web" /> <add namespace= "System.Web.Optimization"/></namespaces>
Test packaging and compression

To use packaging and compression, open the Web. config file under the root of the site, and change the Dubug property of the compilation element to False, which is release.



<system.web> <compilation debug= "false" targetframework= "4.5"/> 
Of course you can set bundletable.enableoptimizations = True in the Application_Start method to achieve the same effect (it will override The settings in Web. config, even if the Debug property is true.

Finally browse the Web page, look at the source code, you can clearly see the path of the package file is the relative path defined previously, click on this link, the browser opened the compressed processing of the package file for us, as shown in:


Summary

In this chapter, we simply comb the bootstrap architecture, then how to add bootstrap to the ASP. NET MVC project, and finally use the packaging and compression technology to package the resource files, thus improving the performance of the website.