0
我正在操縱View中的數據表。當用戶點擊數據名稱時,會彈出一個對話框讓他編輯數據。當他點擊,刪除,一個對話框會提示他確認,然後刪除該行。當他選擇創建新的行時,會彈出一個對話框讓他輸入新的信息。在所有3種情況下,動作完成後,PartialView「_Content」將重新加載內容<div />
。jQuery對話框在ajax部分視圖重新加載後不工作
這一切都工作正常,第一次,整個頁面加載後。但是在部分視圖重新加載之後(在其中一個動作之後),「編輯」對話框不再起作用,儘管其他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>
 
</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>
}
一些更多的證據:我已經添加了這些行了''
我找到了解決方案。首先,我刪除從助手的TriggerClick:
然後,我明確地把它添加到我的
<scripts>
:現在它工作正常。
來源
2013-04-01 16:03:14