In this tutorial, we will look at how we can nest UpdatePanels. You can nest as many UpdatePanels as you want- there is no limit. In this example, we will be creating two UpdatePanels and nesting one in the other. One will display a person from a database, that is selected from a DropDownMenu, the nested UpdatePanel will display the current time, so we can see when it is updated.
The first thing we will do is create a sample database – or if you have your own, you can use that. For this example, we will be using one table with a few names and cities as our data. We will need a ScriptManager, a DropDownList, a SqlDataSource, and our UpdatePanel to begin with:
DataSourceID=”SqlDataSource1″ DataValueField=”id”
DataTextField=”name” AutoPostBack=”true” />
ConnectionString=”"
SelectCommand=”SELECT * FROM [tblPeople]” />
We have set our DropDownList to be populated by our SqlDatSource so that the names are displayed from our database, which allows the user to select. Notice that we also set the UpdateMode of our UpdatePanel to Conditional as to only allow it to reload when the DropDownList is selected, which is identified with the trigger we added.
Next, we will add a FormView Control into the ContentTemplate of the UpdatePanel, and another UpdatePanel – this one will display the time:
DataSourceID=”SqlDataSource1″ DataValueField=”id”
DataTextField=”name” AutoPostBack=”true” />
ConnectionString=”"
SelectCommand=”SELECT * FROM [tblPeople]” />
Person
Name:
City:
Current Time:
We now have added the FormView Control to display the selected person to the user, but currently won’t do this as it does not know which person we select as yet. Notice that we have a button in the second UpdatePanel to refresh the current time. This is to demonstrate that we can reload just the nested UpdatePanel, using the trigger we hijack the attempt at postback, and instead, just reload the UpdatePanel.
To let the FormView know which item from the DropDown we select, we will add another SqlDataSource for it to look up the data:
Please follow the link to ajaxtutorials.com to continue with the tutorial and code. Happy Coding!
Article from articlesbase.com