ASP.NET：使用 jQuery 手动更新 UpdatePanel

Question

我在使用 javascript (jQuery) 更新 ASP:UpdatePanel 时遇到问题。这就是我所拥有的。

我正在使用隐藏按钮技巧，因为我似乎无法为 __doPostBack 技巧获取更新面板的 ClientID。

<asp:UpdatePanel runat="server" ID="pnlUpdate">

<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>

<ContentTemplate>

<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="pnlUpdate" DynamicLayout="false" DisplayAfter="100">
<ProgressTemplate>
<img alt="Laddar..." src="img/loader.gif" width="16" height="11"/>  
</ProgressTemplate>
</asp:UpdateProgress>

<div style="display:none;">  
<asp:Button runat="server" ID="btnUpdate" CommandName="Refresh" CommandArgument='<%# Eval("Id") %>'/>
</div>

<asp:Repeater runat="server" Id="rptrEnquiry">
...
</asp:Repeater>


<%= DateTime.Now.ToString() %>

<a href="javascript:jQuery('#<%= btnUpdate.ClientID %>').trigger('click')&&undefined;">Fire!</a>

</ContentTemplate>

</asp:UpdatePanel>

在处理 btnUpdate（在 GridView RowCommand 中）的代码隐藏中，当 btnUpdate 被按下时，rptrEnquiry 会被反弹。

如果我直接按下按钮（而不是隐藏），一切正常（显示 updateprogess 并更新日期和更新中继器。

但是，如果我单击触发链接并通过 javascript 触发按钮，则只会更新日期，但不会显示更新进度，并且不会反弹中继器。调试的时候可以看到反弹代码执行了，但是更新中没有效果。

Answer 1

好的，所以我设法通过完全重建整个事情来解决我的问题。一些可能对其他人有所帮助的经验教训：

我在网格视图中有更新面板，当我将更新面板部分分离到它自己的控件中时，我的大部分问题都得到了解决，例如无法引用 pnlUpdate。

http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/ 非常有帮助。

更新面板中的更新在其 PreRender 中进行控制。使用 __EVENTTARGET 只会更新我们感兴趣的面板。

protected void pnlUpdate_PreRender(object sender, EventArgs args)
{
    if (Request["__EVENTTARGET"] == pnlUpdate.ClientID)
    {
        PreBind();

        switch(Request["__EVENTARGUMENT"])
        {
            case "toggle":
                Toggle();
                break;
            case "purchase":
                Purchase();
                break;
            case "update":
                /* nop */
                break;
        }

        Bind();
    }
}

为了让 __EVENTTARGET 拥有正确的 clientId（如果使用按钮，则为空字符串），我需要使用 javascript 触发面板更新：

<a href="javascript:__doPostBack('<%=  pnlUpdate.ClientID %>','toggle');">
<img runat="server" ID="imgToggle" src="~/img/grid_plus.gif" title="Expandera" alt="" width="14" height="14"/>
</a>

Answer 2

你尝试过这样的事情吗？ （取自Easily refresh an UpdatePanel, using JavaScript）。

有一个简单的触发方法 回发针对 更新面板：__doPostBack()。

只要一个事件目标 __doPostBack() 调用是 UpdatePanel 的异步触发器，ASP.NET AJAX 框架会拦截 回发并触发部分回发 而是。

<a href="#" onclick="__doPostBack('<%= pnlUpdate.ClientID %>', '');"/>