Packt+ | Advance your knowledge in tech

You're reading from Bootstrap for ASP.NET MVC - Second Edition

Product typeBook

Published inSep 2016

Reading LevelIntermediate

Publisher

ISBN-139781785889479

Edition2nd Edition

Languages

JavaScript

Tools

ASP.NET MVC Bootstrap

Concepts

Responsive Web Development

Author (1)

Pieter van der Westhuizen

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

One of the major benefits of using Bootstrap is the wide variety of resources available on the Internet. The web development community has embraced Bootstrap, and you'll find tons of valuable templates, snippets, and advice on using Bootstrap online.

By combining a predesigned Bootstrap template and ASP.NET MVC, you can save a lot of time without having to worry about site layout or design.

In this chapter, we will cover the following topics:

Why we use prebuilt HTML templates and how they will save time
Building the master layout
Adding specific page views
Including charts in your views

Working with prebuilt HTML templates

It is a well-known fact that most developers are not necessarily good designers. We prefer to work on the backend, building great performing and intelligent software, and sometimes, we tend to think of the user interface as an afterthought.

By using a predesigned HTML Bootstrap template, we can give our users an intuitive and well-designed user interface that was designed by a professional designer. If the design was based on Bootstrap, the developer is already familiar with most of the CSS class names, components, and plugins, and does not have to relearn anything.

The Web offers an assortment of free and premium Bootstrap templates. Themeforest (www.themeforest.net) provides a mind-boggling array of different premium site styles and designs.

With Bootstrap 4, the Bootstrap team also offers official themes, which you can purchase. Each theme provides a full set of tools and examples and can be used as a good starting point for your project.

Note

The Bootstrap...

Creating the ASP.NET MVC project

To create a new ASP.NET MVC project, perform the following steps:

In Visual Studio, create a new ASP.NET Core Web Application project, as shown in the following screenshot:
In the New ASP.NET Core Web Application dialog, select the Empty template under the ASP.NET Core Templates and click on the OK button:
Visual Studio will create a default empty MVC project. Right-click on the wwwroot folder inside the project and navigate to Add | New Folder. Create the following two folders:
- css
- js
Add the styles.css file from the Bootstrap 4 Admin Dashboard template css folder to the css folder inside the wwwroot folder in the project.
Copy the scripts.js file located in the Bootstrap 4 Admin Dashboard template's js folder to the js folder in the project's wwwroot folder.
Next, add two folders to the root of the project called Controllers and Views.
Next, in order to enable MVC features such as tooling and Tag Helpers, open the project.json file and add the following to the...

Creating the master layout

You've added the CSS and JavaScript files needed to create the master layout file for your project. Next, you need to create a home controller as well as a master layout file. To do this, complete the following steps:

Add a new empty controller called HomeController to the Controllers folder by right-clicking on it and selecting Add | New Item....
Select MVC Controllers Class from the list of project items and click on the Add button.
Next, right-click on the Views folder in your project and navigate to Add | New Folder. Name the folder Shared.
Right-click on the newly created Shared folder and navigate to Add | New Item...
Select MVC View Layout Page in the list of project items and keep the name of the file as _Layout.cshtml and click on Add.
Open the index.html file in the Bootstrap 4 Admin Dashboard template source files and copy its contents to the _Layout.cshtml file.
Change the <head> tag to reference the styles.css folder in the correct folder, as illustrated...

Adding a view for the home controller

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

Open the HomeController.cs file and, if the HomeController class does not already contain an Index action method, add it as shown here:
```
        public IActionResult Index() 
        { 
            return View(); 
        } 
```
Next, right-click on the Views\Home folder and Add | New Item... from the context menu.
Select MVC View Page from the list of project items, make sure the name is Index.cshtml, and click on Add:

Open the newly created Index.cshtml file and change its markup to the following:

        <p class="hidden-md-up"> 
            <button type="button" class="btn btn-primary-outline btn-sm" 
             data-toggle="offcanvas"><i class="fa fa-chevron-left"></i>         
        Menu</button> 
        </p> 
        <h1 class="display-1 hidden-xs-down"> 
        ...

Adding different page views

Next, you'll create a custom view that displays two cards, one with a simple Bootstrap form and another displaying an image, by completing the following steps:

Add a new empty MVC Controller Class called FormsController.cs to the project's Controllers folder.
The new controller class should already contain an Index action method.
Next, add a new folder called Forms inside the Views folder.
Add a new MVC View Page, called Index.cshtml, to the newly created Forms folder.

Add the following markup to the view:

        <div class="row"> 
            <h1>Forms</h1> 
            <div class="col-md-3"> 
                <form> 
                    <div class="card card-success" style="max-width: 20rem;"> 
                        <div class="card-header"> 
                            First Panel with simple form 
                        </div> 
                        <div class="card-block"> 
                            ...

Adding charts to views

By adding charts to your views, you can provide a rich experience for your users and the ability for them to receive an overall view of important information about the system.

There are a number of options when it comes to adding charts and graphs to your project; some of the most popular charting components are as follows:

Google Charts: https://developers.google.com/chart/
Chart.js: http://www.chartjs.org/
Moris.js: http://morrisjs.github.io/morris.js/
Flot: http://www.flotcharts.org/

Adding Google Charts to views

Google provides a rich charting API, which is powerful, easy to use, and free. They also provide an interactive gallery that showcases their many varieties of available charts.

In order to add Google Charts to the Index view of the Home controller, complete the following steps:

Inside the Visual Studio Solution Explorer, double-click the Index.cshtml file inside the Views\Home folder.
Add a new Bootstrap row to the view, which will act as the container for the Google...

Summary

In this chapter, you've learned how to convert a predesigned HTML template into a usable ASP.NET MVC project. The techniques shown in this chapter can be applied to virtually any HTML template, allowing you to build professionally designed web applications without having to design the layout yourself.

In the next chapter, we'll explore how to include and use the jQuery DataTables plugin in your own ASP.NET MVC projects.

The rest of the chapter is locked

You have been reading a chapter from

Bootstrap for ASP.NET MVC - Second Edition

Published in: Sep 2016Publisher: ISBN-13: 9781785889479

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Pieter van der Westhuizen

Pieter van der Westhuizen is a freelance software and web developer specializing in ASP.NET MVC, web technologies, and MS Office development. He started his career in web development using classic ASP, Visual InterDev, HoTMetaL, and FrontPage. Pieter has over 16 years of experience in the IT industry and is also one of the people fortunate enough to have his hobby become his full-time profession. He is also a technology evangelist for Add-in Express (www.add-in-express.com), which focuses on tools for Microsoft Office integration. This is Pieter's second book and he has been blogging since 2007 on his personal blog at www.mythicalmanmoth.com and on the Add-in Express blog since 2010. He lives with his wife and two dogs in Pretoria, South Africa.
Read more about Pieter van der Westhuizen

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2