jQuery對話框在ajax部分視圖重新加載後不工作

Question

我正在操縱View中的數據表。當用戶點擊數據名稱時，會彈出一個對話框讓他編輯數據。當他點擊，刪除，一個對話框會提示他確認，然後刪除該行。當他選擇創建新的行時，會彈出一個對話框讓他輸入新的信息。在所有3種情況下，動作完成後，PartialView「_Content」將重新加載內容<div />。

這一切都工作正常，第一次，整個頁面加載後。但是在部分視圖重新加載之後（在其中一個動作之後），「編輯」對話框不再起作用，儘管其他2個可以。當然，我可以在頁面重新加載每一個動作之後的所有內容，但這樣做比較慢，在Ajax世界中沒有意義。如果我將編輯對話框的JQueryUIHelper放在局部視圖中，它又是第一次，但是第二次，表單在頁面上內聯打開，而不是在對話框中打開。我也嘗試過直接使用JQuery和JQueryUI，並得到相同的錯誤。我一直在研究這一點，並試驗了幾天。

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

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.