While working in MVC, sometimes you need to load the partial view but you want to load it at the run time.

In this case, you need to do this thing by making the JQuery function call.

EmployeeRepository EmpRep = null;
        EmployeeModel EmpMod = null;
        public ActionResult Index()
        {
            EmpRep = new EmployeeRepository();
            List<EmployeeModel> EmpMod = new List<EmployeeModel>();
            EmpMod = EmpRep.GetDetails().ToList();
            return View(EmpMod);
        }

We have made a action Index that will be used to display the details of the employee.

Inside this we will load the partial view inside modal popup.

@model IEnumerable<Modal_PopUp_Basic.Models.EmployeeModel>

@{
    ViewBag.Title = "Index";
}





<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EmpId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MiddleName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PhoneNo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.msg)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.EmpId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MiddleName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PhoneNo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.msg)
            </td>
            <td>
                <a class="lnkEdit" id='@item.EmpId'>Edit</a> | |
                @Html.ActionLink("Details", "Details", new { id = item.EmpId }, new { @class = "lnkDetail" }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.EmpId }, new { @class = "lnkDelete" })
            </td>
        </tr>
    }

</table>


<div id="dialog-alert" style="display: none">
    <p>
        @TempData["msg"]!
    </p>
</div>

<div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete?
    </p>
</div>




<div id="dialog-edit" style="display: none">



</div>




<div id="dialog-detail" style="display: none">

</div>


<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script>
    $(document).ready(function () {
        var url = "";
        $("#dialog-alert").dialog({
            autoOpen: false,
            resizable: false,
            height: 170,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");

                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        if ('@TempData["msg"]' != "") {
            $("#dialog-alert").dialog('open');
        }

        $("#dialog-edit").dialog({
            title: 'Create User',
            autoOpen: false,
            resizable: false,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            }
           

        });

        $("#dialog-confirm").dialog({
            autoOpen: false,
            resizable: false,
            height: 170,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();

            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    window.location.href = url;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#dialog-detail").dialog({
            title: 'View User',
            autoOpen: false,
            resizable: false,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#lnkCreate").live("click", function (e) {
            //e.preventDefault(); //use this or return false
           // url = $(this).attr('href');
            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".lnkEdit").live("click", function (e) {
            var id = $(this).attr('id');
             url = '@Url.Content("~/Home/_Edit")/' + id;
            $("#dialog-edit").dialog('open');
            $.get(url,function (result) {
                alert(result);
                 $("#dialog-edit").html(result);
            });

            // e.preventDefault(); use this or return false
            $(".ui-dialog-title").html("Update User");
            $("#dialog-edit").dialog('open');
            return false;
        });




        $(".lnkDelete").live("click", function (e) {
            // e.preventDefault(); use this or return false
            url = $(this).attr('href');
            $("#dialog-confirm").dialog('open');

            return false;
        });



        $(".lnkDetail").live("click", function (e) {
            // e.preventDefault(); use this or return false
            url = $(this).attr('href');
            $("#dialog-detail").dialog('open');

            return false;
        });



        $("#btncancel").live("click", function (e) {
            $("#dialog-edit").dialog("close");
            return false;
        });
    });
</script>

So we will fill the partial view when edit button is clicked.

 [HttpGet]
        public ActionResult _Edit(int id = 0)
        {

            EmpMod = new EmployeeModel();
            EmpMod.EmpId = id;
            EmpRep = new EmployeeRepository();
            EmpMod = EmpRep.EditDetails(EmpMod);
            return PartialView("_Edit", EmpMod);

        }