分页时启用 MVC4 Ajax 的 WebGrid Jquery 对话框不起作用

Question

我有一个启用 Ajax 的 WebGrid，在这个网格内我有一个生成 ActionLink 的列，这个 ActionLink 添加了一个“类”，所以我可以用 jQuery 捕获它并根据传递的 URL 打开一个对话框 -> 这个 URL是对返回 PartialView 的方法的调用。

这适用于第一页上的所有按钮，只要我更改分页，脚本就不会被调用，并且我的部分视图显示时没有布局。所以动作是执行的，但不是通过 javascript（我把 return false 放在哪里；所以我没有得到双重回发）。

代码：

    @Code
    Dim grid As New WebGrid(Model,
          rowsPerPage:=10,
          canSort:=True,
          canPage:=True,
          ajaxUpdateContainerId:="ajaxGridClientBookingWL",
          fieldNamePrefix:="ajaxGridClientBookingWL",
          pageFieldName:="ajaxGridClientBookingWL")
    End Code
<div id="ajaxGridClientBookingWL">

<script type="text/javascript">
    $(document).ready(function () {

        $(".popup-button").click(function () {
            //debugger;
            var href = $(".popup-button").attr('href');
            InitializeDialog($("#modPop"), href);

            $("#modPop").dialog("open");

            return false;

        });

        function InitializeDialog($element, href) {

            $element.dialog({
                autoOpen: false,
                width: 400,
                resizable: true,
                draggable: true,
                title: "Department Operation",
                modal: true,
                closeText: '[Zapri]',
                dialogClass: 'no-close normalpopup-dialog',
                closeOnEscape: true,
                open: function (event, ui) {
                    $element.load(href);
                },

                close: function () {
                    $(this).dialog('close');
                }

            });

        }
    });
</script>

<div id="modPop">
</div>

    <table cellpadding="3px">
        <tr>
            <td>@grid.GetHtml(tableStyle:="gridTable", headerStyle:="gridHeader", rowStyle:="gridRowStyle", alternatingRowStyle:="gridAlternatingRow",
 columns:=grid.Columns(
 grid.Column(header:="Datum", columnName:="DateInserted", canSort:=True, format:=@@<text>@NiRISHelpers.SpanDateToShort(item.DateInserted)</text>),
 grid.Column(header:="", format:=@@<text>@Html.ActionLink("Izberi", "KomitentBookingWLPreveril", "Pregled", New With {.area = "Komitent", .ID = item.IDrec}, New With {.class = "popup-button"})</text>)
 ))</td>
        </tr>
    </table>
</div>

您可以看到我设置了一个调试器，如果在第一页，它会捕获我的操作，但在我分页此网格时它不会。

我将所有内容都放在指定为 ajaxUpdateContainerId 的 div 中，尝试将其放在其中但似乎没有任何效果。

局部视图只是一个简单的@Html.DisplayFor(....)。

编辑 - 解决方案：

根据下面@JoeJoe87577 接受的答案，这是我的新代码（其余与上面相同，仅更改了脚本和 grid.column）：

<script type="text/javascript">

    function readyTheButton() {

        var href = $(".popup-button").attr('href');
        InitializeDialog($("#modPop"), href);

        $("#modPop").dialog("open");

        return false;
    }

    function InitializeDialog($element, href) {

        $element.dialog({
            autoOpen: false,
            width: 400,
            resizable: true,
            draggable: true,
            title: "Department Operation",
            modal: true,
            closeText: '[Zapri]',
            dialogClass: 'no-close normalpopup-dialog',
            closeOnEscape: true,
            open: function (event, ui) {
                $element.load(href);
            },

            close: function () {
                $(this).dialog('close');
            }

        });
    }
    </script>

还有grid.Column：

grid.Column(
  header:="", 
  format:=@@<text>@Ajax.ActionLink(
      "Izberi", 
      "KomitentBookingWLPreveril", 
      "Pregled", 
      New With {.area = "Komitent", .ID = item.IDrec}, 
      New AjaxOptions With {
        .HttpMethod = "GET", 
        .InsertionMode = InsertionMode.Replace, 
        .UpdateTargetId = "modPop", 
        .OnBegin = "readyTheButton()"})</text>)

Answer 1

很简单，$(document).ready(function () { }); 事件仅在页面加载完毕且一切就绪时触发。但是当您对网格进行分页时，所有按钮都由 ajax 重新加载，并且没有一个附加了 click 事件。

第一个解决方案： 在文档中查找网格的分页事件（通常每个网格都有这样的事件），每次网格更改页面时将点击事件附加到您的操作链接。

第二个解决方案： 将onclick 属性应用到服务器上的actionlinks，这个onclick 可以导致你的InitializeDialog 函数。

（编辑）补充：您可以尝试不使用 javascript 事件处理程序，而是使用内置的 Ajax Actionlink。这将使您的页面保持干净，并且您不必处理 javascript 事件处理。