Chapter 4. Using Bootstrap JavaScript Components
Bootstrap's JavaScript features are all built on top of the jQuery library and either provide completely new functionality or extend the functionality of the existing Bootstrap components.
The plugins can be used by simply adding data attributes to your page elements, but they can also provide a rich programmatic API, if needed.
In this chapter, we will cover the following topics:
Using dropdown menus and creating a cascading dropdown menu
How to use modal dialogs
Separate content inside views with tabs
How to implement tooltips and popovers
How to use the accordion component
Creating a slideshow using the carousel
Data attributes versus the programmatic API
Bootstrap offers the ability to use its plugins entirely through HTML markup. This means that in order to use most of the plugins, you do not need to write a single line of JavaScript. Using data attributes is the recommended approach and should be your first option when using Bootstrap plugins.
For example, to allow an alert element to be dismissible, you'll add the data-dismiss="alert" attribute to either a button or anchor element, as illustrated in the following code:
<div class="alert alert-danger">
<button data-dismiss="alert" class="close" type="button">×</button>
<strong>Warning</strong> Shuttle launch in t-minus 10 seconds.
</div>
You also have the option to perform the same action using the programmatic API via JavaScript. The following code uses jQuery to close a specific alert element when the user clicks on a button:
<button class="close" type="button" onclick="$(...
You can add drop-down menus to almost any Bootstrap component using the dropdown plugin. A cascading drop-down menu is a drop-down menu that updates its data based on a value selected in another drop-down menu. To add cascading drop-down menus, perform the following steps:
Inside Visual Studio, add a new controller called DropdownController.cs to your Controllers folder.
In the Index action, add the following code, which will create a list of managers and load a list of reporting employees for the selected manager:
public IActionResult Index(int id = 2)
{
var managers = new List<EmployeeModel>();
var vicePresident = new EmployeeModel { Id = 2, Name = "Andrew
Fuller", JobTitle = "Vice President, Sales", ReportsTo = null };
var salesManager = new EmployeeModel { Id = 5, Name =
"Steven Buchanan", JobTitle = "Sales Manager", ReportsTo = null };
...
Modals are used to provide a pop-up dialog style element that can be used to provide information to the user or even allow the user, to complete a form inside the modal. A Bootstrap modal is essentially made of three parts: a header, body, and footer. You can put any standard HTML markup inside the modal's body element, including standard text or even an embedded YouTube video.
As a general rule, always place the modal's markup in a top-level position inside your view, the top or bottom of the view is the best place to put your modal markup.
In order to show a modal when a button is clicked, you can set the data-toggle and data-target attributes of a Bootstrap button. For example, in the following HTML markup, a button's data-toggle attribute has been set to modal and its data-target attribute has been set to employeeModal:
<div class="row">
<button type="button" class="btn btn-primary btn-lg" data-toggle=
"modal" data-target="#employeeModal">...
Tabs provide an option to split your content into separate pages. This is an ideal component when you have a particularly large form that you want to split up into a logical grouping. For example, when you're editing an employee's record, you might want to split their basic information from their background history, as illustrated in the following screenshot:
Bootstrap tabs are divided into two parts. You first need to specify the tab names and the ID of the corresponding <div> element to show when the user clicks on the tab. This is done by creating a standard unordered list <ul> element with the tab names as child list items <li>. The <ul> element's class must be set to nav nav-tabs or nav nav-pills, as illustrated in the following HTML markup:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#info"
role="tab">Employee Info</a>
...
Bootstrap's tooltip plugin is an updated version of Jason Frame's jQuery.tipsy plugin. Tooltips can be used to provide users with additional information labels about specific content on your pages or provide insight into what input is expected in form elements.
Bootstrap 4 uses the third-party tether library for positioning. You have to include the Tether library in order to use tooltips with Bootstrap 4. To install and use the Tether library, complete the following steps:
Open the bower.json file, which is located in your project's root folder. If you do not see the file in the Visual Studio Solution Explorer, click on the Show All Files button on the Solution Explorer toolbar.
In the bower.json file, add the following to the list of dependencies:
"tether": "1.1.1"
Visual Studio should begin to download the tether library to the wwwroot\lib\tether folder in your project.
Next, to include the Tether library on your site pages, open the project's _Layout.cshtml file, which...
Popovers are similar to tooltips in that they can provide users with additional information about an element, but they are designed to show a little more content, as popovers also allow you to display a header.
Popovers are defined in a similar fashion to a popup, by adding the data-toggle, data-placement, data-content, and title attributes to an element. The following markup displays a popup when a user clicks on an anchor <a> element:
<a data-content="The protagonist of Franz Kafka's short story The Metamorphosis" data-placement="bottom" data-toggle="popover" href="#" >Gregor Samsa</a>
Setting the data-toggle attribute to popover specifies to the plugin that it needs to show a popover. The data-content attribute contains the content that will be shown inside the popover, and the data-original-title attribute sets the title of the popover. The data-placement attribute indicates the placement of the popover and supports four values, namely top, bottom, left...
The accordion/collapse component
The accordion component is probably best known for FAQ pages or pages that require a lot of content to be broken down into manageable parts. An accordion is made up of a number of panel groups. Each panel group, in turn, has a heading and body elements.
An accordion effect is created by using the Bootstrap collapse plugin which allows you to toggle content in the pages using JavaScript.
To use the accordion component in our project, perform the following steps:
To allow the panel to collapse when the user clicks on its heading, we need to add a data-toggle attribute to an anchor <a> element inside the panel heading element and set its value to collapse.
We also need to specify the parent element of the panel by setting the data-parent attribute's value to the ID of the parent panel group. Next, set the anchor element's href attribute to the ID of the <div> element that contains the content.
Finally, we also need to set the panel body element's class...
The carousel component is a user interface element, which you'll see on a number of websites. It is essentially a slideshow that cycles through different elements, usually images. The carousel component should be contained inside a <div> element with a class name of carousel and a data-ride attribute with a value of carousel. To use the carousel component in your project, perform the following steps:
The carousel component consists of an ordered list element, <ol>, which renders as small circles in the browser and indicates which slide is currently active. The markup for this element is as follows:
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0"
class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
Next...
In this chapter, we examined various Bootstrap JavaScript plugins, how to initialize them, and how to set their options using either the data- API or the programmatic JavaScript approach.
In the next chapter, we'll explore how you can create your own ASP.NET MVC helpers and Tag helpers to reduce the amount of HTML markup you have to write in order to create a number of Bootstrap elements and components.
