jQuery UI 对话框打开部分 View (.ascx)

Question

我对如何在 jquery UI 对话框窗口内打开部分 View 有点困惑。我是用简单的 Dialog 来做的，但由于各种原因，我决定朝不同的方向发展。网上所有教程刚打开<div></div>很好，但我需要打开整个 ascx 文件...顺便说一句，我计划在这个部分 View 中使用 jquery 验证和 jquery UI Datepickers。

你们知道什么例子或教程吗？

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

更新:更多详细信息以及代码这确实是 MVC 部分 View 。我之前尝试过的一些代码遵循这句话...

    $(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 是 View 的名称(如果它是 javascript 请求，则加载部分 View ，否则加载常规 View )

更多代码可帮助其他人了解发生了什么

    <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 调用来检索部分 View ...

$.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
    }


});

您的 Controller 操作可以返回您的部分 View 。 ajax 函数将检索数据、更新页面，然后打开对话框。您可以通过组合其中一些调用来节省一些空间，但我试图澄清其功能。

当前代码的一个问题是您正在使用 jQuery 创建 div 标签，但我不知道您实际上在哪里将其写入 DOM(使用append、appendTo 等...)。

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