Book Image

Bootstrap for ASP.NET MVC

By : Pieter van der Westhuizen
Book Image

Bootstrap for ASP.NET MVC

By: Pieter van der Westhuizen

Overview of this book

<p>Bootstrap, a leading open source frontend framework, takes care of typography, form layouts, and user interface components, allowing a developer to focus on writing code. Integrating 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.</p> <p>You will learn about 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 will guide you through building a website using Bootstrap, utilizing layout and user interface components. In the process, you will also learn to build HTML helpers and T4 templates as well as how to use the jQuery DataTables plugin. At the end of this book, you will find some valuable tips and tricks, which will help you in getting the most out of your Bootstrap and ASP.NET MVC integrated website.</p>
Table of Contents (18 chapters)
Bootstrap for ASP.NET MVC
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a home controller with a Bootstrap-themed view


At the moment, the site we've created will return an error message that states that the requested resource cannot be found, when we run the project. We first need to add a new home controller and associate a view with its default action in order to avoid any errors. To add a new controller, perform the following steps:

  1. Right-click on the Controller folder in the Solution Explorer section and navigate to Add | Controller….

  2. In the Add Scaffold dialog, select the MVC 5 Controller - Empty item, as shown in the following screenshot:

  3. When prompted, in the Add Controller dialog, enter HomeController as the new controller name and click on Add.

  4. After the controller has been added, right-click inside the empty Index method and select Add View. The method is considered empty if it has only the one return View() statement in it.

  5. In the Add View dialog, leave all the fields at their default values and select the layout page we've added earlier. Click on Add to continue, as shown in the following screenshot:

  6. An empty view will be generated and you'll notice the ViewBag.Title property as well as the layout page to use for this view have been added at the top of the view. Consider the following example:

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    There will also be a single <h2> element in the view that you can leave as is. If you run your project, you should see the view displayed with the default Bootstrap styling applied to the <h2> element.