|
Microsoft AJAX Series Part 4 - Nested UpdatePanels With
Nested GridViews |
|
description |
Nesting Microsoft ASP.NET Ajax
UpdatePanel controls can give you a finer level of control
over partial page rendering. The 'UpdatePanelNestedGridView.aspx'
web form in this example demonstrates this by nesting an
UpdatePanel that contains a GridView, within another
UpdatePanel that contains a GridView. |
|
source code -> |
AJAXBeta2UpdatePanelNestedGridViews_VB.zip
AJAXBeta2UpdatePanelNestedGridViews_CS.zip |
|
environment |
Visual Studio 2005 |
|
language
|
Visual Basic, C# |
|
tags |
Microsoft AJAX, UpdatePanel,
GridView, nested, partial page rendering |
This is the fourth in a series of
articles
about Microsoft ASP.NET AJAX, a new web development technology from Microsoft.
Click these links to view previous
posts in this series:
Post 1,
Post 2, and
Post 3
Partial Page Rendering - Nested UpdatePanel Server Controls
with GridViews
Nesting Microsoft ASP.NET Ajax UpdatePanel controls can give you
a finer level of control over partial page rendering.
The 'UpdatePanelNestedGridView.aspx'
web form in this example demonstrates this by nesting an
UpdatePanel that contains a GridView, within another
UpdatePanel that contains a GridView.
How the Nested UpdatePanels in the Source Code Were
Implemented
1. An
UpdatePanel named 'OuterUpdatePanel' was added to the web form.
2. A
GridView name 'OuterGridView' was added to the OuterUpdatePanel.
3. An
AccessDataSource named 'CategoriesDataSource' was added to the
web form. It was configured to select from the 'Categories'
table in the Northwind Access database in the App_Data directory
of the web site.
4. A
TemplateField named 'Products' was added to the OuterGridView.
5. An
UpdatePanel named 'InnerUpdatePanel' was added to the Products
TemplateField.
6. A
GridView named 'InnerGridView 'was added to the InnerUpdatePanel.
7. An
AccessDataSource named 'ProductsDataSource' was added to the
Products Template field. It was configured to select from the
'Products' table in the Northwind Access database in the
App_Data directory of the web site.
8. A
method named 'OuterGridView_RowDataBound' was added to the Head
element of the web form. This method sets the Select parameter
for the ProductsDataSource during data binding.
Try the Example
Follow the
instructions below to examine the partial page rendering
provided by the nested UpdatePanels in the example. Compare the
date/time stamp in the outer UpdatePanel to the date/time stamp
in the inner UpdatePanel as you follow each instruction.
1. Click paging links of the OuterGridView. Notice that since
the outer UpdatePanel is being updated the inner Update Panel is
updated too.
2.
Click column headers to sort and paging links of the inner
GridView.
3.
Notice that the inner UpdatePanel is updated but the outer
UpdatePanel is not.
4.
Notice too that when you manipulate an inner GridView only that
GridView is updated.
The source code included with this post (see
download link above) demonstrates how to
nest an
UpdatePanel that contains a GridView within another UpdatePanel that
contains a GridView. Additional
comments about these controls is included in the example page and source code.
The source code was created with ASP.NET AJAX
1.0 Beta 2 which is available at -> The Official Microsoft
ASP.NET AJAX Website
The next post in this series will delve more
deeply into Microsoft ASP.NET Ajax's asynchronous communication layer.
For more information and FREE Microsoft ASP.NET
Ajax installers visit -> The Official Microsoft
ASP.NET AJAX Website
mike mcintyre
http://www.getdotnetcode.com
|