Question

我一直在使用文章ASP.NET MVC: Ajax Dialog Form Using jQuery UI中的代码，它主要起作用。我创建了一个列出记录的网格，每个记录都有一个链接，用于显示一个对话框来编辑记录。记录更改后，按下保存按钮，使用ajax更新网格。这很好用，但问题出现在第一个记录保存和网格的ajax刷新之后。如果再次单击编辑记录的链接，则不会出现对话框，仅显示部分视图。我猜，但似乎我试图再次提起的部分视图无法识别父容器。有什么想法吗？

显示包含网格的部分视图：

<div id="VehicleHold">
  @Html.Partial("_VehicleHold")
</div>

构成对话框的部分视图：

@using VehicleWeb.MVCHelpers

@{
    int agreementNumber = 0;
    var countData = ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>;

    if (countData != null)
    {
        if (countData.Count() > 0)
        {
            agreementNumber = (int)countData.DefaultIfEmpty().First().AgreementNumber;

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
              <thead>
              <tr class="table-header">
                  <th>Edit</th>
                  <th>Delete</th>
                  <th>
                      Type
                  </th>
                  <th>
                      Year
                  </th>
                  <th>
                      Make/Model
                  </th>
                  <th>
                      Plate
                  </th>
                  <th>
                      VIN
                  </th>
                  <th>
                      Num Pass
                  </th>
              </tr>
            </thead>
              <tbody>
           @{
               foreach (var item in (ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>))
               {
                   <tr>
                       <td>
                           @Html.ImageDialogLink("UpdateVehicleHold", "Exposure", new { id = item.RID }, "Edit Hold Vehicle", "VehicleHold", Url.Action("RefreshVehicleHold/" + agreementNumber), Html.ResolveUrl("~/pics/edit-button.png"), "Edit Hold Vehicle", "600", "800", new { style = "text-decoration:none;" }, new { style = "text-decoration:none; border-style: none;" })
                       </td>
                       <td>
                            <div title="Vehicle Year">@item.EditType.ToString()</div>
                       </td>
                       <td>
                            <div title="Vehicle Year">@item.AutoYear.ToString()</div>
                       </td>
                       <td>
                           <div title="Vehicle Make/Model">@item.MakeModel.ToString()</div>
                       </td>
                       <td>
                           <div title="Vehicle Plate Number">@item.DistVehNo.ToString()</div>
                       </td>
                       <td>
                           <div title="Vehicle VIN">@item.IDNumber.ToString()</div>
                       </td>
                       <td>
                           <div title="Number Of Passengers">@item.NumOfPassengers.ToString()</div>
                       </td>
                   </tr>
               }
          }
            </tbody>
          </table>
        }
    }
}

我在这里提问时很新，所以如果您需要查看更多代码，请告诉我。

编辑：我不知道jQuery文件的位置是否对此很重要。我今天一直在搞乱这个职位，并没有找到成功。我在主窗体上有jQuery文件用于连接对话框。在AJAX刷新DIV之后，编辑链接似乎失去了关于任何父代码的所有知识。我的最新理论是它可能与这段代码有关。可能是因为它处于准备状态吗？

$(document).ready(function () {
    $.ajaxSetup({
        cache: false
    });

    // Wire up the click event of any current or future dialog links
    $('.dialogLink').on('click', function () {
        var element = $(this);

        // Retrieve values from the HTML5 data attributes of the link        
        var dialogTitle = element.attr('data-dialog-title');
        var dialogWidth = element.attr('data-dialog-width');
        var dialogHeight = element.attr('data-dialog-height');
        var updateTargetId = '#' + element.attr('data-update-target-id');
        var updateUrl = element.attr('data-update-url');

        // Generate a unique id for the dialog div
        var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
        var dialogDiv = "<div id='" + dialogId + "'></div>";

        // Load the form into the dialog div
        $(dialogDiv).load(this.href, function () {
            $(this).dialog({
                modal: true,
                resizable: false,
                title: dialogTitle,
                closeOnEscape: false,
                width: dialogWidth,
                height: dialogHeight,
                buttons: [
                    {
                        text: "Save",
                        icons: { primary: "ui-icon-check" },
                        click: function () {
                            // Manually submit the form                        
                            var form = $('form', this);
                            if ($(form).valid()) {
                                $(form).submit();
                                $(this).dialog('close');
                            }
                        }},
                        {
                            text: "Cancel",
                            icons: { primary: "ui-icon-closethick" },
                            click: function () {
                                $(this).dialog('close');
                                $(this).empty();
                            }
                        }]
        });

            // Enable client side validation
            $.validator.unobtrusive.parse(this);

            // Setup the ajax submit logic
            wireUpForm(this, updateTargetId, updateUrl);
        });
        return false;
    });
});

function wireUpForm(dialog, updateTargetId, updateUrl) {
    $('form', dialog).submit(function () {

        // Do not submit if the form
        // does not pass client side validation
        if (!$(this).valid()) {
            return false;
        }

        // Client side validation passed, submit the form
        // using the jQuery.ajax form
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                // Check whether the post was successful
                if (result.success) {
                    // Close the dialog 

                    $(dialog).dialog('close');
                    $(dialog).empty();

                    // Reload the updated data in the target div
                    $(updateTargetId).load(updateUrl);
                } else {
                    alert('failure');
                    // Reload the dialog to show model errors                    
                    $(dialog).html(result);

                    // Enable client side validation
                    $.validator.unobtrusive.parse(dialog);

                    // Setup the ajax submit logic
                    wireUpForm(dialog, updateTargetId, updateUrl);
                }
            }
        });
        return false;
    });
}

Answer 1

有些时候，当我们将脚本保留在主视图中时它会首次绑定事件但在回发后无法工作，尝试在局部视图中移动脚本，如果它不起作用共享一些更多的代码，将会看到什么是错误的

MVC对话框保存刷新表停止工作

1 个答案: