Ajax.Net Update panel, different ways of triggering updates
Posted by Lisa Zhou March 9th, 2008Update panel is probably one of the first thing that you will use once you get your Ajax toolkit with the .net Framework. Other than the basic button in the panel, I’ve just recently found a few other ways of triggering an refresh in the panel,which wasn’t obvious to me before.
Other than placing an button in the update panel, there are the 4 ways I’ve found
1. Using the rendermode attribute of the update panel control.
You can set different values to the rendermode attribute. Setting it to “ALWAYS” means that if you have any update panel on the page, anything that triggers an update in those other panels will all trigger an update in this panel as well, set the rendermode to “Conditional” means that this update panel is not updated by updates done to other update panels.
Using this method, if there are multiple update panels on the page, and you only want to update one panel not the other ones, then all update panels should be set with the render mode of “Conditional”. If in another situation, where there are only 2 update panels, and one will set off another one, then “Always” should be applied.
One good example would be that there is a modal form for adding a new record which is in one update panel, and in another update panel there is a search grid which displays all records, both has the value of always set in the rendermode. Once a new record is added, because always is set in the rendermode value, this will cause an refresh in the search grid update panel, which updates the grid with the new value. The code behind method can be applied for more than 2 update panels on the page, but only one update panel wants to be refreshed by another update panel’s update.
2. Update via an external button not in the update panel
Updates can be done via a button that is not placed in the panel it self, if the update panel needs to be updated via a button outside of the updatepanel for example, this can be done by adding a trigger like so.
<asp:LinkButton ID=”btnGoReceiver“ CssClass=”button green go” runat=”server” TabIndex=”6″><span>Gospan>asp:LinkButton>
<asp:UpdatePanel ID=”upReceiverDetails“ runat=”server” >
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnGoReceiver“ />
Triggers>
asp:UpdatePanel>
The above AsyncPostBackTrigger contains the id of an button outside of the update panel, when this particular button is clicked on, the update panel is refreshed without postback,hence the AsyncPostbackTrigger. You can also add a different tag of “PostBackTrigger” which will trigger an update to the update panel but causing a page refresh.
3.Update programmatically via code behind
An update can be done to the updatepanel via code, This can be done by referring to the update panel object and then calling the .Update function of the update panel object.
in aspx
..asp:updatepanel id=”up1 ..in code behind
……
up1.update()
……
There are quite a few good situations where this can be used.
In one example, there is a grid display a list of vehicles, on the right side of the grid, we want to display the details of the vehicle when a person clicks an item in the grid, but we want to do this so the page does not refresh. The grid it self is placed in one update panel, on every row in the grid, a linkbutton with text of view details and command “view_details” is displayed. On the right hand side, the fields displaying the details are in a separate update panel. Because the linkbuttons are rendered dynamically, we can not add all linkbutton ids to the details update panel as triggers, and it would be too inefficient. So this is the perfect example to execute the update in the code behind. So in the row command function of the grid, when ever the view_details command is executed, the fields in the details panel are set with the vehicles values, and the details update panels update function is called. The update function basically tells the update panel to re-render the html.
Another situation is with the Masterpage structure in .Net, if you have one button in one content template wanting to update another update panel in another content template, this can not happen. The problem that is faced here is the control id in one content template is not recognised in another content template, so the only way to trigger this update is via code behind.
4. Update the update panel via javascript
You can trigger an update to the panel via some tricky javascript function call. First lets have a look how linkbutton works. If you had a linkbutton and looked at the generated html, on the onclick function you will notice a line of code simlar to this
<a id=“ctl00_btnSubmit” class=“textLeft”href=“javascript:__doPostBack(’ctl00$btnSubmit’,”)”>Submit..
The href value is in fact just a javascript postback, so basically the postback of a link button is triggered via javascript. Understanding this concept, basically what it means is we could have a hidden button placed in the update panel that is not visible, and use the javascript line of __doPostBack(’ct100$ButtonID’,”), this will be like clicking the button, and hence refreshing the update panel.
The situation on where this would be used is when there are interaction between a parent and child page. For example, the parent page contains a button of adding a new vehicle listing, clicking on the button opens a new page, once the new vehicle listing is added on the child page, the parent pages list grid is refreshed. Since the child page has no access to objects of the parent page in the code behind, we can not update the panel programmatic. To update the parent page, it can be done via javascript by creating a javascript function on the parent page, which executes the doPostBack of an hidden button in the update panel, on the child page, once the child page closes, a javascript call to the function on the parent page is called, this can be done by using the javascript parent.functionname.
Categories: Code, Development, Uncategorised, Web 2.0






