Tips and Tricks: ASP.NET AJAX 1.0 and User Controls
page 4 of 10
by Bilal Haidar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 51560/ 117

UpdatePanels inside each UserControl

In this first scenario we will place the GridViews of both UserControls inside an UpdatePanel in such a way the UpdatePanels are placed inside the UserControls themselves.

The EmployeeList UserControl is now as follows:

Listing 5

<%@ Control Language="C#"
 AutoEventWireup="true" CodeFile="EmployeeList.ascx.cs"
 Inherits="UserControls_EmployeeList" %>
<p class="title">
    Select Employee to view Orders:
</p>
<p>
<asp:UpdatePanel ID="UpdatePanel1"
 runat="server" UpdateMode="Always">
<ContentTemplate>
    <asp:GridView 
        ID="GridView1" runat="server"  
        CssClass="Professional"
        HeaderStyle-CssClass="Header"
        AlternatingRowStyle-CssClass="Alternating" 
        SelectedRowStyle-CssClass="Selected"
        GridLines="None" 
        AutoGenerateColumns="False" 
        DataKeyNames="EmployeeID" 
        DataSourceID="SqlDataSource1" 
        AllowSorting="True" 
        OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
     >
        <Columns>
            <asp:CommandField ShowSelectButton="True" />
            <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
                ReadOnly="True" SortExpression="EmployeeID" />
            <asp:BoundField DataField="FirstName"
 HeaderText="FirstName" SortExpression="FirstName" />
            <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
            <asp:BoundField
 DataField="Country" HeaderText="Country" SortExpression="Country" />
        </Columns>
        <SelectedRowStyle CssClass="Selected" />
        <HeaderStyle CssClass="Header" />
        <AlternatingRowStyle CssClass="Alternating" />
    </asp:GridView>
<asp:SqlDataSource 
        ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
        SelectCommand="SELECT TOP 5 [EmployeeID], [FirstName], [LastName], [Country] 
FROM [Employees]"
/>
</ContentTemplate>
</asp:UpdatePanel>
</p>
The OrderList UserControl is as follows:
<%@ Control Language="C#"
 AutoEventWireup="true" CodeFile="OrderList.ascx.cs"
 Inherits="UserControls_OrderList" %>
<asp:Panel ID="pnlTitle" runat="server" Visible="false">
<p class="title">
    Orders for Employee ID <b><%= this.employeeID %></b>:
</p>
</asp:Panel>
<p>
<asp:UpdatePanel ID="UpdatePanel1"
 runat="server" UpdateMode="Conditional">
<ContentTemplate>
    <asp:GridView 
            ID="GridView1" runat="server" 
            AllowSorting="True" 
            AutoGenerateColumns="False"
            DataKeyNames="OrderID" 
            CssClass="Professional"
            HeaderStyle-CssClass="Header"
            AlternatingRowStyle-CssClass="Alternating" 
            SelectedRowStyle-CssClass="Selected"
            GridLines="None" 
            DataSourceID="SqlDataSource1"
     >
        <Columns>
            <asp:BoundField
 DataField="OrderID" HeaderText="OrderID"
 InsertVisible="False" ReadOnly="True"
                SortExpression="OrderID" />
            <asp:BoundField DataField="CustomerID"
 HeaderText="CustomerID" SortExpression="CustomerID" />
            <asp:BoundField
 DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" />
            <asp:BoundField
 DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" />
        </Columns>
    </asp:GridView>
    <p>
    </p>
<asp:SqlDataSource 
    ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    SelectCommand="SELECT TOP 5 [OrderID], [CustomerID], [OrderDate], [ShipCountry]
 FROM [Orders] WHERE ([EmployeeID] = @EmployeeID)" 
    OnSelecting="SqlDataSource1_Selecting">
    <SelectParameters>
        <asp:Parameter DefaultValue="-1" Name="EmployeeID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>

To start with, let us discuss how this scenario will work. The Employee’s GridView in the EmployeeList UserControl is placed within an UpdatePanel which means any postback that will be fired within the UpdatePanel will be an asynchronous postback and a part-update will be done.

In the event handler of the host page, we will add a call to the Update method of the UpdatePanel located inside the OrderList UserControl. Since the host page caused a partial-update to the EmployeeList we need a way to tell the host page to cause a partial-update to the OrderList UserControl to reflect the changes in the OrderList GridView.

First of all we expose the UpdatePanel located inside the OrderList UserControl so that the host page can force a partial-update on the OrderList UserControl.

The event handler in the host page now looks like Listing 6.

Listing 6

protected void EmployeeListajax1_RowSelected(object sender,
  RowSelectedEventArgs e)
{
  // bind the OrderList with the EmployeeID selected
  this.OrderListajax1.BindData(e.EmployeeID);
  // Force a partial-update
  this.OrderListajax1.AjaxPanel.Update();
}

Notice the call to the Update method of the UpdatePanel located inside the OrderList UserControl. One important note pops up here is that to be able to call the Update method of the UpdatePanel, the UpdatePanel should have the UpdateMode set to Conditional!

In the above scenario we have seen how to enable the application with AJAX by placing the UpdatePanels inside the UserControls directly. Notice that the UpdatePanels in both UserControls are using the same ScrpitManager that is placed on the host page.


View Entire Article

User Comments

Title: very nice   
Name: Serif Emek
Date: 2009-07-28 5:32:09 PM
Comment:
That is just what I was looking for.
Thanks
Title: Re: Vbman   
Name: Bilal Haidar [MVP]
Date: 2008-03-27 10:38:17 AM
Comment:
Hello,
Try to show me the code behind of the usercontrol and how you are setting it on the page!

Thanks
Title: Object reference not set to an instance of an object.   
Name: Vbman
Date: 2008-03-27 10:05:40 AM
Comment:
Great Article!
I have the update panel on the page and the user controls inside the update panel.
I create a property inside the usercontrol that accesses a control, Say the gridviews Tooltip or Pagesize or ...
When I try to set the property on page declaratively I get an error:
Object reference not set to an instance of an object.

I've seen this problem posted in other places but no solution.
Have you run into this and do you have a work around.

Thanks!
Title: Re:   
Name: Bilal Haidar
Date: 2007-10-30 10:43:12 AM
Comment:
Hello,
You can use this converter:
http://bhaidar.net/cs/archive/2007/04/18/telerik-c-vb-net-converter.aspx

Regards
Title: VB.Net   
Name: Jo
Date: 2007-10-30 5:51:05 AM
Comment:
Article is so good. If it is available in vb.net also it will be helpful for the beginners.
Title: Well explained   
Name: Jose
Date: 2007-08-09 4:44:16 AM
Comment:
As usual, you did a great job!

I loved the fact that you showed all the possible combinations you can have with a gridview user control and AJAX. And the sample works really fine!

Jose
Title: Great   
Name: Mark W
Date: 2007-06-25 9:24:07 PM
Comment:
Very well summarized, thanks. I agree, good use of events and generics.

Also, there's a small typo in Listing 5: OrderList UC's UpdatePanel ID should be 'AjaxPanel'.
Title: Nice one   
Name: Wesley Bakker
Date: 2007-06-24 4:32:51 AM
Comment:
Nice article. Decent use of events, AJAX, generics, datasourcecontrols etc. etc.

Cheers,
Wes






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-23 2:03:39 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search