在 MVC Grid 中打开编辑记录的模式弹出窗口

Question

我有一个场景，我有一个显示员工记录的网格。在每一行中都有一个编辑链接。在那个链接上，我想用该记录在模态弹出窗口中打开一个部分视图，但我不想使用 $.ajax 来填充模态弹出 div 中的部分视图。 有什么方法可以实现吗？

<table width="600px">
<tr>
    <th align="center">
        Ename
    </th>
    <th align="center">
        Sal
    </th>
    <th></th>
</tr>

<tr>
    <td align="center">
        Manish
    </td>
    <td align="center">
        20000
    </td>
    <td>
        <a href="/Home/Edit/100">Edit</a> |
    </td>
</tr>
<tr>
    <td align="center">
        Ravi
    </td>
    <td align="center">
        10000
    </td>
    <td>
        <a href="/Home/Edit/101">Edit</a> |
    </td>
</tr>
<tr>
    <td align="center">
        Dinesh
    </td>
    <td align="center">
        15000
    </td>
    <td>
        <a href="/Home/Edit/102">Edit</a> |
    </td>
</tr>
<tr>
    <td align="center">
        Vikash
    </td>
    <td align="center">
        12000
    </td>
    <td>
        <a href="/Home/Edit/103">Edit</a> |
    </td>
</tr>

Answer 1

1. 添加引导模式以显示表格。

HTML ...

<div id="alertModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Edit a Record</h4> </div> <div class="modal-body"> <table> <!-- This is where we will show the selected record --> <thead> <tr> <th align="center">Ename</th> <th align="center">Sal</th> <th><!-- Put a save button here, maybe?--></th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal"> Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

1. 复制表格行的内容并显示在引导表中

Javascript ...

. . .

/* Assuming your table has an id of 'myTable' the following code,
will trigger a click event handler when one of you MVC links are clicked */
$('#myTable').find('a[href*="/Home/Edit/"]').each(function(){

    $(this).click(function(){

        //Clone the table row which has a link that was clicked
        var $tr = $(this).parents('tr').clone();

        //Empty the contents of the table
        $('#editModal').find('table tbody').empty();

        //Add the cloned row into the table
        $('#editModal').find('table tbody').append($tr);

        //Show the modal
        $('#editModal').modal('show')

        ... //Code to update the table below the modal, up to you..

    });
});