While manipulating the gridview in the MVC project you need to show the modlapopup to change the details of the table you are working with.

For doing that one way could be to use the partial view for manipulation of the records in the gridview.

First we will create the view for the index page or the default page.

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

After this we will create the view which include the details for the 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>

After this we will create the partial action and the view.

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

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

        }

<h4>EmployeeModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.LabelFor(model => model.EmpId, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.EmpId, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.EmpId, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" }, id = "txtfirstname" })
        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control", id = "txtmiddlename" } })
        @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" }, id = "txtlastname" })
        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.PhoneNo, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.PhoneNo, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PhoneNo, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.msg, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.msg, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.msg, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btnSave" />
        <input type="submit" value="Close" class="btn btn-default" />
    </div>
</div>