Bootstrap for ASP.NET MVC

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>

Bootstrap for ASP.NET MVC

Bootstrap for ASP.NET MVC

Credits

About the Author

About the Author

Acknowledgments

Acknowledgments

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting Started with ASP.NET MVC and Bootstrap

Getting Started with ASP.NET MVC and Bootstrap

The Bootstrap distribution

Using Bootstrap with a site created with the standard Visual Studio project template

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

Creating the site Layout file

Creating a home controller with a Bootstrap-themed view

Adding Bootstrap files using NuGet

Improving your site performance with bundling and minification

Using Bootstrap CSS and HTML Elements

Using Bootstrap CSS and HTML Elements

The Bootstrap grid system

Bootstrap HTML elements

Form layout and elements

Bootstrap validation styles

Creating editor templates for primitive types

Bootstrap image classes

Using Bootstrap Components

Using Bootstrap Components

The Bootstrap navigation bar

The media object

Button dropdowns

Using Bootstrap JavaScript Plugins

Using Bootstrap JavaScript Plugins

Data attributes versus the programmatic API

Cascading dropdowns

The accordion component

The carousel component

Creating ASP.NET MVC Bootstrap Helpers

Creating ASP.NET MVC Bootstrap Helpers

Built-in HTML helpers

Creating a custom helper

Creating helpers using static methods

Creating helpers using extension methods

Creating fluent HTML helpers

Creating self-closing helpers

Creating T4 Templates to Scaffold Bootstrap Views

Creating T4 Templates to Scaffold Bootstrap Views

An overview of scaffolding

Customizing the generated code for controllers

Customizing the generated code for views

Creating a custom scaffolder extension

Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project

Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project

Working with prebuilt HTML templates

Creating the ASP.NET MVC project

Creating the master layout

Adding a view for the home controller

Adding the menu plugin library

Adding different page views

Adding charts to your views

Using the jQuery DataTables Plugin with Bootstrap

Using the jQuery DataTables Plugin with Bootstrap

jQuery DataTables

Adding DataTables to your ASP.NET MVC project

Loading and displaying data in jQuery DataTables

DataTables extensions

Making Things Easier with the TwitterBootstrapMVC Library

Making Things Easier with the TwitterBootstrapMVC Library

The TwitterBootstrapMVC library

Including TwitterBootstrapMVC in your project

Using the TwitterBootstrapMVC helpers

Bootstrap Resources

Bootstrap Resources

Editors and generators

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Adding a view for the home controller

We need to create a view for the home controller's Index action in order to test our template. Complete the following steps to accomplish this:

Open the HomeController.cs file, right-click inside the Index method, and select Add View… from the context-menu.
In the Add View dialog, set the View name textbox to Index and the Template combobox to Empty (without model).
Tick the Use a layout page checkbox, and select the _Layout.cshtml file we created earlier as the layout page. Click on Add.
An Index.cshtml file will be created inside the Views\Home folder.

Add the following markup to the view:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Blank</h1>
    </div>
</div>

Run your project, and you should see the home view and layout in your browser. Note that the left-hand side menu will be expanded to display all items...