ASP.NET The method of using bootstrap in MVC

Time:2021-4-26

As a web developer, it is very difficult to use HTML and CSS to build friendly pages from scratch without any front-end framework. Especially for the developers of windows form, it is even more difficult.

It is for this reason that bootstrap was born. Twitter bootstrap provides developers with rich CSS styles, components, plug-ins, and responsive layouts. At the same time, Microsoft has been fully integrated in ASP.NET MVC template.

Introduction of bootstrap structure

You can go throughhttp://getbootstrap.com. to download the latest version of bootstrap.

After decompressing the folder, you can see that the file distribution structure of bootstrap is as follows, including three folders:

  • css
  • fonts
  • js    

The CSS folder contains four. CSS files and two. Map files. We just need to bootstrap.css The file is included in the project so that bootstrap can be applied to our page. bootstrap.min.css This is the compressed version of the above CSS.

The. Map file does not have to be included in the project, you can ignore it. These files are used as debugging symbols (similar to. PDB files in Visual Studio), and ultimately allow developers to edit preprocessing files online.

Bootstrap uses font awesome (a font file contains all glyph icons, only designed for bootstrap) to display different icons and symbols

  • 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 all font files be included in your web application, as this allows your site to display the correct fonts in different browsers.

EOT font format file needs IE9 and above browser support, TTF is the traditional old font format file, woff is the compressed font format file from TTF. If you only need to support browsers after IE8, iOS 4 or above, and Android at the same time, you only need to include woff fonts.

JS folder contains three files, and all bootstrap plug-ins are included in the boostrap.js In the document, bootstrap.min.js That is, the compressed version of JS, npm.js It is generated automatically by project building tool grunt.

In reference boostrap.js Please make sure that you have referenced jQuery library before using the jQuery file, because all bootstrap plug-ins need jQuery.

stay ASP.NET Add bootstrap file to MVC project

Open visual studio 2013 and create a standard ASP.NET MVC project, all bootstrap files have been added automatically by default, as shown below:

It shows that Microsoft recognizes bootstrap very much, and it is highly integrated in visual studio.

It’s worth noting that a file named_ references.js This is a very useful function. When we use bootstrap and other front-end libraries, it can help visual studio to enable intelligent prompts.

Of course, we can also create an empty one ASP.NET MVC projects manually add these dependent files. As shown in the figure below, select an empty template

For newly created blanks ASP.NET For MVC projects, there is no content, fonts, scripts folder – we have to create them manually, as follows:

Of course, nuget can also be used to automatically add bootstrap resource files. If you use graphical interface to add bootstrap nuget package, you can search bootstrap directly; If you use the package manager console to add a bootstrap nuget package, enter install package bootstrap.

Create a layout page for your site

To keep our website in a consistent style, I’ll use bootstrap to build the layout page. Create the MVC layout page (razor) layout file in the views folder, as shown in the following figure:

In 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> 

In [email protected] Url.Content Virtual or relative paths are converted to absolute paths to ensure that bootstrap resource files are referenced.

Create a new controller named home, and add the default index view to apply the above layout page, as shown below:

Use bundling and compression to improve website performance

Bundling and minification are the two key technologies ASP.NET A new feature in allows you to speed up website loading by limiting the number of requests for CSS and JavaScript files. The essence is to combine these files into a large file and delete all unnecessary characters (such as comments, spaces, and line breaks).

For most modern browsers, there is a limit of 6 concurrent connections for accessing a host name, which means that if you refer to more than 6 CSS and JavaScript files on a page, the browser will only download 6 files at a time. Therefore, it is a good way to limit the number of resource files. The real mission must be achieved, rather than wasting on loading resources.

Using bundle in bootstrap project

Because what we create is empty ASP.NET MVC projects, so there is no automatic reference to packaging related assemblies. Open the nuget package manager console to complete the installation of the package. Use the following PowerShell command:

install-package Microsoft.AspNet.Web.Optimization To install Microsoft.AspNet.Web.Optimization Nuget package and the packages it depends on are as follows:

After the installation, the_ Add bundleconfig class to 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, they accept a parameter to represent the virtual path of the packaged file. As the name suggests, include includes the files you need.

Then in the application_ Register it in the start method:


protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  BundleTable.EnableOptimizations = true;
}

Remember not to include files of type. Min in a package file, such as bootstrap.min.css 、 bootstrap.min.js , the compiler will ignore these files because they are already compressed.

stay ASP.NET MVC layout page [email protected] Styles.Render (“~/bootstrap/css”)、@ Scripts.Render (“~ / bootstrap / JS”) 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. You can manually add it at the top of the layout page System.Web.Optimization Namespace, as shown in the following code:


@using System.Web.Optimization
<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @*<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">
 <script src="@Url.Content("~/js/bootstrap.js")"></script>*@
 @Scripts.Render("~/bootstrap/js")
 @Styles.Render("~/bootstrap/css")
 </head>
 <body>
 <div>
  @*@RenderBody()*@
 </div>
</body>
</html>

Of course, for the sake of generality, the best practice is in the views folder web.config Add in System.Web.Optimization The reference to the namespace is 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, and change the debug attribute of the compilation element to false, that is, release.


<system.web>

 <compilation debug="false" targetFramework="4.5" />

 <httpRuntime targetFramework="4.5" />

</system.web>

Of course, you can do it in application_ Set in the start method BundleTable.EnableOptimizations =True to achieve the same effect (it will override web.config Even if the debug property is true).

Finally, browse the web page and view the source code. You can clearly see that the path of the packaged file is the relative path defined before. Click this link, and the browser opens the compressed packaged file for us, as shown in the figure below:

Summary

In this chapter, we simply sort out the architecture of bootstrap, and then how to use it in the system ASP.NET In MVC project, bootstrap is added. Finally, packaging and compression technology are used to package resource files, which improves the performance of the website.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.