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

Question

我有一个场景，我有一个网格，我在其中显示员工的记录。每行都有一个编辑链接。在该链接上，我想在该模式弹出窗口中打开一个部分视图，但我不想使用$ .ajax在模态弹出窗口中填充局部视图。 有没有办法实现它？

<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..

    });
});