UpdatePanel: __doPostBack('MyControl.ClientID') does not cause partial postback...why?

Article
2008-03-06

Question

_{Thursday, March 6, 2008 1:35 PM}

Using .ClientID as param for __doPostBack() does not work for me...

The following is embedded in a Content control of a Page that uses a MasterPage...

I want to update my UpdatePanel after the Page loads (so I do not want to specify OnLoad on my UpdatePanel). I have a Button being used as a Trigger for my UpdatePanel; the button calls a server method (OnClick) when clicked which updates the UpdatePanel contents (a Label). However, I want the UpdatePanel to be updated a second or so after the page loads, so I call a JavaScript method using a startup script (setTimeout('UpdateMyPanel();', 1000);). In UpdateMyPanel(), because the method that actually updates the UpdatePanel is wired to my Button's OnClick event, I have to call __doPostBack() using the Button ID as the parameter. The mystery is that IT ONLY WORKS if I use the Button's .UniqueID! Why? If I use .ClientID nothing happens when I call __doPostBack() (actually, I think a postback is occurring).

I am confused.

All replies (10)

_{Friday, March 7, 2008 4:17 PM ✅Answered}

Hello gangelo,

You should never use ClientID when using in __doPostBack function, it will simply post back the form, nut on the server it will not find the targeted click (or any other) handler.

Use UniqueID instead - this works always - I use it everywhere and had no problems so far.

It's very soimple to explain - just create test user control, place button on it, then set "UseSubmitBehavior" property of the button to false, then create click handler for it, place the user control on the aspx page and run. When you view the source of the page, you will se something like this:

Yes that means ASP.NET uses UniqueID. Now little background. To find the target control/event handler web forms use special hidden field named "__EVENTTARGET". And __doPostBack function does exactly the following: it assigns the name (UniqueID) of the button to that hidden field and posts a form. Then on the server side in any place (even in OnInit event of the page) you can always check , whether a cpecific control raised a PostBack:

if(Request["__EVENTTARGET"]!=null && Request["__EVENTTARGET"==MyButton.UniqueID)

{

// do something

}

for handlers, this is done automatically by ASP.NET framework, so use UniqueID.

Hope this helps.

_{Thursday, March 6, 2008 2:05 PM}

The syntax should be:

    __doPostBack('<%= MyControl.ClientID %>', '');

You can also pass the ClientID of the UpdatePanel itself to update it.

_{Thursday, March 6, 2008 2:13 PM}

Hi,

Yes, that was the syntax I was using; however, using the UpdatePanel's ClientID will not trigger the OnClick code associated with my Button being used as the trigger. Everything works fine if I simply call __doPostBack('<%= MyControl.UniqueID%>', ''); but not when I use the ClientID for some reason.

_{Thursday, March 6, 2008 10:17 PM}

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

_{Friday, March 7, 2008 9:18 AM}

Can you post your (simplified) source code?

_{Friday, March 7, 2008 11:31 AM}

Function on line #39...I do not get it.

1    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UsingUpdatePanel.aspx.cs"
2       Inherits="UsingUpdatePanel" MasterPageFile="~/MasterPages/MpDefault.master" %>
3    
4    <%@ MasterType TypeName="MpDefault" %>
5    <asp:Content ID="HeadContent" ContentPlaceHolderID="head" runat="server">
6       <title>Using UpdatePanel</title>
7    </asp:Content>
8    <asp:Content ID="BodyContent" ContentPlaceHolderID="Body" runat="server">
9       <%-- JavaScript --%>
10     <%--
11         To get a DOM element reference to a regular ASP.NET control, you'll need to use $get().  
12         You only use $find() for complex components, like the AJAX Toolkit controls.
13         Also: You can use $get('<%= TextBox1.ClientID %>') if the JavaScript code is in an ASPX page. 
14         --%>
15     <%-- JavaScript - Must be directly AFTER the ScriptManager declaration!--%>
16   
17     <script type="text/javascript">
18             //var control = null;
19             var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
20   
21   
22             pageRequestManager.add_beginRequest(BeginRequestHandler);
23             pageRequestManager.add_endRequest(EndRequestHandler);
24   
25   
26             function BeginRequestHandler(sender, args) {
27                 //control = args.get_postBackElement();  
28   
29                 //control.disabled = true;
30                 SetReadyState(false);
31             }
32   
33             function EndRequestHandler(sender, args) {
34                 //control.disabled = false;
35                 //control = null;
36                 SetReadyState(true);
37             }
38         
39             function DoAjaxUpdate() {           
40                 //SetReadyState(false);             
41                 // This DOES NOT work --> __doPostBack('<%= UpdateButton.ClientID %>', '');
42                 // This works!
43                 __doPostBack('ctl00$Body$UpdateButton','');             
44             }
45             
46             function SetReadyState(ready) {
47                 if (ready) {
48                     SetReadyStateReady();
49                 } else {
50                     SetReadyStateBusy();
51                 }
52                 EnableControls(ready);                                          
53             }
54             
55             function SetReadyStateReady() {
56                 getBusyImageElement().style.display = 'none';
57             }
58             
59             function SetReadyStateBusy() {
60                 var element = getResultsElement();
61                 element.innerHTML = 'Working...';
62                 element.style.backgroundColor = '';
63                 element.style.color = '';
64                 
65                 getBusyImageElement().style.display = 'inline';
66             }
67             
68             function EnableControls(enable) {                               
69                 EnableControl(getUpdateButtonElement(), enable);
70                 EnableControl(getForceExceptionElement(), enable);
71             }
72             
73             function EnableControl(control, enable) {
74                 control.disabled = enable ? false : true;
75             }           
76             
77             function getResultsElement() {
78                 return $get('<%= Results.ClientID %>');
79             }
80             
81             function getUpdateButtonElement() {
82                 return $get('<%= UpdateButton.ClientID %>');
83             }
84             
85             function getBusyImageElement() {
86                 return $get('<%= BusyImage.ClientID %>');
87             }
88             
89             function getForceExceptionElement() {
90                 return $get('<%= ForceException.ClientID %>');
91             }
92     </script>
93   
94     <h4>
95         UpdatePanel Method</h4>
96     <h4>
97         Example that shows how to use UpdatePanel and JavaScript to update a DOM element
98         using AsyncPostBack</h4>
99     <div>
100       <asp:Image ID="BusyImage" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/busy20x20.gif" style="display:none;" />
101       <%--
102       The benefit of UpdatePanel opposed to Pure JavaScript...
103       Using UpdatePanel allow you to access the properties of all the other controls, and even update them. 
104       If you wanted to change the color of the label or hide it using your C# code instead of javascript, you could. 
105       It’s all a trade off for convenience.
106       --%>
107       <asp:UpdatePanel ID="TheUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"
108              RenderMode="Inline">
109           <ContentTemplate>
110               <asp:Label ID="Results" runat="server" Style="padding: 3px;" />             
111           </ContentTemplate>
112           <Triggers>
113               <asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click" />
114           </Triggers>          
115       </asp:UpdatePanel>
116       <div style="margin-top: 5px;">            
117           <asp:Button ID="UpdateButton" runat="server" Text="Refresh" UseSubmitBehavior="false"
118                  OnClick="OnRefreshButtonClick" />
119           <asp:CheckBox ID="ForceException" runat="server" Checked="false" Text="Force Exception"
120                  Style="margin-left: 3px;" />
121       </div>
122   </div>
123   <%-- JavaScript --%>
124  
125   <script type="text/javascript">       
126           EnableControls(false);              
127           setTimeout('DoAjaxUpdate();', 1000);            
128   </script>
129  
130  </asp:Content>
131

_{Friday, March 7, 2008 3:10 PM}

I copied your code and using __doPostBack('<%= UpdateButton.ClientID %>', ''); works just fine for me.

Are you seeing a full page refresh or do you think it's just not doing anything at all?

_{Saturday, March 8, 2008 9:27 AM}

Hi,

The post back takes place when I use ClientID, however, it appears that the OnClick event is not wired properly (e.g. OnRefreshButtonClick never gets called);

_{Saturday, March 8, 2008 9:42 AM}

Hello gangelo,

You should never use ClientID when using in __doPostBack function, it will simply post back the form, nut on the server it will not find the targeted click (or any other) handler.

Use UniqueID instead - this works always - I use it everywhere and had no problems so far.

if(Request["__EVENTTARGET"]!=null && Request["__EVENTTARGET"==MyButton.UniqueID)

{

// do something

}

for handlers, this is done automatically by ASP.NET framework, so use UniqueID.

Hope this helps.

I understand why this worked now and not ClientID - very helpful answer thanks.

_{Friday, September 5, 2008 11:36 AM}

Hello gangelo,

You should never use ClientID when using in __doPostBack function, it will simply post back the form, nut on the server it will not find the targeted click (or any other) handler.

Use UniqueID instead - this works always - I use it everywhere and had no problems so far.

if(Request["__EVENTTARGET"]!=null && Request["__EVENTTARGET"==MyButton.UniqueID)

{

// do something

}

for handlers, this is done automatically by ASP.NET framework, so use UniqueID.

Hope this helps.

Sorry to post in a old thread but I must say thank you for this information, it helped to solve my problem with ajax and asyncPostBack

Share via

UpdatePanel: __doPostBack('MyControl.ClientID') does not cause partial postback...why?

Question

All replies (10)

Additional resources