First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

I thought that updating an UpdatePanel from javascript was one of the most frequently asked question about ASP.NET Ajax, but even looking around a lot I didn't find a clean and polished solution for what should be a common task.

I didn't want to create an ASP.NET Ajax extender for such a simple task, but after a few hours of Google-ing, I found a few nice articles on Ben Rush's blog, which is a very valuable source of knowledge on the internals of ASP.NET Ajax, ScriptManager and other ASP.NET Ajax goodies.

The first article explains a very nice way to trigger the update of an UpdatePanel from JavaScript, while the other two are very detailed overviews on the internals of how an UpdatePanel is updated.

The only thing you need to do to refresh from javascript is to register a Button (hidden via CSS) Click event as async trigger for an UpdatePanal and then call the following method from your javascript method:

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

Yes, that easy. Nice, isn't?

But in my page I also had to pass a value to the UpdatePanel, so the button was not enough.

So I adapted a bit Ben's solution, and I add hidden text box, and update its value before calling the doPostBack method.

To implement that you need to add 4 "things" in your ASP.NET web form.

Add the hidden textbox

You need a textbox to store the value you want to pass over to the UpdatePanel, but you don't want to show it in the page, so it must be hidden via CSS.

<asp:TextBox ID="text" runat="server" style="display:none;"></asp:TextBox>
<asp:Button ID="button" runat="server"
        OnClick="button_Click" style="display:none;"/>

Register the async trigger for the UpdatePanel

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
   <ContentTemplate>
     <asp:Label ID="label" runat="server"></asp:Label>
   </ContentTemplate>
   <Triggers>
     <asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
   </Triggers>
 </asp:UpdatePanel>

You see that I registered an AsyncPostBackTrigger on the Click event of the button.

I also added a label that will be updated by the event raised by the textbox. Remember to set the UpdateMode to Conditional, otherwise the UpdatePanel will always be refreshed, not only when there is a postback inside or when a trigger fires.

Add the JavaScript method to refresh the UpdatePanel

<script type="text/javascript"> function UpdPanelUpdate(value)
{
var obj = document.getElementById("<%= text.ClientID %>");
obj.value=value;
__doPostBack("<%= button.ClientID %>","");
}
</script>

Using the ClientID property of the control will ensure that you get the right ID even if the control is inside a masterpage, a webcontrol, a repeater or whatever might change the ID.

I set the value on the hidden textbox but I do the postback on the button.

Update the contents of the UpdatePanel

And finally, you are ready to update the contents of the UpdatePanel based on the value set by the javascript method on the client:

protected void button_Click(object sender, EventArgs e)
{
label.Text = text.Text;
}

This changes the text in the label inside the UpdatePanel with the value set in the hidden textbox and passed through by the async postback.

Here is a file with a working sample: UpdatePanelAndJS.aspx

Technorati tags: , , ,

kick it on DotNetKicks.com

posted on Tuesday, June 26, 2007 2:57 PM

Comments on this entry:

# re: How to refresh an UpdatePanel from javascript

Left by Steven Harman at 6/26/2007 3:15 PM

Why not just use a Hidden Input field, rather than a text box which you have to hide with CSS?

# re: How to refresh an UpdatePanel from javascript

Left by Simone at 6/26/2007 3:27 PM

Good point Steve, actually I started using the OnTextChange event, because it was a nicer solution since both the value and the trigger were on the same control. But then I changed to button+textbox because the textChanged event is raised only it the text changes, so if you call the UpdUpdatePanel 2 times in a row with the same parameter, the second time the UpdatePanel is not refreshed.
Now that I've 2 controls, using thr Hidden Field makes more sense.

# Popup Posts

Left by Welcome to Simon Philp's Blog at 6/27/2007 12:09 AM

Popup Posts

# re: How to refresh an UpdatePanel from javascript

Left by Thomas at 6/30/2007 9:45 PM

Very nice!
This saved me a lot of time!

# re: How to refresh an UpdatePanel from javascript

Left by Chris at 7/6/2007 11:40 AM

I want to say thank you for the excellent tutorial. I just wish I found it sooner.

# re: How to refresh an UpdatePanel from javascript

Left by ricardo at 7/26/2007 11:55 PM

What if the button is inside a popup window? How can I do to update the updatepanel that is in the parent page? Thanks

# re: How to refresh an UpdatePanel from javascript

Left by Simone at 7/27/2007 12:03 AM

ricardo, from the button in the popup you call the UpdPanelUpdate JS function in parent page (which contains both another hidden button).
Or, if you don't need the value, you can directly call the __doPostBack with the id of updatepanel

# re: How to refresh an UpdatePanel from javascript

Left by Johari Salleh at 7/27/2007 9:00 PM

simone, can you do an example of how to update the updatepanel of a parent page from the child page / popup window. TQ.

# re: How to refresh an UpdatePanel from javascript

Left by Evdin URSAN at 8/3/2007 7:29 PM

Hi Everyone,

It tooked me 2 days to figure it out why it's not working... Do you know what I discovered... That (in my case - I don't know why) the __doPostBack method doesn't work with the ID of the control - it needs the name of the control..

So you can do the following:

var invisibleButton = document.getElementById('<%= btnInvisible.ClientID %>');
__doPostBack(invisibleButton.name,'');

And now it's working...

# re: How to refresh an UpdatePanel from javascript

Left by Chris at 8/10/2007 1:02 PM

When I try to do that inside a popup window, it doesn't work...
I doesn't do anything. No error, no nothing. I tried all of the approches found in here, but it didnt worked...

I've also tryed do do it this way:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack('<%=UpdatePanel1.ClientID%>', '');

but the behaviour is the same...

Can anyone suggest something?

TIA,
Chris.

# re: How to refresh an UpdatePanel from javascript

Left by manoj gupta at 9/7/2007 8:33 AM

can you do an example of how to update the updatepanel of a parent page from the child page / popup window.

# re: How to refresh an UpdatePanel from javascript

Left by Luke at 9/17/2007 3:18 AM

This was the missing link for what I had to do with ASP.NET AJAX. The client wanted a list of product thumbs and when you click the thumb, it shows the corresponding product details overhead. I had the exact same problem as Evdin. But, instead of doing the 2 lines of javascript code to get the control name, you can use .UniqueID instead of .ClientID. (.UniqueID = name, .ClientID = id).

Anywayz, Thanks for your help! This is the good stuff that you won't get from any Microsoft MVP articles. "Click this button and watch the UpdatePanel refresh.!" Sometimes I don't know if they are lazy or just clueless.

# re: How to refresh an UpdatePanel from javascript

Left by Chris at 9/18/2007 11:46 AM

Thank for this. A great help.

# re: How to refresh an UpdatePanel from javascript

Left by Ashish Yadav at 9/18/2007 2:58 PM

Hi, I am to update panels. Will be thankful if any one can post a full example on how to update the updatepanel that is there in the parent page from a pop up. Any kind of help will highly appreciated.

Thanks
Ashish

# re: How to refresh an UpdatePanel from javascript

Left by Brad at 9/22/2007 4:26 PM

Thanks for the great tutorial. I was just thinking wouldn't be great if I had away to trigger an UpdatePanel via java script. I googled and found your page. And within minutes I had what I needed.

Thanks,
Brad

# re: How to refresh an UpdatePanel from javascript

Left by Damien Jorgensen at 9/27/2007 3:17 PM

I hardly think hiding anything using CSS makes it a tidy solution.

This Id call a hack, yes it works but its not tidy.

Comments have been closed on this topic.