Multiple user controls don't load asynchronously

6 posts, 0 answers
  1. J
    J avatar
    3 posts
    Member since:
    Mar 2009

    Posted 02 Mar 2009 Link to this post


    I am new to Telerik, AJAX and C#. So please bear with me. I will explain my situation, then post my code below.

    I need for a popup box to appear using jquery. This box has to appear when the user clicks the button to add an item to the cart.

    I have a Master page with a RadMenu on it. I have also added some temporary css formatting for the popup box.

    I have a child page called Catalog. Catalog has the user controls "AddToCart" and "CartFlyout" on them. Also, Catalog has a placeholder for the "CartFlyout" popup. I have a custom event handler on Catalog that runs a function called "Header_AddedToCart." When this function fires, it loads the "Flyout" control with data, and then adds it to the placeholder.

    The "CartFlyout" control has a function called "Show_Product_Flyout" that registers the jquery script for sliding the popup down.
    This works fine. When I add an item to the cart, the flyout appears.

    When I tried to "ajaxify" this set up i get a problem. When I click a button to add an item to the cart, the "AddToCart" updates asynchronously. That's great but now the flyout doesn't appear at all. I debugged the code and the code to execute the flyout is running; but it isn't actually appearing on the page.

    There are many moving parts to this system so I cannot post all of the controls needed to run a true test. I will post as much as I can, but I have ripped out much of unimportant stuff for the sake of brevity:

    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPages/default.master" Inherits="E.Web.UI.Catalog" CodeFile="~/Catalog.aspx.cs" Title="Catalog"%>

    <%@ MasterType VirtualPath="~/MasterPages/default.master" %>

    <%--Since we're building these controls dynamically, we have to reference them here for some damn reason. --%>
    <%@ Register TagPrefix="E" TagName="AddToCart" Src="~/UserControls/AddToCart.ascx"  %>
    <%@ Register TagPrefix="E" TagName="CartFlyout" Src="~/UserControls/CartFlyout.ascx"  %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <asp:Content ID="CenterContent" runat="server" ContentPlaceHolderID="CenterContent">
        <telerik:RadAjaxManager ID="AjaxManager1" runat="server"/>
        <div><asp:PlaceHolder ID="phCartFlyout" runat="server"/></div>    
        <EbscoWebControl:SeparatedRepeater ID="rptCategories" runat="server" RecordsToSeparate="3" OnItemCreated="rptCategories_ItemCreated">
                <div class="categories">
                    <table cellpadding="0" cellspacing="0" border="0" class="layout">
                    <td id="tdCat" runat="server" class="category">
                        <h2><asp:HyperLink ID="hlCategoryLink" runat="server" NavigateUrl='<%# "/catalog.aspx?catid=" + DataBinder.Eval(Container.DataItem, "CategoryName").ToString().ToLower() %>' Text='<%#DataBinder.Eval(Container.DataItem, "DisplayNameOfCategory")%>' /></h2>
                        <asp:Image ID="imgCategoryImage" runat="server" ImageUrl='<%# ImagePath + DataBinder.Eval( Container.DataItem, "DefaultImage" ).ToString().ToLower() + "?w=100" %>'/>                    
                        <div class="description"><asp:Label ID="CategoryDescription" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ShortDescription")%>' /></div>
                        <p><asp:HyperLink ID="hlCategoryLinkMore" runat="server" NavigateUrl='<%# "/catalog.aspx?catid=" + DataBinder.Eval(Container.DataItem, "CategoryName").ToString().ToLower()%>' >View <%#DataBinder.Eval(Container.DataItem, "DisplayName").ToString() %> &#155;&#155;</asp:HyperLink></p>

        <div class="controlsContainer"></div>

    <div class="products">
        <asp:PlaceHolder ID="phProducts" runat="server" />

    <asp:Content ID="RightContent" runat="server" ContentPlaceHolderId="RightContent" Visible="false" />

    protected void Page_Load( object sender, EventArgs e )
                 Page.ItemAdded += new EventHandler(Header_AddedToCart); //custom event handler

    public void Header_AddedToCart(object sender, EventArgs e)
                CartChangedEventArgs ce = (CartChangedEventArgs)e;
                CartFlyout CartFlyout = (CartFlyout)Page.LoadControl("~/UserControls/CartFlyout.ascx");
                CartFlyout.Show_Product_Flyout(ce.ProductId); //function on control user control CartFlyout.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="~/UserControls/CartFlyout.ascx.cs" Inherits="Ebsco.Web.UI.UserControls.CartFlyout" %>

    <asp:Panel ID="panel2" runat="server">
    <div class="box">
        <div id="contactFormContainer">
            <div id="contactForm">
            <div id="closeflyoutLink"><a style="float:right; font: arial normal x-small; color: Blue; text-align:right; background-color: White;" onclick="$(document).ready(function(){$('#contactForm').slideUp('slow');});">Close X</a></div>
                    <label for="FlyoutTitle" style="background-color:Green;    color: Black; font-family: Arial; font-size:medium; font-weight:bold; text-align:center;">My Account</label>
                    <img id="imgProductFlyout" src="" alt="No Image Available" runat="server" style="float:left; border: solid thin black;" />
                    <asp:label runat="server" id="lblProductName" style="float:left; color: Black; font-family: Arial; font-size:medium; text-align:left;"/> <br /><br />
                    <asp:label id="lblLineItemCount" runat="server" style="color: Black; font-family: Arial; font-size:medium; text-align:center;" />
                    <asp:label id="lblPrice" runat="server" style="color: Black; font-family: Arial; font-size:medium; text-align:center; font-weight:bold;" /><br /><br />
                    <asp:label id="lblQtyInCart" runat="server" style="color: Black; font-family: Arial; font-size:medium; text-align:center;" />
                    <asp:label id="lblSubtotal" runat="server" style="color: Black; font-family: Arial; font-size:medium; text-align:center; font-weight:bold;" /><br /><br />
                    <div style="width:80px; height:20px; background-color:Red; border: solid thin blue;">
                        <a id="hlCheckOut" href="#Nogo" runat="server" style=" font-family:Arial; font-size:medium; font-weight:bold; color:White; text-decoration:none;">Checkout</a>

    CODE-BEHIND for CartFlyout:
    protected void Page_Load(object sender, EventArgs e)

            public void Show_Product_Flyout(string strProductId)
                if (null != strProductId)
                    _Product = ((Esws.Web.UI.Page)Page).CurrentProductCatalog.GetProduct(strProductId);
                    ProductName = _Product.Name;
                    String csname1 = "PopupScript";
                    Type cstype = this.GetType();
                    ClientScriptManager cs = Page.ClientScript;
                    if (!cs.IsStartupScriptRegistered(cstype, csname1))
                        string cstext1 = @"$(document).ready(
                            if ($('#contactForm').is(':hidden'))
                                $('#contactForm').animate({opacity: 1.0}, 2000);
                        cs.RegisterStartupScript(cstype, csname1, cstext1, true);
                        string strQuantity = ((Esws.Web.UI.Page)Page).ShoppingCart.LineItemQuantity(strProductId.ToString()).ToString();
                        LineItemCount = "qty: " + strQuantity;
                        DataView drv = _Product.GetProductProperties().DefaultView;
                        DataRow dr = drv.Table.Rows[0];
                        string strPrice = "";
                        strPrice = dr["cy_list_price"].ToString();
                        ProductPrice = strPrice;
                        int nCartQty = ((Esws.Web.UI.Page)Page).ShoppingCart.LineItemCount();
                        CartQuantity = nCartQty + "item(s) in shopping cart.";
                        string strSubTotal = ((Esws.Web.UI.Page)Page).ShoppingCart.SubTotal.ToString();
                        ProductSubtotal = strSubTotal;
                        imgProductFlyout.Src = ConfigurationManager.AppSettings["CatalogImageServer"] + dr["DefaultImage"].ToString() + "?w=" + _ImageWidth;
                        ProductImageHyperlink = ConfigurationManager.AppSettings["SitePath"] + "/viewcart.aspx/";

    <%@ Control Language="c#" AutoEventWireup="true" Inherits="Ebsco.Web.UI.UserControls.AddToCart" CodeFile="~/UserControls/AddToCart.ascx.cs" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <asp:Panel ID="panel1" runat="server">

    <div class="purchase">
        <div class="price">
            <asp:Label ID="lblSalePrice" runat="server" Text="Sale Price:" />
            <asp:Label ID="lblSalePriceValue" runat="server" Text="" /><br />
            <asp:Label ID="lblPrice" runat="server" Text="Regular Price:" />
            <asp:Label ID="lblPriceValue" runat="server" Text="" /><br />
            <asp:Label ID="lblYouSave" runat="server" Text="You Save:" />
            <asp:Label ID="lblYouSaveValue" runat="server" Text="" />
        <div runat="server" class="number quantity" visible="<%# ShowQuantity %>">
            <asp:Label ID="lblQuantity" runat="server" Text="Qty." />
            <asp:TextBox ID="txtQuantity" runat="server" Text="1" MaxLength="3" />
            <strong style="color:#CC0000;">
                <asp:Label ID="lblNotAvailableForSale" runat="server">
                    Contact Us at <br /><%= ConfigurationManager.AppSettings[ "SiteContactPhone" ].ToString() %>
        <div class="button">
            <div class="calltoaction">
                <asp:LinkButton ID="lbAddToCart" runat="server" Text="Add to Order" CommandName="AddToCart" OnCommand="lbAddToCart_Command" />

    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
            <telerik:AjaxSetting AjaxControlID="lbAddToCart">
                    <telerik:AjaxUpdatedControl ControlID="lbAddToCart" />


    protected void Page_Load( object sender, System.EventArgs e )
            protected override void OnPreRender( EventArgs e )
                base.OnPreRender( e );

                if( null != _ProductId )
                    _Product =  Page.CurrentProductCatalog.GetProduct( _ProductId );

                    if( _Product[ "AvailableForSale" ].ToString().ToUpper().Equals( "YES" ) )
                        lbAddToCart.Visible = true;
                        lblQuantity.Visible = _ShowQuantity;
                        txtQuantity.Visible = _ShowQuantity;

                        lblNotAvailableForSale.Visible = false;
                        lbAddToCart.Visible = false;
                        lblQuantity.Visible = false;
                        txtQuantity.Visible = false;

                        lblNotAvailableForSale.Visible = true;

            protected void lbAddToCart_Command( object sender, CommandEventArgs e )
                int Qty;

                if( !Int32.TryParse( txtQuantity.Text, out Qty ) || Int32.Parse( txtQuantity.Text ) < 1 )
                    txtQuantity.Text = "1";

                // Add the selected item
                Page .ShoppingCart.AddItem( Page .CurrentCatalogName, lbAddToCart.CommandArgument.ToString(), null, Convert.ToInt32( txtQuantity.Text ), null );

                // Reset Quantity
                QuantityValue = "1";

                // Bubble the event up, should anyone care
                if( null != CartChangedEvent )
                    CartChangedEvent( this, e );

    Page.ShoppingCart.LineItems()[ lbAddToCart.CommandArgument.ToString() ] ) );

                // Save the ProductId housekeeping
                ProductId = lbAddToCart.CommandArgument.ToString();

  2. Iana Tsolova
    Iana Tsolova avatar
    3388 posts

    Posted 05 Mar 2009 Link to this post


    I went through your code, and I only found an ajax setting where the "lbAddToCart" button updates itself. However, if you need this button to update some other page content/controls, you need to add these controls to the UpdatedControls collection as well.

    Additionally, if you could strip down your scenario into a simple project and asend it to us would be of great help in finding a resolution for you.

    Kind regards,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Wissam
    Wissam avatar
    5 posts
    Member since:
    Feb 2012

    Posted 02 Oct 2012 Link to this post

    I need to load multiple usercontrol asynchronously, how to do that in telerik?

    thank you
  4. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 05 Oct 2012 Link to this post


    You could get an instance of the main RadAjaxManager using its GetCurrent() method in the content page server side and add programmatic ajax settings for the needed controls. Also you could add a asp Timer control in order to trigger the UserControls loading. When the timer elapses, you could load the user control you want and show LoadingPanel which could be set as DefaultLoadingPanelID for the main RadAjaxManager.

    I hope this helps.

    Kind regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. SKande
    SKande avatar
    27 posts
    Member since:
    May 2013

    Posted 16 May 2013 Link to this post

    Hello Maria,
    I am new to Telerik
       I have so many user controls on my page so do we need to add ajax manager on each user control or one ajax manager on the page will be enough. If we need to have onAjax request method for more tha one telerik control how we can assign the method.
  6. Andrey
    Andrey avatar
    836 posts

    Posted 21 May 2013 Link to this post


    Basically, it is recommended to place the RadAjaxManager to the top level of the page hierarchy. That means in your case you need to add RadAjaxManagerProxy control in each user control and add RadAjaxManager in the host page or in the Master page.

    About your other question you could have as many listeners to an event as you want. In order to hook a listener to the event you should use the RadAjaxManager.GetCurrent(Page) method. This method will return the instance of the RadAjaxManager that is Ajax-ifying the current page.

    I hope the provided information helps.

    Kind regards,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top