How to Update an UpdatePanel Using JavaScript from an IFrame in ASP.NET

I recently had to make some additions to a website I was working on which involved the addition of an AJAX UpdatePanel which would contain a GridView. The GridView would contain rows with information related to submissions we received by the user. A timer would ensure that the GridView would be updated in a timely fashion and reflect any updates in our database, but we also wanted to instantaneously update the GridView as soon as a new submission was received. Updating an UpdatePanel from JavaScript wasn't a problem, but the source of new submissions to the site was located within an IFRAME hosted on the page, not on the page itself. How could I update the UpdatePanel on the main page when the page inside the IFRAME was submitted?

Turns out, it's no big deal. All you need to do is add code to the onload event of the IFRAME. This code will call the __doPostBack() JavaScript function that ASP.NET renders when you use the AJAX components. This function takes two parameters: the name of the UpdatePanel you want to update, and any EventArgs you may have; I didn't have any, so I passed in a zero-length string.

In the example below, an UpdatePanel named upUserInfo will be updated whenever the page hosted within the IFRAME is loaded:

<iframe src="MyPage.aspx" onload="__doPostBack('<%=upUserInfo.ClientID %>', '');">

Note that in this example I user the UpdatePanel's ClientID property, rather than assuming it's client-side ID will be the same as what I'm using on the server side.


Popular Posts

How To Mock Out Child Components In Unit Tests of Angular 2 Code

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

Unit Testing with a Mock Entity Framework DbContext and Fake DbSets

A Red Herring When Using Moq to Mock Methods With Optional Parameters