ASP. net mvc uses the Bootstrap method, mvcbootstrap

ASP. net mvc uses the Bootstrap method, mvcbootstrap

As a Web developer, it is very difficult to use HTML and CSS to build friendly pages from scratch without using any front-end framework. Especially for Windows Form developers, it is even more difficult to understand.

For this reason, Bootstrap was born. Twitter Bootstrap provides developers with a wide range of CSS styles, components, plug-ins, and responsive la S. At the same time, Microsoft has been fully integrated into the ASP. net mvc template.

Bootstrap Structure

You can download the latest Bootstrap version through http://getbootstrap.com.

After extracting the folder, you can see that the Bootstrap file distribution structure is as follows, including three folders:

• Css
• Fonts
• Js

4. CSS files and 2. map Files are included in the cssfile folder. We only need to include the bootstrap.css file in the project so that Bootstrap can be applied to our page. Bootstrap.min.css is the compression version of the preceding css.

The. map file does not need to be included in the project. You can ignore it. These files are used as debugging symbols (similar to the. pdb file in Visual Studio), allowing developers to edit preprocessing files online.

Bootstrap uses Font Awesome (a Font file contains all the Font icons, designed only for Bootstrap) to display different icons and symbols, the fonts folder contains four 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)

We recommend that you include all the font files in your Web application, because this allows your site to display the correct font in different browsers.

EOT font format files must be supported by IE9 and later browsers. TTF is a traditional old font format file, and WOFF is a font format file compressed from TTF. If you only need to support browsers after IE8, iOS 4 or later, and Android, you only need to include the WOFF font.

The js folder contains three files, and all Bootstrap plug-ins are included in bootup. in the js file, bootstrap. min. js is the compression version of the above js, npm. js is automatically generated using the project build tool Grunt.

Before referencing the boostrap. js file, make sure that you have referenced the JQuery library because all Bootstrap plug-ins require JQuery.

Add a Bootstrap file to the ASP. net mvc project.

Open Visual Studio 2013 and create a standard ASP. net mvc project. By default, all Bootstrap files are automatically added, as shown below:

It indicates that Microsoft is very recognized for Bootstrap and highly integrated in Visual Studio.

It is worth noting that a file named _ references is added to the Scripts file. js files. This is a very useful feature. When we use some front-end libraries such as Bootstrap, it can help Visual Studio to enable smart prompts.

Of course, you can also create an empty ASP. net mvc project to manually add these dependency files. As shown in the following figure, select an empty template:

For the newly created blank ASP. net mvc project, Content, Fonts, and Scripts folders are useless. We must create them manually, as shown below:

Of course, you can also use Nuget to automatically add Bootstrap resource files. If you use the graphical interface to add a Bootstrap Nuget Package, you can directly search for Bootstrap. If you use the Package Manager Console to add a Bootstrap Nuget Package, enter Install-Package bootstrap.

Create a Layout page for a website

To keep our website consistent, I will use Bootstrap to build a Layout page. Create the MVC Layout Page (Razor) Layout file in the Views folder, as shown in:

On the newly created Layout page, use the following code to reference 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> 

Use @ Url. Content to convert the virtual or relative path to the absolute path, so that the Bootstrap resource file is referenced.

Create a Controller named Home and add the default Index view to apply the Layout page as follows:

Use bundling and compression to improve website performance

Bundling and compression (minification) are a new feature in ASP. NET that allows you to accelerate website 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, and line breaks) are deleted ).

Most modern browsers have six concurrent connections to a host name, which means that if you reference more than six CSS and JavaScript files on a page, the browser downloads only 6 files at a time. Therefore, it is a good way to limit the number of resource files. in the true sense, the quota must be reached, rather than being wasted on loading resources.

Use bundling in the Bootstrap Project

Because we created an empty ASP. net mvc project, we did not automatically reference the Assembly related to packaging. Open the Nuget Package Manager Console to install the Package. Run the following PowerShell command:

Install-package Microsoft. AspNet. Web. Optimization to install Microsoft. AspNet. Web. Optimization NuGet package and the Package on which it depends, as shown below:

After the installation is complete, add the BundleConfig class to 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"));}

When the ScriptBundle and StyleBundle objects are instantiated, a parameter is used to represent the virtual path of the package file. The Include parameter is used to Include the file you need.

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;}

Otherwise, do not include a. minutely file in the package. For example, bootstrap.min.css or bootstrap. min. js, the compiler will ignore these files because they have been compressed.

On the ASP. net mvc layout page, use @ Styles. Render ("~ /Bootstrap/css "), @ Scripts. Render ("~ /Bootstrap/js ") to add references to the packaged files.

If the Visual Studio HTML editor indicates that Styles and Scripts objects cannot be found, it means that you lack namespace references. You can manually add System at the top of the layout page. web. the following code shows the Optimization namespace:

@using System.Web.Optimization<!DOCTYPE html>
Of course, for versatility, the best practice is to add a reference to the System. web. Optimization namespace in the Web. config of the Views folder, as shown below:
<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 directory of the website, and change the dubug attribute of the compilation element to false, that 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 web. config settings, even if the debug attribute is true ).
Finally, browse the Web page and view the source code. You can see that the path of the package file is the relative path defined previously. Click this link and the browser opens the compressed package file for us, as shown in:

Summary
In this chapter, we will briefly sort out the Bootstrap architecture for you, and then learn how to apply it to ASP. add Bootstrap to the. net mvc project, and use the packaging and compression technology to package resource files, thus improving the website performance.

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