Dynamic ASP.NET-WebControls using Ajax.NET ...

The concept

The idea is to load dynamic content into a part of a webpage. With ASP.NET this can be done loading and assigning WebControls to a container - like a PlaceHolder-control. The problem with this approach is that the assignment occurs on the server-side and the page has to be fully reloaded to display the changed content. This is not very nice for the user is eye and costs performance, because superfluous information is transported over the network. This is where we can use Ajax to reload only this part of the page that needs to be updated.

The example

The sample-project is very simple but you can use the same scenario for more advanced requirements as well. Here is the user-interface:


Figure 1

The DropDownList contains 3 values: Red, Blue, Green. For each colour exists a WebControl, that is loaded dynamically when the selection of the DropDownList changes. Therefore the property AutoPostBack of the DropDownList has to be set to true. In the eventhandler SelectedIndexChanged the associated control is loaded. To avoid a full reload of the page, the created WebControl is added to a PlaceHolder-control that is defined inside of an UpdatePanel:

<asp:UpdatePanel ID="updatePanel" runat="server"> <ContentTemplate> <asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddColor" /> </Triggers> </asp:UpdatePanel>


protected void ddColor_SelectedIndexChanged(object sender, EventArgs e) { SetColor(); } private void SetColor() { Control c = Page.LoadControl(ddColor.SelectedValue + "Control.ascx"); placeHolder.Controls.Clear(); placeHolder.Controls.Add(c); }


The controls are loaded by their names which are constructed by a concatenation of the DropDownList is value and the suffix "Control.ascx". The DropDownList is registered as a Trigger for the UpdatePanel by adding it is ControlID to the list of Triggers in the UpdatePanel is markup. So, what is a Trigger? A Trigger is an ASP.NET-servercontrol like in our case a DropDownList that is introduced to an UpdatePanel as a source of an update. The controls that are placed inside of an UpdatePanel are automatically registered as Triggers, if the property ChildrenAsTriggers has the value true. Before we add the newly created WebControl to the PlaceHolder, we clear the PlaceHolder cause we want to display only one control.

More extended use-cases

For a real-life application you can use the same technique. Let is assume that we have an Rss-Feed that we want to display in different kind of view-modes. In one view-mode only the headings are displayed in a list. In another view-mode, the headings, the first 200 letters of the description and some information about the author are shown to the user. The view-mode could be selected by a DropDownList just like the one we used to choose the 3 colours. The Rss-Feeds could be displayed in 2 controls that are created dynamically.

Final thoughts

Ajax-techniques are very useful to refresh dedicated regions of a page for increasing the usability of a web-application and the performance. Analyse your pages with care to find the parts of it where you can use Ajax - the trick is to avoid overdose!

source: 123aspx

 Original Source: