How to show partial view as dialog using jquery dialog in asp.net mvc 5

In this tutorial I will show you how can we show partial view as dialog on any button click using jquery dialog.

First we need to have Jquery UI javascript & CSS files in your project & reference in our view.

We need to have one DIV in view where we have button which on click we will call partial view

Bellow is HTML which have added to my “Views/Home/Index.cshtml”

<button class="btn-dialog"> Click Me </button>
<div id="partialDialogDiv"></div>

We also need one partial view, I have created partial view in “Views/Home” named “_PartialDialog.cshtml”

Also we need to create Action which will return PartialView. Here I have created Action in HomeController as follows

public ActionResult PartialDialog()
{
    return PartialView();
}

Bellow is jquery which need to be added in Index.cshtml

   <script>
        $(document).ready(function () {
            $('.btn-dialog').on('click', function () {
                $("#partialDialogDiv").dialog({
                autoOpen: true,
                resizable: false,
                title: 'Partial Dialog',
                modal: true,
                height: 330,
                width: 900,
                draggable: false,
                open: function () {
                    $(this).load('@Url.Action("PartialDialog", "Home")');
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                },
                buttons: [
                {
                    text: "OK",
                    "class": 'btn btn-primary',
                    click: function () {
                        // OK button click event
                    }
                }, {
                    text: "Cancel",
                    "class": 'btn btn-default',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
                ],
            });
                $("#advancedSearchDialog").dialog('open');
                return false;
                });
        });
    </script>

admin