Popup Windows in ASP.NET MVC

Introduction

In this article we will learn how to open the popup windows in ASP.NET MVC. In  ASP.NET we can easily use the window.open function to open the popup windows. In this article we also use the same function to open the popup but in MVC you know that every Controller method has an action to perform.

In this article, we will see two popup windows i.e.

1. Modal Popup
2. Modeless Popup window

So let's get started.

Modal Popup

Do you know what "modal windows" are? They are windows that, once opened, they do not provide any interaction with the rest of the windows in the application. If we need to interact with the rest of the windows we must have to provide some response like Ok or cancel or close; then we can only interact with other windows in our application. In many situation in windows forms based applications we use Message boxes; these are an excellent example of modal windows. In our application if we want to display confirmation dialogs then we can use these modal windows to get confirmation from the user. So let's create one modal popup window.

Step 1 : Start a new ASP.NET MVC Web application. Add a new controller called Home and in the Home controller, the Index method is available to you but there is not a view with it so add a view by right-clicking in Index action.

Step 2 : In index.aspx add one HTML button to open our modal popup window like below.

In index.aspx add one HTML button to open our modal popup window like below.

<input type="button" id="btnpopup" value="Open Modal Popup" onclick="ShowModelPopUp();" />

In the above markup we created a button and the onclick of this button we called the ShowModelPopup() method; this is a JavaScript function that we are now going to write. So write the script like below. 

<script type="text/javascript">
    ShowModelPopUp = function () {
        window.showModalDialog('/Home/OpenModelPopup', "WindowPopup", 'width=400px,height=400px');
}
</script>

In the above script we have a ShowModelPopup function which will open the modal window by clicking on the button. But here you noticed that we have written:

window.showModalDialog('/Home/OpenModelPopup' , "WindowPopup", 'width=400px,height=400px');

which takes a controller name and the actionname as arguments so now we have to write one action in our controller so write the Method in our Home Controller with an OpenModelPopup like below.

public string OpenModelPopup()
{
    //can send some data also.
    return "<h1>This is Modal Popup Window</h1>";
}

 

In the above action simply we are passing a string only.

Modeless Popup

All of you are aware of modeless popup windows also. These windows are opposite of Modal windows which open but also provide interaction with other windows of application. We will create these windows in the same manner as the above modal windows we created. So let's start doing that. To create a Modeless popup put one button on our Index.aspx and write one more script to open a popup window like below.

<input type="button" id="btnpopu" value="Open Modeless popup" onclick="ShowPopup();" />
<script type="text/javascript">
    ShowPopup = function () {
        window.open('/Home/OpenPopup', "PopupWindow", 'width=400px,height=400px,top=150,left=250');
    }
</script>

In the above line the window.open function takes as arguments the controller name with action name so create one more action or method in your home controller with the name OpenPopup like below.

public string OpenPopup()
{
    return "<h1> This Is Modeless Popup Window</h1>";
}

 

It's ready now; we have both Modal as well as Modeless popup windows. Run your application and see the results like below.

Modal Popup Window

Modeless Popup Window

Conclusion

Using a simple JavaScript we can create a modal as well as modeless popup for our ASP.NET MVC application.