Setup ASP.NET MVC environment

Let’s find out how to add JQuery popup dialog box to ASP.NET MVC Razor view. We assume you have setup necessary MVC3 environment. If not visit ASP.NET official website and download necessary components for your development environment. For this article I’ve used Visual Studio 2010. Open your developer environment and create a new ASP.NET MVC application. You can create an empty application. Once you create the application you can notice MVC3 adds few folders into your solution structure. Let’s dig into two folder sets that marked in green.

how mvc3 solution structure looks like

Scripts folder, is the most important folder for ASP.NET MVC applications. This will hold all the required JQuery and Javascripts by the MVC application to run. We are not going into details of each of these files, but for the moment we need two files. Those are jquery-1.5.1-min.js and jquery-ui-min.js. These files names and versions may change based on your new updates. Jquery-min.js is the core library of Jquery. It adds the core functionality of Jquery into your ASP.NET MVC3 view when you reference it.  Jquery-ui.js is the file responsible for all the UI functionality such as Dialogs, Popus, Drag and drop, Calenders etc. You can check what is available with JQuery UI visit here

As you know content folder will hold all the themes, style sheets and images required to style the site. By default ASP.NET MVC adds a theme call base theme. In this base theme folder it will place Jquery UI style sheet and the images. If you want more information about JQuery UI please visit there official website.

Set Jquery reference in ASP.NET MVC

In order to create Jquery UI dialog box, we need to refer required files. In ASP.NET MVC when you run your MVC application it starts with _viewStart.cshtml in the views folder. In this file you will find that it refers to the default _Layout.cshtml in the shared folder. This _Layout.cshtml file will be your default master page. All the Razor views will inherit this master page unless if you explicitly remove the reference. So the best place to set your style sheet and Jquery references will be _Layout.cshtml. You can set your references as follows;

Create ASP.NET MVC Controller

Lets create a Razor view. Before you create a view you need to create a controller. Lets create a controller call homeController.cs in controllers folder.  You can create a controller as follows;

Once you create the homeController.cs you controller code will look like as follows;

Create ASP.NET MVC razor View

By default it adds the index action method. Now you can create a empty view using this action method. All what you have do right click on the return view then you will get a popup as follows;

Now click add view. You will get another screen to set settings for the view. It is as follows;

Click Add. Two things will happen. It will create a new folder in the views folder call home and add a view index.cshtml. Your index view will look like as follows;

Now you are ready to run and view what you have created so far. Once you run this ASP.NET MVC application you will get a screen saying Index. If you check the html source you can notice your Jquery and Style sheet references are there in place.

Adding JQuery UI Dialog

Lets add a html link and a hidden div tag into the index view, saying simple dialog as follows;

<a href="#" id="simpledialog">Simple Dialog</a>
<div id="dialogbox" style="display:none;"> Your first Dialog box!</div>

When users trigger click event of this link we can show the hidden div as a simple dialog box. To create this dialog box you need to add following Jquery code into your view.

<script type="text/javascript">
 $(document).ready(function () {
    $("#simpledialog").click(function () {
       $("#dialogbox").dialog();
    });
 });
</script>

Now when you refresh the browser and click on the simple dialog box link it will crate a very basic dialog box like below;

As you can see the dialog is missing a title. Two ways to add title to dialog box. The first way will be adding a title attribute to the dialog div tag as follows;

<div id="dialogbox" style="display:none;" title="Dialog title"> Your first Dialog box!</div>

Jquery Ui will pickup div title tag as the title of the dialog. The other way will be pass the title as a dialog parameter as shown below;

<script type="text/javascript">
 $(document).ready(function () {
   $("#simpledialog").click(function () {
     $("#dialogbox").dialog({title:"Dialog Title one"});
   });
 });
</script>

Dialog parameters are the most important part of Jquery Dialog. Passing different parameters to dialog you can get different outputs. For all the allowed parameters visit JQuery Wiki.

Add Buttons to JQuery Dialog box

Lets add some more features to the dialog box. You can add buttons by passing the button parameters. Below code will show how to add two buttons to the JQuery dialog.

<script type="text/javascript">
 $(document).ready(function () {
   $("#simpledialog").click(function () {
     $("#dialogbox").dialog({ title: "Dialog Title one", buttons: {
       "OK": function () {
          alert("Ok clicked");
          $(this).dialog("close");
      },
       "Cancel": function () {
          alert("Cancel clicked");
          $(this).dialog("close");
      }
    }
   });
 });
 });

</script>

Once you view it on the browser you will get a popup with two buttons and each will have it’s own click event handler. You can add any amount of buttons based on your requirement.

Positioning the JQuery Dialog box

One more important option will be positioning the dialog box. By default it will be placed center of the screen. But by passing the position parameter values you can position any place you want. Below code shows how to position the dialog;

<script type="text/javascript">
 $(document).ready(function () {
   $("#simpledialog").click(function () {
      $("#dialogbox").dialog({
        title: "Dialog Title one",
        position:[50,50],
        buttons: {
          "OK": function () {
          alert("Ok clicked");
          $(this).dialog("close");
        },
       "Cancel": function () {
       alert("Cancel clicked");
      $(this).dialog("close");
      }
    }
   });
 });
 });

</script>

How to remove close button from the JQuery Dialog

Sometimes you may need the user to select the option buttons provided in the dialog box. In such situations you may need to remove the “x” close button from the title bar. For this we have to use the open event. When open event fire we are hiding the button using class name. Following code shows how to remove close button;

<script type="text/javascript">
 $(document).ready(function () {
   $("#simpledialog").click(function () {
    $("#dialogbox").dialog({
      title: "Dialog Title one",
      position: [50, 50],
 open: function(event, ui) { $(".ui-dialog-titlebar-close").hide();},
     buttons: {
     "OK": function () {
     alert("Ok clicked");
     $(this).dialog("close");
     },
     "Cancel": function () {
     alert("Cancel clicked");
     $(this).dialog("close");
    }
   }
  });
 });
 });

</script>

On the browser it will look like as follows;

There are many more options which you can use to play around and use it for your development.