Question

我对如何在jquery UI Dialog窗口中打开局部视图感到有些困惑。我是用简单的Dialog做的，但出于各种原因，我决定朝着不同的方向前进。所有在线教程都只是打开<div></div>，这很好，但是我需要打开一个完整的ascx文件... BTW我计划在这个局部视图中使用jquery验证和jquery UI Datepickers。

你们知道的任何例子或教程？

谢谢，如果你们需要，我可以提供一些示例代码。

更新：更多详情和代码 这确实是MVC局部视图。我之前尝试过的一些代码遵循这句话......

    $(document).ready(function () {

    var $dialog = $('<div></div>')
    .load('<%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%>')
    .dialog({
        autoOpen: false,
        title: 'Edit Patient ACO information'
    });
    });

那是我的jQuery代码......

    %><%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%><%

那就是EditTemplate是视图的名称（如果是javascript请求则会加载部分视图，如果不是，则加载一个reqular视图）

更多代码，以帮助其他人了解正在发生的事情

    <script type="text/javascript">

$(function () {

    $('a.tempDlg').live("click", function(event) {loadDialog(this, event, '#edit-set');});
    $('a.AddPatDlg').live("click", function(event) {loadDialog(this, event, '#addPat');});
    $('a.AcoData').live("click", function(event) {loadDialog(this, event, '#addEncounter');});


}); /* end document.ready() */

function loadDialog(tag, event, target) {
    event.preventDefault();
    var $loading = $('<img src="<%=ResolveClientUrl("~/images/ajaxLoading.gif")%>" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    var $dialog = $('<div></div>');
    $dialog.empty();
    $dialog
        .append($loading)
        .load($url)
                .dialog({
                    autoOpen: false
                        , title: $title
                        , width: 950
            , modal: true
                        , minHeight: 200
            , show: 'fade'
            , hide: 'fade'
                });

    $dialog.dialog("option", "buttons", { "Cancel": function () {
        $(this).dialog("close"); $(this).empty();
    },
        "Submit": function () {
            var dlg = $(this);
            $.ajax({
                url: $url,
                type: 'POST',
                data: $("#target").serialize(),
                success: function (response) {
                    $(target).html(response);
                    dlg.dialog('close');
                    dlg.empty();
                    $("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
                        var e = this;
                        setTimeout(function () { $(e).fadeOut(400); }, 2500);
                    });
                },
                error: function (xhr) {
                    if (xhr.status == 400)
                        dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                    else
                        displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */

                }
            });
        }
    });     

    $dialog.dialog('open');
};

function displayError(message, status)
{
    var $dialog = $(message);
        $dialog
            .dialog({
            modal: true,
            title: status + ' Error',
            buttons: {
            Ok: function() {
                $(this).dialog( "close" );
            }
        }
    }); 
    return false;             
};
    // jQuery Ajax-Post only works in repeatable manner when link that opens SimpleDialog can be placed 
    // outside the PartialView. Otherwise, calls to SimpleDialog fail on second and subsequent clicks. 
    // Need to use full postback in this case.
    $("#btnSubmit").live('click', function (event) {
        event.preventDefault();
        var $target = $(this).attr("name");
        var $url = $("#target").attr("action");
        $.ajax({
            url: $url,
            type: 'POST',
            data: $("#target").serialize(),
            success: function (response) {
                $.simpleDialog.close();
                $($target).html(response);
                $("#ajaxResult").hide().html('Record saved.').fadeIn(300, function () {
                    var e = this;
                    setTimeout(function () { $(e).fadeOut(400); }, 2000);
                });
            },
            error: function (xhr, status) {
                $("#ajaxResult").html(xhr.responseText).show();
                $.simpleDialog.close();
            }
        });
    });

    jQuery(document).ready(function () {
        tableToGrid("#table1", { shrinkToFit: false, width: 1000 });
    });

Answer 1

我一直这样做。它可能有点啰嗦，但它很容易阅读和调试......

只需在页面上创建一个空div并为其指定ID。

<div id="dialog"></div>

然后在您的JS中，您可以进行ajax调用以检索部分视图...

$.ajax({
    url:'/controller/action/id',
    type:'GET',
    beforeSend: function(){
        //some loading indicator
    },
    success: function(data){
        $("#dialog").html(data);
        $("#dialog").dialog({define some options});
        $("#dialog").dialog("open");
    }
    error: function(data)
        //handle error
    }


});

您的控制器操作可以返回您的局部视图。 ajax函数将检索数据，更新页面然后打开对话框。你可以通过组合这些调用来节省一些空间，但我试图清楚这个功能。

您当前代码的一个问题是您正在使用jQuery创建div标签，但我没有看到您实际将其写入DOM的位置（使用append，appendTo等等）。

var $dialog = $('<div></div>')

jQuery UI对话框打开局部视图（.ascx）

1 个答案: