This post has been republished via RSS; it originally appeared at: IIS Support Blog articles.
While working on implementing some of functionality on my online favorites manager (www.linqto.me) which I encourage everyone to check out, I came across the following problem:
- On one of the pages of the site, I needed the page to be able to handle partial postbacks and bring back information from the server side onto the HTML markup of the page asynchronously: this is easy enough to accomplish using an UpdatePanel
In this article, I will try and detail how such a setup can be achieved for maximum re-usability.
In order to explain how you could go about doing such a thing, I have created a simpler / stripped down example (although you can look into the bookmark import feature described here for www.linqto.me to see a more complex usage). The sample I will walk you through looks like the following screen-shot: it consists of two progress like bar indicators that will show a percentage of how much of a total value is used up – this can be business data, metrics, pressure, battery charge, anything else you want.
The bar indicators are actually composed of two divs each (one div – with a blue or pink color - inside another div with a gray background). When you start the example, the two gray indicator div elements which show the total capacity will only appear, since the width values of the interior div elements are 0 with by the styling of the page:
Notice that the style element for the .blueDiv class attributes a width of 0px to the inner div, making it invisible.
In the sample provided, the entire control is contained in .ASCX and ASCX.cs files that are named WebUserControl. If you look at the markup of the control, you will see that it makes use of an UpdatePanel server control that contains a LinkButton control (the ‘Update Indicators’ button) and two hidden fields:
When the button is clicked, the update panel initiates a partial postback to the server, where the code for the lnkUpdateValues_Click() event handler will run. Here is the code for the event handler in question:
All the code does is that it calculates two random integer values that are between 0 and 500 and then sets the resulting numbers as the values of the two hidden fields valIndicator1 and valIndicator2.
However, please note that the div elements that are responsible for displaying the data in a more graphical format are not contained inside the update panel, and the markup resulting from the partial post-back will not change these elements.
There are two overloads of the RegisterStartupScript method geared at achieving one of the following actions:
- The script is called once when the control is loaded, if this overload is used
- The script is called when the control is loaded and each and every time there is a partial postback on the control, if this overload is called – which is the overload used in the sample project.
To wrap up, here is the workings of the project from A-Z now that we have looked at the code:
- The control gets loaded on the page and the Page_Load event handler of the UserControl is called.
- The function fires on the page load and on subsequent partial postbacks and executes a simple logic of transferring the values of two integers (expressed as hidden fields) into CSS classes that make the divs be wider or smaller.