ビューでデータのテーブルを操作しています。ユーザーがデータ名をクリックすると、ダイアログがポップアップして、データを編集できるようになります。彼が [削除] をクリックすると、ダイアログが表示され、確認を求められた後、行が削除されます。新しい行の作成を選択すると、新しい情報を入力できるダイアログが表示されます。3 つのケースすべてで、アクションが完了した後、PartialView "_Content" は content をリロードします<div />。
これは、ページ全体がロードされた後、初めて正常に機能します。ただし、PartialView がリロードされた後 (いずれかのアクションの後)、[編集] ダイアログは機能しなくなりますが、他の 2 つのダイアログは機能します。もちろん、各アクションの後にすべてをリロードするようにページをリグすることはできますが、それでは時間がかかり、Ajax の世界では意味がありません。編集ダイアログの JQueryUIHelper を部分ビューに配置すると、最初は機能しますが、2 回目はダイアログではなくページ上でフォームがインラインで開きます。JQuery と JQueryUI を直接使用してこれを試したところ、同じエラーが発生しました。私はこれを研究し、何日も実験してきました。
2013 年 4 月 1日更新:*$.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>
}
ここにパーシャルビューがあります
@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>
これが Edit フォームの Partial です。作成フォームも同様です。
@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>
}