Order-Related Modules for an ASP.NET AJAX Server-Centric Based Online Shopping Website - Behind the Scenes

(Page 2 of 7 )

Behind the Scenes

Now let's explore the HTML coding. Here, again, due to the length of the contents we only list the most important part, as follows.

<td align="center" style="width: 577px;" valign="top">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="ProductList" EventName="ItemCommand" />

</Triggers>

<ContentTemplate>

<asp:GridView ID="ProductView" CssClass="Text" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="ProductID" ShowHeader="False" OnRowCommand="ProductView_RowCommand" OnRowCreated="ProductView_RowCreated">

<FooterStyle ForeColor="White" BackColor="#3B6BD1" Font-Bold="True"></FooterStyle>

<SelectedRowStyle Font-Bold="True" ForeColor="Navy" BackColor="#FFCC66" BorderColor="CornflowerBlue" />

<RowStyle ForeColor="#333333" BackColor="#FFFBD6" BorderColor="CornflowerBlue" BorderStyle="Solid" BorderWidth="1px" />

<Columns>

<asp:TemplateField>

<ItemTemplate>

<table cellpadding="2" cellspacing="0" width="100%" border="0" class="Text">

<tr>

<td>

<a href='../Admin/Product/ProductInfo.aspx?ProductID=<%# DataBinder.Eval(Container.DataItem,"ProductID")%>' target="_blank">

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

<asp:Image ID="ProductPicture" Runat="server" Width="90" Height="120" ImageUrl='<%# Eval("PictureID", "../Handler.ashx?Id={0}") %>' > </asp:Image>

 

</asp:Panel></a>

</td>

<td style="width: 100%;" valign="top">

<table cellpadding="0" cellspacing="0" border="0" class="Text" style="width: 100%;">

<tr><td style="width: 50%;" align="left" valign="top">

<table cellpadding="0" style="width: 100%;" cellspacing="0" border="0">

<tr>

<td><strong class="Title">Product Name:</strong><a href='../Admin/Product/ProductInfo.aspx?ProductID=<%# DataBinder.Eval(Container.DataItem,"ProductID")%>' target="_blank"><%# DataBinder.Eval(Container.DataItem,"Name")%></a>

</td>

</tr>

<tr>

<td><strong class="Title">Price:</strong><asp:Label ID="Price" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"OutPrice")%>'></asp:Label>

</td>

</tr>

</table>

</td>

<td style="width: 50%;" align="left" valign="top">

<table cellpadding="0" style="width: 100%;" cellspacing="0" border="0" class="Normal">

<tr>

<td><strong class="Title">Manufacturer:</strong><%# DataBinder.Eval(Container.DataItem,"Sell")%></td>

</tr>

<tr>

<td><strong class="Title">Manufacturing Date:</strong><%# DataBinder.Eval(Container.DataItem,"CreateDate")%></td>

</tr>

</table>

</td>

</tr>

<tr><td colspan="2" align="left"><strong class="Title">Description:</strong><br /><%# DataBinder.Eval(Container.DataItem,"Desn")%></td></tr>

<tr><td colspan="2" align="left"><hr size="1" /></td></tr>

<tr><td colspan="2" align="left"><a href='../Admin/Product/ProductInfo.aspx?ProductID=<%# DataBinder.Eval(Container.DataItem,"ProductID")%>' target="_blank">

Details</a>&nbsp;&nbsp;&nbsp;<a href='../Desktop/Comment.aspx?ProductID=<%# DataBinder.Eval(Container.DataItem,"ProductID")%>' target="_blank">

View Product Comment</a>

 

<asp:Button ID="BuyBtn" Runat="server" CssClass="ButtonCss" Text="Add to shopping cart" Width="50%" CommandName='<%#DataBinder.Eval(Container.DataItem,"Name") %>'></asp:Button>

</td></tr>

</table>

</td>

</tr>

</table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

</td>

First, the above code only relates to the GridView control that is used to display the corresponding product information that belongs to the selected product category. To gain a partially refreshing effect, we typically use an ASP.NET AJAX server control named UpdatePanelto enclose the GridView control.

Next: More Behind the Scenes Code >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Order-Related Modules for an ASP.NET AJAX Server-Centric Based Online Shopping Website

>>> Be the FIRST to comment on this article!