jQuery 对话框回发但 UpdatePanel 未更新

Question

我想从代码隐藏中显示一个 jQuery UI 对话框，并且需要在回发后刷新它。

该对话框是一个用于过滤和查找数据的控件。因此，用户从 DropDownLists 中进行选择并在 TextBoxes 中输入文本，单击“Apply-Button”，发生异步回发，数据根据用户的选择进行过滤，结果将显示在 GridView 中。因此我需要更新 GridView 周围的 UpdatePanel。

异步回发在以下链接的帮助下工作:

• jQuery UI Dialog with ASP.NET button postback
• http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

(基本上是dlg.parent().appendTo(jQuery("form:first"));-解决方案)

问题:我无法使用 UpdateMode="Always"或通过 UpdatePanel.Update() 从代码隐藏手动更新 UpdatePanel。我认为这与对话框不在 UpdatePanel 或类似的内部有关。希望有人能帮助我。

一些来源:

function createChargeFilterDialog() {
    //setup dialog
    $('#Dialog_ChargeFilter').dialog({
        modal: true,
        resizable: false,
        autoOpen: false,
        draggable: true,
        hide: "Drop",
        width: 850,
        height: 600,
        position: "center",
        title: "Charge-Filter",
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        },
        open: function (type, data) {
            $(this).parent().appendTo(jQuery("form:first"))
        },
        close: function (type, data) {
        }
    });
}

当通过单击 BtnShowDialog(在 jQuery-Dialog 之外)时，它会从代码隐藏中调用

AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript _
            (Me.Page, GetType(Page), "showChargeFilterDialog", "createChargeFilterDialog();$('#Dialog_ChargeFilter').dialog('open');", True)

更新:我还注意到回发值中存在问题。所有文本框(如果为空或未附加逗号)。这表明控件根据以下条件多次渲染:http://www.componentart.com/community/forums/t/60999.aspx

我确信这两个问题是相关的。整个对话框及其所有控件将在每次异步回发中重新创建，因此所有控件名称在 DOM 中多次存在(导致 ViewState 逗号附加问题)。这些控件仅在 FireBug/IE Deveoper 工具栏中可见，而不是在 HTML 源中可见，因此我认为 jQuery 导致了这些问题。我如何处置对话框或如何防止重新创建对话框(检查是否已存在)？这是因为对话框位于 UpdatePanel 内部还是因为它(通过 Javascript)移动到 UpdatePanel 外部？

在异步回发之前销毁对话框并不能解决问题，因为对话框只会消失:

<asp:Button ID="BtnApplyFilter" OnClientClick="$('#Dialog_ChargeFilter').dialog('destroy');" ... />

非常感谢您的帮助。

<小时/>

解决方案:我最终使用 ModalPopupExtender来自 AjaxControlToolkit。在出现一些小问题后，它的工作方式就像具有异步回发的魅力(如果您希望弹出窗口保持可见，请不要忘记在每个代码隐藏函数中调用 MPE.Show() )。如果有人感兴趣，我可以添加更多代码。

Answer 1

I assume that it has something to do with the Dialog not being inside of the UpdatePanel or something similar.

i've also noticed a problem in the postback-values. All TextBoxes if empty or not have a comma appended.

你在这两点上确实是正确的。问题的关键是脚本管理器“认为”它应该更新 jQuery 实际上已移动到页面上不同位置的元素，从而导致该元素的多个副本以及您提到的问题。

我在使用嵌套 UpdatePanel 时遇到过此问题，但在其他情况下也可能会发生。

这个问题的解决方法很困惑。

选项 1 - 更改 jQuery UI 的源代码。我没有找到快速解决办法。除了重写整个插件之外，我找不到在不重新排序 DOM 的情况下让对话框正常工作的简单方法。另外，通过该路线，现在您“拥有”源代码，因为您已经修改了它。

选项 2 - 每当页面部分呈现时调整 DOM 以删除重复元素。您可以输出一些额外的脚本来清理虚假的重复元素。我不喜欢这种方法，因为它允许 DOM 处于无效状态，直到脚本运行。

选项 3 - 手动覆盖 UpdatePanel 的呈现。代码看起来像这样:

private bool _hasDomPresence
{
    get
    {
        return ViewState["__hasDomPresence"] == null ? false : (bool)ViewState["__hasDomPresence"];
    }
    set
    {
        ViewState["__hasDomPresence"] = value;
    }
}

protected override void OnLoad( EventArgs e )
{
    if( !ScriptManager.GetCurrent( this.Page ).IsInAsyncPostBack )
    {
         // a full postback means we no longer have a DOM presence
         _hasDomPresence = false;
    }

    base.OnLoad( e );
}

protected virtual void ShowDetailDialog()
{
    // code to show the offending dialog

    // we are showing it, so note the fact that it now has a DOM presence
    _hasDomPresence = true;
}  

protected override void Render( HtmlTextWriter writer )
{
    foreach( Control c in this.Controls )
    {
        //
        // find the offending control's parent container prior to it being rendered
        // In my scenario, the parent control is just a server-side DIV
        if( c == this.DetailDialog )
        {
            //
            // here, I am checking whether or not the panel actually needs to be
            // rendered. If not, I set it to invisible, thus keeping a new DOM
            // element from being created.
            if( !this.DetailUpdatePanel.IsInPartialRendering && _hasDomPresence )
            {
                this.DetailUpdatePanel.Visible = false;
            }
        }
    }

    base.Render( writer );
}

这也会混淆事件验证，因为页面的客户端和服务器版本不匹配(或者至少 ASP.Net 无法判断它们是匹配的)。我找到的唯一方法是关闭事件验证。

有了适当的安全模型，事件验证并不是 100% 必要的，但我不喜欢被迫将其关闭。

总之，这是我在 SO 上发布的最邪恶的代码，如果你使用它，毛茸茸的白色小猫会死，但该方法似乎确实有效。

希望这有帮助。