Question

我有一个支持Ajax的WebGrid，在这个网格中我有一个生成ActionLink的列，这个ActionLink添加了一个“类”，所以我可以用jQuery捕获它并根据传递的URL打开一个Dialog - ＆gt;此URL是对返回PartialView的方法的调用。

这适用于第一页上的所有按钮，一旦我更改了分页，脚本就不会被调用，我的局部视图会在没有布局的情况下显示。所以动作是执行但不是通过javascript（我把返回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>

你可以看到我设置了一个调试器，如果在第一页上，它会捕获我的动作，当我打开这个网格时，它不会。

我将所有内容都放在div中，该div被指定为ajaxUpdateContainerId，试图把它放在它之外但似乎没什么用。

部分视图只是一个简单的@ 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重新加载，而其中没有按钮会附加点击事件。

1fst解决方案：查看网格分页事件的文档（通常每个网格都有这样的事件），每次网格更改页面时都将click事件附加到actionlinks。

第二解决方案：将onclick属性应用于服务器上的操作链接，此onclick可导致您的InitializeDialog功能。

（编辑）添加：您可以尝试不使用javascript事件处理程序，但内置Ajax Actionlink。这样可以保持您的网页清洁，而且您不必处理javascript事件处理。

在分页时，MVC4 Ajax启用了WebGrid Jquery对话框

1 个答案: