Book Image

Bootstrap for ASP.NET MVC - Second Edition

By : Pieter van der Westhuizen
Book Image

Bootstrap for ASP.NET MVC - Second Edition

By: Pieter van der Westhuizen

Overview of this book

One of the leading open source frontend frameworks, Bootstrap has undergone a significant change and introduced several features that make designing compelling, next-generation UIs much simpler. Integrating Bootstrap with ASP.NET's powerful components can further enhance its capabilities. This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap. After a primer on the fundamentals of Bootstrap, you will learn your way around and create a new ASP.NET MVC project in Visual Studio. You will move on to learn about the various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open-source plugins with Bootstrap and ASP.NET MVC and guides you through building an ASP.NET MVC website using Bootstrap, utilizing layout and user-interface components. At the end of this book, you will find some valuable tips and tricks to help you get the most out of your Bootstrap-integrated and ASP.NET MVC-integrated website.
Table of Contents (15 chapters)
Bootstrap for ASP.NET MVC Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating an empty ASP.NET MVC site and adding Bootstrap manually


The default ASP.NET 5 project template in Visual Studio 2015 Update 3 currently adds Bootstrap 3 to the project. In order to use Bootstrap 4 in your ASP.NET project, you'll need to create an empty ASP.NET project and add the Bootstrap 4 files manually.

To create a project that uses Bootstrap 4, complete the following process:

  1. In Visual Studio 2015, select New | Project from the File menu or use the keyboard shortcut Ctrl + Shift + N.

  2. From the New Project dialog window, select ASP.NET Core Web Application (.NET Core), which you'll find under Templates | Visual C# | Web.

  3. Select the Empty project template from the New ASP.NET Core Web Application (.NET Core) Project dialog window and click on OK.

Enabling MVC and static files

The previous steps will create a blank ASP.NET Core project. Running the project as-is will only show a simple Hello World output in your browser. In order for it to serve static files and enable MVC, we'll need to complete the following steps:

  1. Double-click on the project.json file inside the Solution Explorer in Visual Studio.

  2. Add the following two lines to the dependencies section, and save the project.json file:

            "Microsoft.AspNetCore.Mvc": "1.0.0", 
            "Microsoft.AspNetCore.StaticFiles": "1.0.0" 
    
  3. You should see a yellow colored notification inside the Visual Studio Solution Explorer with a message stating that it is busy restoring packages.

  4. Open the Startup.cs file. To enable MVC for the project, change the ConfigureServices method to the following:

            public void ConfigureServices(IServiceCollection services) 
             { 
                services.AddMvc(); 
             } 
    
  5. Finally, update the Configure method to the following code:

             public void Configure(IApplicationBuilder app, IHostingEnvironment 
             env, ILoggerFactory loggerFactory) 
              { 
                 loggerFactory.AddConsole(); 
     
                 if (env.IsDevelopment()) 
                  { 
                     app.UseDeveloperExceptionPage(); 
                  } 
     
                  app.UseStaticFiles(); 
     
                  app.UseMvc(routes => 
                  { 
                     routes.MapRoute( 
                     name: "default", 
                     template: "{controller=Home}/{action=Index}/{id?}"); 
                  }); 
               }  
    
  6. The preceding code will enable logging and the serving of static files such as images, style sheets, and JavaScript files. It will also set the default MVC route.

Creating the default route controller and view

When creating an empty ASP.NET Core project, no default controller or views will be created by default. In the previous steps, we've created a default route to the Index action of the Home controller. In order for this to work, we first need to complete the following steps:

  1. In the Visual Studio Solution Explorer, right-click on the project name and select Add | New Folder from the context menu.

  2. Name the new folder Controllers.

  3. Add another folder called Views.

  4. Right-click on the Controllers folder and select Add | New Item... from the context menu.

  5. Select MVC Controller Class from the Add New Item dialog, located under .NET Core | ASP.NET, and click on Add. The default name when adding a new controller will be HomeController.cs:

  6. Next, we'll need to add a subfolder for the HomeController in the Views folder. Right-click on the Views folder and select Add | New Folder from the context menu.

  7. Name the new folder Home.

  8. Right-click on the newly created Home folder and select Add | New Item... from the context menu.

  9. Select the MVC View Page item, located under .NET Core | ASP.NET; from the list, make sure the filename is Index.cshtml and click on the Add button:

  10. Your project layout should resemble the following in the Visual Studio Solution Explorer: