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

UserControl inside an UpdatePanel

In this scenario we will use the original UserControls and place them inside UpdatePanels on the host page. This means that no additional work of adding any UpdatePanel is needed on the UserControls’ side.

We will get the same behavior as in the above scenario where clicking an Employee record in the EmployeeList UserControl will cause an asynchronous postback and a partial update to the OrderList UserControl.

The code inside the host page is as follows:

Listing 7

<%@ Page Language="C#"
 AutoEventWireup="true" StylesheetTheme="Default"
 CodeFile="UserControlsInsideUpdatePanels.aspx.cs"
 Inherits="UserControlsInsideUpdatePanels" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <div>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <bhaidar:employeelist ID="EmployeeList1" runat="server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <br />
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <bhaidar:orderlist id="OrderList1" runat="server" />
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger
 ControlID="EmployeeList1" EventName="RowSelected" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>
    </form>
</body>
</html>

What you will notice in the code snippet above is the presence of the Triggers property inside the UpdatePanel. This property tells the UpdatePanel to update its content when the control listed in the Triggers section fires its event. In this context, when the EmployeeList event RowSelected is fired, the second UpdatePanel that contains the OrderList UserControl shall be updated in a partial-update fashion.

We could have also not used the Triggers property and instead caused a refresh to the UpdatePanel programmatically as explained in the above scenario.

The only difference between the two scenarios is that the UserControls are left untouched and the UpdatePanels were added on the host page. This has an advantage over the first scenario especially when it comes to adding AJAX to already existing applications. With this scenario in hand, you do not have to do any extra work on your existing UserControls. You only have to add UpdatePanels into the host page. This leaves the UserControl free and usable in any situation, even where no AJAX is required!


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-28 10:37:17 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search