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

Adding charts to your views


In the SB Admin template, the Dashboard page contains a variety of attractive charts and graphs that you can use to display data in an interactive way to your users. We'll add the Dashboard page and its functionality that is included in the SB Admin template to our project by completing the following steps:

  1. Create a new folder called morris inside the js\plugins folder.

  2. Add the following two files from the SB Admin source files to the folder:

    • raphael-2.1.0.min.js

    • morris.js

  3. Add the dashboard-demo.js file to the js folder.

  4. Add the morris-0.4.3.min.css file to your project's css folder.

  5. Next, open the _Layout.cshtml file and add the following code to the <head> element:

    @RenderSection("styles",false)
  6. By adding the preceding line, we can inject additional CSS styles into the layout page per view.

  7. Open the Index.cshtml file inside the Views\Home folder.

  8. Add the following code to the top of the file, just below the layout declaration:

    @section styles{
        <link href...