Fatal编程技术网
  • jquery-ui/
  • Jquery ui JQuery对话框不'；ajax部分视图重新加载后无法工作

Jquery ui JQuery对话框不'；ajax部分视图重新加载后无法工作

jquery-ui jquery razor asp.net-mvc-4

Jquery ui JQuery对话框不'；ajax部分视图重新加载后无法工作,jquery-ui,jquery,razor,asp.net-mvc-4,Jquery Ui,Jquery,Razor,Asp.net Mvc 4,我正在操作视图中的数据表。当用户单击数据名称时，会弹出一个对话框，允许用户编辑数据。当他单击“删除”时，一个对话框会提示他确认，然后删除该行。当他选择创建新行时，会弹出一个对话框，允许他输入新信息。在所有3种情况下，操作完成后，PartialView“\u Content”将重新加载内容 在整个页面加载后，这些都可以在第一时间正常工作。但是在PartialView重新加载后（在其中一个操作之后），“编辑”对话框不再工作，尽管其他两个对话框工作。当然，我可以在每次操作后重新加载页面上的所有内容，但

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

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

2013年4月1日更新：我添加了一些
$。单击（）
回调链接类。在页面进行部分刷新后，它们不工作。我猜现在发生的是，当内容重新加载时，脚本将失去与内容中对象的“连接”

我通过JQueryUI帮助扩展使用MVC4、Razor和JQueryUI。视图和部分视图的代码如下所示

有什么想法吗

这是我的看法

@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>
} 

@model IEnumerable
@{
ViewBag.Title=“属性”；
}
属性
@如果（ViewBag.Error！=null）
{
@查看包。错误
}
@Html.Partial（“\u Content”，Model）
@ActionLink（“新建”、“创建”、新建{}、新建AjaxOptions{
HttpMethod=“Get”，
InsertionMode=InsertionMode.Replace，
UpdateTargetId=“createContent”
}，新的{id=“createLink”}）
@使用（Html.JQueryUI（）.Begin（newdialog（））
.标题（“确认删除”）
.自动打开（错误）
.模态（真）
.CloseOnEscape（真实）
.ConfirmAjax（“.deleteLink”、“是”、“否”，
新的AjaxSettings{Method=HttpVerbs.Post，Success=“content”}）
{
是否确实要删除此属性？
}
@使用（Html.JQueryUI（）.Begin（newdialog（））
.Title（“创建属性”）
.自动打开（错误）
.宽度（500）
.TriggerClick（“创建链接”）
.模态（真）
.CloseOnEscape（真实）
.按钮（“确定”、“保存”）
.按钮（“取消”、“关闭对话框”））
{
}
@使用（Html.JQueryUI（）.Begin）（新建对话框（new{id=“editDialog”}）
.Title（“编辑属性”）
.自动打开（错误）
.宽度（500）
.TriggerClick（“.editLink”）
.模态（真）
.CloseOnEscape（真实）
.按钮（“确定”、“保存”）
.按钮（“取消”、“关闭对话框”））
{
}
@节脚本{
var success=函数（数据）{
$（window.document.body）.html（数据）；
};
变量内容=函数（数据）{
$（“#content”）.html（数据）；
};
var closeDialog=函数（）{
$（this.dialog（'close'）；
};
var saveCreate=function（）{
$（“#createForm”）.submit（）；
$（this.dialog（'close'）；
};
var saveEdit=函数（）{
$（“#编辑表单”）.submit（）；
$（this.dialog（'close'）；
};
$（“.editLink”）。单击（函数（）{alert（“edit clicked”）；}）；
$（“.deleteLink”）。单击（函数（）{alert（“delete clicked”）；}）；
}
这是局部视图

@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 IEnumerable
@如果（ViewBag.Error！=null）
{
@查看包。错误
}
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Units）
约束
@DisplayNameFor（model=>model.Description）
 
@{int count=0；}
@foreach（模型中的var项目）
{
字符串类型=计数%2==0？“正常”：“alt”；
@ActionLink（@Html.DisplayFor（modelItem=>item.Name）.ToHtmlString（），“编辑”，
新的{id=item.AttributeLookupID}，新的AjaxOptions
{
HttpMethod=“Get”，
InsertionMode=InsertionMode.Replace，
UpdateTargetId=“editContent”
}，新的{@class=“editLink”，title=“编辑属性”}）
@DisplayFor（modelItem=>item.Units）
@if（item.AttributeConstraints！=null&&item.AttributeConstraints.Any（））
{
@Html.Raw（“X”）
}
@DisplayFor（modelItem=>item.Description）
@ActionLink（“Delete”，“Delete”，new{id=item.AttributeLookupID}，new{@class=“deleteLink”}）
计数++；
}
这是编辑表单的部分内容。创建表单类似于：

@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>
}

@model AttributeLookup
@使用（Ajax.BeginForm（“编辑”、“属性查阅”），新的AjaxOptions{
HttpMethod=“Post”，
InsertionMode=InsertionMode.Replace，
UpdateTargetId=“内容”
}，新的{id=“editForm”}）
{
@Html.ValidationSummary（true）
属性查询
@Html.HiddenFor（model=>model.AttributeLookupID）
@LabelFor（model=>model.Name）
@EditorFor（model=>model.Name）
@Html.ValidationMessageFor（model=>model.Name）
@LabelFor（model=>model.Units）
@EditorFor（model=>model.Units）
@Html.ValidationMessageFor（model=>model.Units）
@LabelFor（model=>model.Description）
@EditorFor（model=>model.Description）
@Html.ValidationMessageFor（model=>model.Description）
@LabelFor（model=>model.AttributeConstraints，“约束”）
@Html.DropDownList（“ConstraintTypeID”）
@Html.DropDownList（“SecondaryID”）
}
我想知道为什么它适用于其他两个，而不适用于编辑一个？我怀疑这与从id开始的错误有关。尝试删除id=editdialog。这可能是一个快速解决方案。如果这不起作用，继续阅读

#对话框通常由于document.ready o上的jqueryUi操作而隐藏 
  <script>
   $("body").ajaxComplete( reHideDialog())

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

@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" />
}

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