ASP.NET MVC 5: Lightbox Alternative Bootstrap Modal

Today, I shall be demonstrating how we can integrate Bootstrap Modal into ASP.NETMVC 5 application similar to JQuery base lightbox themed alternative.

The following are some prerequisites before you proceed any further in this article:

Prerequisites:

The prerequisites include knowledge about the following technologies:

ASP.NET MVC 5

HTML

JavaScript

Ajax

Bootstrap

JQuery

C# Programming

You can download the complete source code for this tutorial from here or you can follow step by step discussion below. The sample code is developed in Microsoft Visual Studio 2013 Ultimate.

Let's begin now:

Create a new MVC web application project and name it "BootstrapModal".

I will be using "Ajax.BeginForm(...)" method of ASP.NET MVC5 platform, so, we need to include "unobtrusive ajax" jquery package. Open "Manage Nuget Packages for Solution" from "Tools->Nuget Package Manager" as shown below:

In the above code snippet, following lines of code at the bottom are important i.e.

<!-- Modal view -->

@Html.Partial("_ModalMsgPartial")

@*Scripts*@

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/bootstrap")

<!-- Modal -->

@Scripts.Render("~/bundles/custom-modal")

Here, we include our javascripts and a partial page reference to our Bootstrap Modal. Now, for any lightbox themed plugin to work with, the main requirement is that its base placeholder should exist on the main of the page. So, in ASP.NET MVC5 the main of the page is "_Layout.cshtml" file and here we are simply placing our Bootstrap Modal placeholder.

Under "Views, click Shared" folder, create a new file and name it "_ModalMsgPartial.cshtml" and copy-paste below code snippet into it:

Here, we have created two methods for "Index(..)" i.e. "HttpGet" and "HttpPost". "HttpGet" method simply loads the "Index" page with a textbox field and a button. The button will display the Bootstrap Modal with the text in it which we have typed in the provided textbox field. "HttpPost" method will post our typed message to the Bootstrap Modal.

Now, Under "Views->Modal" folder, create the "Index.cshtml" page and replace it with the following code:

In the above code, we have created a simple Ajax base form with an input text box and a button. In above code we have also stated in "Ajax.BeginForm(..)" that upon every successful response from the controller go to "onModalSuccess" JavaScript base method. Let's create this method now:

Under "Scripts" folder, create a new script file i.e. "custom-modal.js" and replace it with the following code:

var onModalSuccess = function(result)

{

if (result.EnableError)

{

// Clear.

$('#ModalTitleId').html("");

$('#ModalContentId').html("");

// Setting.

$('#ModalTitleId').append(result.ErrorTitle);

$('#ModalContentId').append(result.ErrorMsg);

// Show Modal.

$('#ModalMsgBoxId').modal(

{

backdrop: 'static',

keyboard: false

});

}

elseif (result.EnableSuccess)

{

// Clear.

$('#ModalTitleId').html("");

$('#ModalContentId').html("");

// Setting.

$('#ModalTitleId').append(result.SuccessTitle);

$('#ModalContentId').append(result.SuccessMsg);

// Show Modal.

$('#ModalMsgBoxId').modal(

{

backdrop: 'static',

keyboard: false

});

// Resetting form.

$('#ModalformId').get(0).reset();

}

}

In the above code, we are creating "onModalSuccess" method which will display Bootstrap Modal with both success and error message that is received from the server side with the properties defined by the server side i.e. "EnableSuccess, EnableError, SuccessTitle, SuccessMsg, ErrorTitle, ErrorMsg." In above code we are also constraining our Bootstrap Modal to not allow the user to close the Bootstrap Modal whenever user clicks on the outside black space behind the Bootstrap Modal or whenever user presses "Esc"key from the keyboard. User can only close the Bootstrap Modal by clicking "OK or X" buttons placed on the Bootstrap Modal.

Now, execute the application and you will be able to see the following:

Conclusion

This article is about integrating Bootstrap Modal with ASP.NET MVC 5 application similar to JQuery base lightbox themed alternative. You will learn the basics of Bootstrap Modal in this article and you will also learn about how to use “Ajax.BeginForm” method.