ASP.NET MVC: Displaying Partial Views using jQuery UI Dialog Boxes

Tweet

One of my clients had a requirement in an ASP.NET MVC 3 project where they wanted to load a View in a Modal Dialog that can then be moved around. I suggested a solution where the jQuery UI Dialog can be used to load an MVC Partial View.

The jQuery UI Dialog object provides properties like width, resizable, draggable etc. to customize the dialog layout and behavior. This object provides functions like ‘open’ and ‘close’ where you can write script so that on ‘open’ function, the Partial View can be loaded in it.

For this article, I am using Department Table and using ADO.NET EF. The Model is created in MVC 3 application as shown below:



Step 1: Create a new MVC 3 project, and in its Model folder, add the Department Table using ADO.NET EF. The Entities class name for the ADONET EF will be CompanyEntities.

Step 2: Right click on the Controller folder and add a Department Controller in it. Write the following code in the Department controller’s constructor and the Index action method.

CompanyEntities objContext;
public DepartmentController()
{
     objContext = new CompanyEntities();
     objDeptCollection = new DepartmentCollection();
}


//

// GET: /Department/


public ActionResult Index()
{
    var Departments = objContext.Departments.ToList();
    return View(Departments); 


}

Step 3: Add the Index View in application by right clicking on Index method and select Model class as Department and the Scaffold Template as “List”. You will get the Department subfolder in Views folder and Index.cshtml in it.

Step 4: Right click on the Department subfolder and add Strongly Typed partial View in it with Scaffold Template as ‘Create’ and Model class as ‘Department’ as shown  below:



Step 5: The Create method in the Department controller class is as follows:

public ActionResult Create()
{
    Department objDept = new Department(); 
    return PartialView("CreateDepartment",objDept); 
}



[HttpPost]
public ActionResult Create(Department objDept)
{
    try
    {
        objContext.AddToDepartments(objDept);
        objContext.SaveChanges();
        return RedirectToAction("Index");
    }


    catch (Exception)
    {
        return PartialView("CreateDepartment", objDept); 
    }

}

Note that the create method with Http Get returns the Partial View created in the Previous Task.

Step 6: In the Index.cshtml, add a Html button as shown below:

<button id="btnCreate" value="Create" 
    style="width:90px;height:50px">Create
</button>

Step 7: Add the html <div> tag in the Index.cshtml as shown below:

<div id="departmentdialog" title="Add Department" 
style="overflow: hidden;background-color:Yellow;
border-bottom-width:5;background-color:Red"></div>

Step 8: Add the following script in the Index.cshtml page. This will create an object of Dialog and the partial view will be displayed in it by using its open method as shown below:

<script type="text/javascript" language="javascript">
$(document).ready(function () {


    $("#btnCreate").click(function () {
        InitializeDialog($("#departmentdialog"));

       $("#departmentdialog").dialog("open");
    });



    //Method to Initialize the DialogBox
    function InitializeDialog($element) {


        $element.dialog({
            autoOpen: false,
            width: 400,
            resizable: true,
            draggable: true,
            title: "Department Operation",
            model: true,
            show: 'slide',
            closeText: 'x',
            dialogClass: 'alert',
            closeOnEscape: true,
            open: function (event, ui) {
                //Load the Partial View Here using Controller and Action
                $element.load('/Department/Create');
            },

            close: function () {
                $(this).dialog('close');
            }

        });

    }
});


</script>

Note: The above code shows that the ‘InitializeDialog’ script method defines ‘dialog’ object for the element id passed to the method. The Open function of dialog object makes call to the ‘load’ method of the element (here in case, HTML <div> of name ‘departmentdialog’), this takes the Department Controllers ‘Create’ action.

Step 9: Run the application and navigate to the Index of the Department controller. From the Index View, click on the ‘Create’ button. The partial View Rendered will be as below:




Conclusion:

Partial Views in MVC can be used as independent View modules to create either a web part like behavior or as we saw above, for Modal data representations.

Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet