Multiple user controls don't load asynchronously

[J]

Greetings,

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:

CATALOG.ASPX:
<%@ 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">
        <HeaderTemplate>
            <div class="categories">
                <table cellpadding="0" cellspacing="0" border="0" class="layout">
                    <tr>
        </HeaderTemplate>
            <ItemTemplate>
                <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>
                </td>
            </ItemTemplate>

        <SeparatorTemplate>
                    </tr>
                    <tr>
        </SeparatorTemplate>
        
        <FooterTemplate>
                    </tr>
                </table>
            </div>
        </FooterTemplate>
    </EbscoWebControl:SeparatedRepeater>
    
    <div class="controlsContainer"></div>
    

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

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

CATALOG CODE-BEHIND:
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.
            phCartFlyout.Controls.Add(CartFlyout);
          }

CARTFLYOUT.ASCX:
<%@ 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>
            <fieldset>
                <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>
                </div>
           </fieldset>
        </div>
    </div>
</div>
</asp:Panel>




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(
                    function()
                    {
                        if ($('#contactForm').is(':hidden'))
                        {
                            $('#contactForm').slideDown('slow');
                            $('#contactForm').animate({opacity: 1.0}, 2000);
                            $('#contactForm').slideUp('slow');                    
                        }
                        else
                        {
                            $('#contactForm').slideUp('slow');
                        }
                    });";
                    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/";
                }
            }
        }
    }

ADDTOCART.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>
    
    <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() %>
            </asp:Label>
        </strong>        
    </div>
    
    <div class="button">
        <div class="calltoaction">
            <asp:LinkButton ID="lbAddToCart" runat="server" Text="Add to Order" CommandName="AddToCart" OnCommand="lbAddToCart_Command" />
        </div>
    </div>
</div>

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

CODE-BEHIND for ADDTOCART:

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;
                }
                else
                {
                    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();
        }
    }

[Iana Tsolova]

Hi,

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,
Iana
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.

[Wissam]

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

thank you

[Maria Ilieva]

Hi,

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

[SKande]

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.

[Andrey]

Hello,

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,
Andrey
the Telerik team