jquery选项卡在对话框内不能作为局部视图工作

时间:2012-06-26 22:19:29

标签: jquery-ui asp.net-mvc-partialview

我正在打开一个包含以下内容的对话框: 这是我的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);
    }

这是Version Details.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,但是标签不起作用。部分视图中的数据表_RecordHistory和_DetailsDialog.cshtml中的_RecordLog也不起作用。

1 个答案:

答案 0 :(得分:0)

我有类似的问题 - 并没有找到解决方案。我去了easytabs插件(http://os.alfajango.com/easytabs/)。它就像一个魅力,我发现它易于使用和适应。