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() %> ››</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();
}
}
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() %> ››</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();
}
}