次のようなダイアログを開いています: This is my Appliation Details.cshmtl
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".display tr:odd").addClass("odd");
$(".display tr:even").addClass("even");
//modal popup
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 200,
width: 400,
modal: true,
buttons: {
"Delete": function () {
$(this).dialog("close");
$('#deleteApplication').submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$(".deleteLink").click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: "90%",
height: "500",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
<div class="tabset">
<ul class="tab_labels">
<li><span>Details</span></li>
<li><span>Versions</span></li>
<li><span>History</span></li>
<li><span>Log</span></li>
</ul>
<div class="tab_content">
<table id="detailsView" class="display">
<tbody>
<tr>
<td>@Html.LabelFor(model => model.ApplicationName)</td>
<td>@Html.DisplayFor(model => model.ApplicationName)</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.Description)</td>
<td>@Html.DisplayFor(model => model.Description)</td>
</tr>
</tbody>
</table>
</div>
<div class="tab_content">
@Html.Partial("_Versions", versions, new ViewDataDictionary {{ "applicationId", Model.ApplicationId}})
</div>
<div class="tab_content">
@Html.Partial("_RecordHistory", history)
</div>
<div class="tab_content">
@Html.Partial("_RecordLog", log)
</div>
</div>
<br />
<div class="button_wrapper_center">
<a href="@Url.Action("Index", "Application")" class="button_black_medium"><span style="white-space:nowrap;">Return to List</span></a>
</div>
<div id="dialog-confirm" title="Delete the item?" style="display:none" >
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
</div>
部分ビュー _Versions には、ダイアログを開くためのリンクが含まれています。これは _Versions.cshtml です。
@model IEnumerable<WebDevelopment.SqlData.Version>
@{
var applicationId = ViewData["applicationId"];
}
<script type="text/javascript">
$(document).ready(function () {
var recordId;
$(".deleteVersionLink").click(function (e) {
e.preventDefault();
var frm = $(this);
recordId = frm.attr("id");
$("#dialog-confirmVersion").dialog("open");
});
$("#dialog-confirmVersion").dialog({
autoOpen: false,
resizable: false,
height: 200,
width: 400,
modal: true,
buttons: {
"Delete": function () {
$("#deleteVersion" + recordId).submit();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#versions').dataTable({
"bFilter": false,
"bPaginate": false,
"bInfo": false,
"bSort": false
});
});
</script>
<table>
<tr>
<td>
<a href="@Url.Action("Create", "Version", new { applicationId = applicationId })" class="button_black_medium"><span style="white-space:nowrap;">Create New</span></a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="versions">
<thead>
<tr>
<th>
@Html.LabelFor(p => Model.FirstOrDefault().VersionNumber)
</th>
<th>
@Html.LabelFor(p => Model.FirstOrDefault().ReleaseDate)
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.ActionLink(item.VersionNumber, "Details", "Version", new { id = item.VersionId }, new { @class = "openDialog", data_dialog_id = "detailsDialog", data_dialog_title = "Version Details" })
</td>
<td>
@Html.DisplayFor(modelItem => item.ReleaseDate)
</td>
<td>
@Html.ActionLink("Edit", "Edit", "Version", new { id = item.VersionId }, null) |
@Html.ActionLink("Delete", "DeleteConfirmed", "Version", new { id = item.VersionId }, new { @class = "deleteVersionLink", @id = item.VersionId })
@using (Html.BeginForm("DeleteConfirmed", "Version", new { id = item.VersionId }, FormMethod.Post, new { @id = "deleteVersion" + item.VersionId })){}
</td>
</tr>
}
</tbody>
</table>
<div id="dialog-confirmVersion" title="Delete the item?" style="display:none" >
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
</div>
バージョンコントローラーはこちら
public ActionResult Details(int id)
{
ViewBag.History = recordHistoryRepository.GetRecordHistory("ConnectionString", "Version", id);
ViewBag.Log = recordLogRepository.GetRecordLog("ConnectionString", "Version", id);
var version = versionRepository.GetVersionById(id);
if (Request.IsAjaxRequest())
{
return PartialView("_DetailsDialog", version);
}
return View(version);
}
ここにバージョンの詳細.cshtmlがあります
@model WebDevelopment.SqlData.Version
@Html.Partial("_DetailsDialog")
ここに_DetailsDialogがあります
@model WebDevelopment.SqlData.Version
@{
var history = ViewBag.History as IEnumerable<WebDevelopment.SqlData.RecordHistory>;
var log = ViewBag.Log as IEnumerable<WebDevelopment.SqlData.RecordLog>;
}
<table width="100%">
<tr>
<td><h1 class="first">@Html.DisplayTextFor(_ => Model.Application.ApplicationName)</h1></td>
</tr>
</table>
<div class="tabset">
<ul class="tab_labels">
<li><span>Details</span></li>
<li><span>History</span></li>
<li><span>Log</span></li>
</ul>
<div class="tab_content">
<table id="detailsDialogView" class="display">
<tbody>
<tr>
<td>@Html.LabelFor(model => model.VersionNumber)</td>
<td>@Html.DisplayFor(model => model.VersionNumber)</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.ReleaseDate)</td>
<td>@Html.DisplayFor(model => model.ReleaseDate)</td>
</tr>
</tbody>
</table>
</div>
<div class="tab_content">
@Html.Partial("_RecordHistory", history)
</div>
<div class="tab_content">
@Html.Partial("_RecordLog", log)
</div>
</div>
ダイアログが開き、firebug に _DetailsDialog ページの html が表示されますが、タブが機能していません。_DetailsDialog.cshtml の部分ビュー _RecordHistory および _RecordLog のデータ テーブルも機能しません。