Question

我在视图中操作数据表。当用户单击数据名称时，会弹出一个对话框以允许他编辑数据。当他点击，删除，一个对话框提示他确认，然后删除该行。当他选择创建新行时，会弹出一个对话框，允许他输入新信息。在所有3种情况下，操作完成后，PartialView“_Content”会重新加载内容<div />。

在整个页面加载后，这一切都能正常工作。但是在PartialView重新加载之后（在其中一个动作之后），“编辑”对话框不再有效，尽管另外两个做了。当然，我可以在每个动作之后重新加载页面，但这样做速度较慢，在Ajax世界中没有意义。如果我将JQueryUIHelper放在部分视图中的编辑对话框中，它再次工作，但第二次，表单在页面上而不是在对话框中打开。我也直接尝试使用JQuery和JQueryUI并得到了同样的错误。我一直在研究这个并试验好几天。

更新4/1/13：* 我在链接类中添加了一些$.click()回调。页面执行部分刷新后它们不起作用。我想正在发生的事情是，当内容重新加载时，脚本会丢失与内容 <div>中对象的“连接”。

我通过JQueryUIHelper扩展使用MVC4，Razor和JQueryUI。 View和PartialView的代码如下所示。

有什么想法吗？

这是我的观点

@model IEnumerable<AttributeLookup>
@{
ViewBag.Title = "Attributes";
}
<h2>
Attributes</h2>
@if (ViewBag.Error != null)
{
<div class="message-error">@ViewBag.Error</div>
}
<div id="content">
   @Html.Partial("_Content", Model)
</div>

<div style="padding-top: 12px;">
@Ajax.ActionLink("New", "Create", new { }, new AjaxOptions {
    HttpMethod = "Get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "createContent"
}, new { id = "createLink" })
</div>

@using (Html.JQueryUI().Begin(new Dialog()
.Title("Confirm Delete")
.AutoOpen(false)
.Modal(true)
.CloseOnEscape(true)
.ConfirmAjax(".deleteLink", "Yes", "No",
new AjaxSettings { Method = HttpVerbs.Post, Success = "content" })))
{
<div>
    Are you sure you want to delete this attribute?
</div>
}
@using (Html.JQueryUI().Begin(new Dialog()
.Title("Create Attribute")
.AutoOpen(false)
.Width(500)
.TriggerClick("#createLink")
.Modal(true)
.CloseOnEscape(true)
.Button("OK", "save")
.Button("Cancel", "closeDialog")))
{
<div id="createContent" />
}
@using (Html.JQueryUI().Begin(new Dialog(new {id = "editDialog"})
.Title("Edit Attribute")
.AutoOpen(false)
.Width(500)
.TriggerClick(".editLink")
.Modal(true)
.CloseOnEscape(true)
.Button("OK", "save")
.Button("Cancel", "closeDialog")))
{
<div id="editContent" />
}

@section Scripts {
   <script type="text/javascript">

  var success = function(data) {
     $(window.document.body).html(data);
  };

  var content = function(data) {
     $("#content").html(data);
  };

  var closeDialog = function() {
     $(this).dialog('close');
  };

      var saveCreate = function() {
         $("#createForm").submit();
         $(this).dialog('close');
      };

      var saveEdit = function() {
         $("#editForm").submit();
         $(this).dialog('close');
      };

      $(".editLink").click(function () { alert("edit clicked"); });
      $(".deleteLink").click(function () { alert("delete clicked"); });

   </script>
}

这是PartialView

@model IEnumerable<AttributeLookup>
@if (ViewBag.Error != null)
{
<div class="message-error">@ViewBag.Error</div>
}
<table id="attribute">
<tbody>
    <tr>
    <th style="width: 250px;">
        @Html.DisplayNameFor(model => model.Name)
    </th>
    <th style="width: 50px;">
        @Html.DisplayNameFor(model => model.Units)
    </th>
    <th style="width: 30px;">
        Contrained
    </th>
    <th style="width: 400px;">
        @Html.DisplayNameFor(model => model.Description)
    </th>
    <th>
        &#160;
    </th>
    </tr>
    @{ int count = 0; }
    @foreach (var item in Model)
    {
    string type = count % 2 == 0 ? "normal" : "alt";
    <tr class="@type">
        <td>
        @Ajax.ActionLink(@Html.DisplayFor(modelItem => item.Name).ToHtmlString(), "Edit",
        new { id = item.AttributeLookupID }, new AjaxOptions
        {
            HttpMethod = "Get",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "editContent"
        }, new { @class = "editLink", title = "Edit attribute" })
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.Units)
        </td>
        <td>
        @if (item.AttributeConstraints != null && item.AttributeConstraints.Any())
        {
            @Html.Raw("X")
        }
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
        @Html.ActionLink("Delete", "Delete", new { id = item.AttributeLookupID }, new { @class = "deleteLink" })
        </td>
    </tr>
        count++;
    }
</tbody>
</table>

这是编辑表单的部分。创建表单类似：

@model AttributeLookup
@using (Ajax.BeginForm("Edit", "AttributeLookup", new AjaxOptions {
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "content"
}, new {id = "editForm"}))
{
@Html.ValidationSummary(true)

<fieldset>
    <legend>AttributeLookup</legend>
    @Html.HiddenFor(model => model.AttributeLookupID)
    <div class="editor-label">
    @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div class="editor-label">
    @Html.LabelFor(model => model.Units)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Units)
    @Html.ValidationMessageFor(model => model.Units)
    </div>
    <div class="editor-label">
    @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Description)
    @Html.ValidationMessageFor(model => model.Description)
    </div>
    <div class="editor-label">
    @Html.LabelFor(model => model.AttributeConstraints, "Constraint")
    </div>
    <div class="editor-field">
    @Html.DropDownList("ConstraintTypeID")
    @Html.DropDownList("SecondaryID")
    </div>
</fieldset>
}

Answer 1

我找到了解决方案。首先，我从Helper中删除了TriggerClick：

@using (Html.JQueryUI().Begin(new Dialog(new {@id = "editDialog"})
    .Title("Edit Attribute")
    .AutoOpen(false)
    .Width(500)
    // deleted --> .TriggerClick(".editLink")
    .Modal(true)
    .CloseOnEscape(true)
    .Button("OK", "saveEdit")
    .Button("Cancel", "closeDialog")))
{
    <div id="editContent" />
}

然后我明确地将其添加到我的<scripts>：

$("body").on('click', ".editLink", function () { $("#editDialog").dialog("open"); });

现在工作正常。

Answer 2

我想知道为什么它适用于其他两个，但不是编辑的？我怀疑它必须从id开始出错。尝试带走id = editdialog。这可能是一个quickfix。如果这不起作用，请继续阅读。

#dialog通常会隐藏在document.ready或后台页面加载的jqueryUi事件中。

我不确定它何时发生，但你想在重载发生后重复这些步骤。在文档的末尾，未重新加载的部分会执行类似......

的操作

  <script>
   $("body").ajaxComplete( reHideDialog())

     function reHideDialog(){
            $("#dialog").css('display','none');
     }
 </script>

当他们点击编辑链接时，jqueryui会自动将#dialog css显示设置为display：absolute，因为它会在弹出窗口中呈现。

在ajax部分视图重新加载后，JQuery对话框不起作用

2 个答案: