ASP.NET：手动更新使用jQuery一个UpdatePanel [英] ASP.NET: Manually updating an UpdatePanel using jQuery

问题描述

我无法用更新的ASP：使用JavaScript（jQuery的）的UpdatePanel。 Here're我有什么。

I'm having trouble with updating an ASP:UpdatePanel using javascript (jQuery). Here're what I have.

我使用了隐藏式按键伎俩我似乎没有能够得到更新面板的ClientID的一招__doPostBack）。

I'm using the hidden button trick as I seem not the be able to get the ClientID of the update panel for a __doPostBack trick).

<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）的rptrEnquiry是抢篮板时btnUpdate为pressed的codebehind。

In the codebehind that handles the btnUpdate (in a GridView RowCommand) the rptrEnquiry is rebound when btnUpdate is pressed.

如果我preSS直接按钮（而不是隐藏）一切完美（updateprogess显示和日期更新，转发更新。

If I press the button directly (while not hidden) everything works perfectly (updateprogess is shown and date updated and repeater updated.

但是，如果我点击链接火灾并引发通过JavaScript只有日期被更新按钮，但的UpdateProgress没有显示和转发不反弹。虽然调试我可以看到，反弹code被执行，但它的效果是不是在更新。

But if I click the fire link and trigger the button through javascript only the date is updated but the updateprogress isn't shown and the repeater isn't rebound. While debugging I can see that the rebound code is executed but it's effect isn't in the update.

推荐答案

好了，我mangaged由完全重建整个事情解决了我的问题。一些经验教训，可以帮助别人：

Ok, so I mangaged to solve my problems by totally rebuilding the whole thing. A few lessons learned that might help someone else:

我有在GridView UpdatePanel的，当我sepparated在UpdatePanel部分到它的控制自己的大部分我的问题解决了，如不beeing能够引用pnlUpdate。

I'm having the updatepanel in a gridview, when I sepparated the updatepanel part into a control of it's own most of my problems was solved, such as not beeing able to reference pnlUpdate.

<一个href=\"http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/\">http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/是非常有益的。

在更新面板的更新被控制在它的preRender。通过使用仅__EVENTTARGET面板我们感兴趣的，将被更新。

Updates in the update panel is controlled in it's PreRender. By using __EVENTTARGET only the panel we're interested in, is updated.

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需要对面板更新火：

To get the __EVENTTARGET to have the proper clientId (it's empty string if using a button) I needed to fire of the panel update using 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>

这篇关于ASP.NET：手动更新使用jQuery一个UpdatePanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！