Creating a Dynamic Dialog System with Bootstrap and ASP.NET 5

With the anniversary of Bootstrap next month, today’s post explains how to take a modal and make it more dynamic using ViewComponents

Since we’re coming up on the 10th anniversary of Bootstrap, I felt this would be a good time to write a post describing how to use Bootstrap in your ASP.NET Core.

I know I mentioned in the past about how JavaScript frameworks take up way too much space and slow down the loading of webpages, but Bootstrap is a library and has fundamental elements every web application uses.

I’ve tried to move away from Bootstrap by creating my own CSS grid system and JavaScript library of elements (like dropdown, modal, etc), but there were 2 reasons why I stopped.

In today’s post, we’ll create the happiest dialog on the Internet using Bootstrap and ASP.NET ViewComponents.

The project will display a button on the screen and when you press it, a dialog will appear with a loading indicator. When the GET finishes loading the content, the ViewComponent will replace the indicator.

Our demo project uses ASP.NET 5.0, Razor Pages, Bootstrap, FontAwesome, and TypeScript. That is all we need.

So no Controllers are in this house.

Creating the Project

First steps was to create the project.

Now that we have our project, we need to add the client-side specifics.

Setting up the Task Runner

Visual Studio’s Task Runner will help us out with compiling our TypeScript into vanilla JavaScript.

Let’s create our package.json in the root of our project.

/package.json

Once we have the package.json defined, we need to restore these packages for our Task Runner to run properly.

In the Solution Explorer, right-click on the package.json file and click “Restore Packages”. This will download the packages into your node_modules directory which is not visible in your solution unless you “Show All Files.”

Directory Structure

Our directory structure will be similar to the previous CSS Bloat post. While everyone has their own style of organizing their projects, make sure you update your HTML to point to the proper locations.

The directory structure for this project looks like this:

Whether it’s JavaScript or CSS, this type of organization makes your components easier to find in your project.

Next? GULP!

With all of our modules installed, we can now create our gulpfile.js.

Our gulp file will perform the following tasks:

Since we aren’t making changes to the CSS, I didn’t include any SCSS tasks for our Task Runner.

Need a Refresher?

Your gulpfile will be basic as shown below.

/gulpfile.js

After we save our gulpfile, you should be able to open the Task Runner (View / Other Windows… / Task Runner Explorer) and run the default behavior.

Adding our Modal

With our project properly configured (Phew!), we can now move forward with the modal and ViewComponent implementation.

Since we have an Index page already, I added the modal to the bottom of the page.

We’ll call our modal “happiest-dialog”.

You’re probably wondering why we’re defining this here instead of making it entirely dynamic. There are two reasons why:

This takes care of the HTML. Now on to the JavaScript.

Minimal JavaScript

The main TypeScript file we’ll use in the project is the dialogexample.ts.

Our dialogexample code will grab the dialog element and attach an event listener to it when the modal is shown. Once we retrieve the data, we replace the HTML in the “.modal-body” with the content returned.

The ready() function is the equivalent to the $(function() {}); in jQuery to confirm we have the entire document loaded.

Creating the ViewComponent

Our ViewComponent doesn’t contain a model since it’s simple HTML added to the dialog box.

However, there is a trick to calling a ViewComponent from JavaScript which we’ll get into in a minute.

For now, we need to create our ViewComponent based on the search path for Razor Pages.

Our server-side ViewComponent is called HappiestPlaceViewComponent and consists of displaying the carousel with four images.

/Pages/Shared/Components/HappiestPlace/Default.cshtml

/Pages/Shared/Components/HappiestPlace/HappiestPlaceViewComponent.cs

Now for the tricky part.

Since we’re using ViewComponents with Razor Pages, we really don’t have a way to make a call to a “controller” with Razor Pages from JavaScript. We’re essentially calling a page. However, we can look at this another way.

With Razor Pages, when you have multiple buttons on a form, a button can contain a handler defined in the “code-behind” using a simple convention. The convention on Razor Pages is “?handler=On<verb><handlerName>”.

In our case, we can create an OnGetHappiestPlaceContent() method to return our HappiestPlace ViewComponent.

/Pages/Index.cshtml.cs

We’re now able to call our Index Razor Page with a handler of “?handler=HappiestPlaceContent”. By convention, this will make a call to the OnGetHappiestPlaceContent method and return the ViewComponent.

/wwwroot/src/HappiestDialogService.ts

Once we return the HTML from our ViewComponent, we update the dialog box with our carousel control.

GitHub Source

Of course, the Github source is located here.

We can adjust this approach and create a number of different dialogs based on sections in the application. You could even pass in a different handler or simply use a ViewComponent name to call dynamic ViewComponents to populate the dialog box.

Building components is what development is all about and utilizing ViewComponents throughout your application give you flexibility and consistency throughout your application. 

How are you using ViewComponents in your application? Do you have a system for components? Post your comments below and let’s discuss the approaches.