O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Bootstrap for ASP.NET MVC

Book Description

Incorporate Bootstrap into your ASP.NET MVC projects and make your websites more user friendly and dynamic

In Detail

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.

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 an ASP.NET MVC website using Bootstrap, utilizing layout and user interface components. In the process, you will also learn to build ASP.NET MVC 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.

What You Will Learn

  • Create a Bootstrap ASP.NET MVC site from scratch
  • Use the various Bootstrap CSS and HTML elements with ASP.NET MVC
  • Employ Bootstrap components such as navigation, alerts, and progress bars with ASP.NET MVC
  • Utilize JavaScript Bootstrap components with ASP.NET MVC including modal dialogs, contextual dropdowns, and more
  • Build your own ASP.NET MVC helpers to reduce the amount of HTML needed to generate Bootstrap elements in your projects
  • Design T4 Templates to generate Bootstrap-themed scaffolded views
  • Convert a Bootstrap HTML template into a usable ASP.NET MVC project
  • Integrate the jQuery DataTables plugin with Bootstrap and ASP.NET MVC

Table of Contents

  1. Bootstrap for ASP.NET MVC
    1. Table of Contents
    2. Bootstrap for ASP.NET MVC
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Getting Started with ASP.NET MVC and Bootstrap
      1. The Bootstrap distribution
        1. Bootstrap style sheets (the css folder)
        2. Bootstrap fonts (the fonts folder)
        3. Bootstrap JavaScript files (the js folder)
        4. The Bootstrap folder structure
      2. Using Bootstrap with a site created with the standard Visual Studio project template
        1. Examining the default MVC project layout
          1. The Content folder
          2. The fonts folder
          3. The Scripts folder
      3. Creating an empty ASP.NET MVC site and adding Bootstrap manually
        1. Adding the Bootstrap style sheets
        2. Adding the Bootstrap fonts
        3. Adding the Bootstrap JavaScript files
      4. Creating the site Layout file
      5. Creating a home controller with a Bootstrap-themed view
      6. Adding Bootstrap files using NuGet
        1. Adding the Bootstrap NuGet package using the dialog
        2. Adding the Bootstrap NuGet package using the Package Manager Console
      7. Improving your site performance with bundling and minification
        1. Adding bundling to your Bootstrap project
        2. Including bundles in your ASP.NET layout
        3. Testing bundling and minification
      8. Summary
    10. 2. Using Bootstrap CSS and HTML Elements
      1. The Bootstrap grid system
        1. Bootstrap grid options
      2. Bootstrap HTML elements
        1. Bootstrap tables
          1. Styling Bootstrap tables
          2. Bootstrap contextual table classes
        2. Bootstrap buttons
      3. Form layout and elements
        1. Horizontal forms
        2. Vertical/Basic forms
        3. Inline forms
      4. Bootstrap validation styles
      5. Creating editor templates for primitive types
        1. Creating editor templates for nonprimitive types
      6. Bootstrap image classes
      7. Summary
    11. 3. Using Bootstrap Components
      1. The Bootstrap navigation bar
      2. List groups
      3. Badges
      4. The media object
      5. Page headers
      6. Breadcrumb
      7. Pagination
      8. Input groups
      9. Button dropdowns
      10. Alerts
      11. Progress bars
        1. The basic progress bar
        2. Contextual progress bars
        3. Striped and animated progress bars
        4. Dynamically updating the progress bar's percentage
      12. Summary
    12. 4. Using Bootstrap JavaScript Plugins
      1. Data attributes versus the programmatic API
      2. Cascading dropdowns
      3. Modal dialogs
      4. Tabs
      5. Tooltips
      6. Popovers
      7. The accordion component
      8. The carousel component
      9. Summary
    13. 5. Creating ASP.NET MVC Bootstrap Helpers
      1. Built-in HTML helpers
      2. Creating a custom helper
        1. Using a helper in a view
      3. Creating helpers using static methods
        1. Using the static method helper in a view
      4. Creating helpers using extension methods
        1. Using the extension method helper in a view
      5. Creating fluent HTML helpers
        1. Using the fluent HTML helper in a view
      6. Creating self-closing helpers
        1. Using the self-closing helper in a view
      7. Summary
    14. 6. Creating T4 Templates to Scaffold Bootstrap Views
      1. An overview of scaffolding
      2. T4 templates
        1. T4 tools
        2. The T4 syntax
      3. Customizing the generated code for controllers
      4. Customizing the generated code for views
      5. Creating a custom scaffolder extension
      6. Summary
    15. 7. Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project
      1. Working with prebuilt HTML templates
      2. Creating the ASP.NET MVC project
      3. Creating the master layout
      4. Adding a view for the home controller
      5. Adding the menu plugin library
      6. Adding different page views
      7. Adding charts to your views
      8. Summary
    16. 8. Using the jQuery DataTables Plugin with Bootstrap
      1. jQuery DataTables
      2. Adding DataTables to your ASP.NET MVC project
        1. Using the DataTables NuGet package
        2. Using the CDN
        3. Adding Bootstrap styling to DataTables
      3. Loading and displaying data in jQuery DataTables
      4. DataTables extensions
        1. The ColReorder extension
        2. The ColVis extension
        3. The TableTools extension
      5. Summary
    17. 9. Making Things Easier with the TwitterBootstrapMVC Library
      1. The TwitterBootstrapMVC library
      2. Including TwitterBootstrapMVC in your project
        1. Adding TwitterBootstrapMVC using NuGet
        2. Add TwitterBootstrapMVC using the .dll file
      3. Using the TwitterBootstrapMVC helpers
        1. Forms and inputs
          1. Inputs
          2. Forms
        2. Buttons and links
        3. Accordions and panels
        4. Tabs and modals
      4. Summary
    18. A. Bootstrap Resources
      1. Themes
      2. Add-ons
      3. Editors and generators
    19. Index