无需完全刷新页面MVC 4就可以异步更新数据库和Webgrid一次

Question

我在 MVC4 应用程序的 webgrid 中呈现了以下 HTML。

<tr class="webgrid-row-style">
   <td class="webgrid-column-style">
<span class="activate"><label id="lblMTPrinterID1">MT1</label></span>
<span class="deactivate"><label id="lblMTPrinterID2">MT1</label></span>
  </td>
  <td class="webgrid-column-style">
<span class="activate"><label id="lblNTPrinterID1">NT1</label></span>
<span class="deactivate"><label id="lblNTPrinterID2">NT1</label></span>
  </td>
  <td class="webgrid-active-column-style">
<span class="activate selector"><label id="lblActive1">N</label></span>
<span class="deactivate selector"><label id="lblActive2">N</label></span>
  </td>
  <td class="webgrid-column-style">
<button class="activate edit-user">Activate</button>
<button class="deactivate edit-user">Deactivate</button>
  </td>
</tr>
<tr class="webgrid-alternating-row">
  <td class="webgrid-column-style">
<span class="activate"><label id="lblMTPrinterID1">MT2</label></span>
<span class="deactivate"><label id="lblMTPrinterID2">MT2</label></span>
  </td>
  <td class="webgrid-column-style">
<span class="activate"><label id="lblNTPrinterID1">NT2</label></span>
<span class="deactivate"><label id="lblNTPrinterID2">NT2</label></span>
   </td>
   <td class="webgrid-active-column-style">
<span class="activate selector"><label id="lblActive1">Y</label></span>
<span class="deactivate selector"><label id="lblActive2">Y</label></span>
   </td>
   <td class="webgrid-column-style">
<button class="activate edit-user">Activate</button>
<button class="deactivate edit-user">Deactivate</button>
  </td>
</tr>

我正在使用以下 jQuery 代码成功激活或停用行元素。然后我使用 AJAX 更新底层数据库表并刷新 webgrid。

$(function () {
$('tr.webgrid-row-style, tr.webgrid-alternating-row').each(function () {
    var Active = $(this).find("#lblActive1").text();
    var MTPrinterID = $(this).find("#lblMTPrinterID1").text();
    var NTPrinterID = $(this).find("#lblNTPrinterID1").text();
    if (Active == "Y") {
        $(this).find('.activate').hide();
    }
    else {
        $(this).find('.deactivate').hide();
    }

    $(this).find('.edit-user').on('click', function updateWebGrid() {
            var printermapping =
            {
                "MTPrinterID": MTPrinterID,
                "NTPrinterID": NTPrinterID,
                "Active": "N"
            };
            $.ajax({
                url: '/Home/UpdatePrinterMapping/',
                data: JSON.stringify(printermapping),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (response) {
                    $("#gridContent").load('/Home/ #gridContent', function () {
                        $('tr.webgrid-row-style, tr.webgrid-alternating-row').each(function () {
                            var Active = $(this).find("#lblActive1").text();
                            if (Active == "Y") {
                                $(this).find('.activate').hide();
                            }
                            else {
                                $(this).find('.deactivate').hide();
                            }
                        });
                    });
                }
            });
        }
.
.

问题是我只能使用这种方法执行一次。使用 .load 函数刷新一次 webgrid 后，没有任何内容链接到由 edit-user 类表示的按钮的单击函数。因此，如果不先刷新整个页面（这违背了目的），我就无法再次更新数据库和 webgrid。我想我必须对函数 updateWebGrid() 进行某种递归调用。我已经尝试了几件事，但到目前为止没有成功。有人可以帮忙吗？谢谢。

Answer 1

问题是，您将事件处理程序绑定到 .edit-user 按钮，但在 load 方法完成并重新填充 #gridContent 的 html 之后，已经有一个 new 按钮，并且它没有任何注册的事件处理程序。

解决方案是将处理程序绑定到顶级元素，该元素不会被删除或重新创建。例如：

<script>
    function showHideButtons(grid) {
        grid.find('tr.webgrid-row-style, tr.webgrid-alternating-row').each(function() {
            var th = $(this);
            var Active = th.find("#lblActive1").text();
            if(Active == "Y") {
                th.find('.activate').hide();
            } else {
                th.find('.deactivate').hide();
            }
        });
    }

    $(function() {
        var gridContent = $('#grid-content');
        showHideButtons(gridContent);    

        gridContent.on('click', '.edit-user', function() {
            var tableRow = $(this).closest('tr'); //find table row, that contains clicked button
            var printerMapping = {
                Active: tableRow.find("#lblActive1").text(),
                MTPrinterID: tableRow.find("#lblMTPrinterID1").text(),
                NTPrinterID: tableRow.find("#lblNTPrinterID1").text()
            };

            $.ajax({
                url: '/Home/UpdatePrinterMapping/',
                data: JSON.stringify(printermapping),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function(response) {
                    gridContent.load('/Home/#gridContent', function() {
                        showHideButtons(gridContent);
                    });
                }
            });
        });
    });
</script>