Creating an Online Shopping Cart and PayPal System - The Page Declaration
(Page 3 of 4 )
<%@ page inherits="shop.site" src="cs/site.aspx.cs" %>
The page declaration simply tells our page what namespace and class it belongs to; in this case our namespace is "shop" and our class is "site". There is an additional property defined called "src" which points to the plain text .cs file that contains the site class.
I normally have my classes contained in external .cs files as opposed to manually compiling them to .dll files during development. I do most of my coding with a simple text editor (Crimson Editor), so compiling with the command line after each change would be pretty time consuming. Having the files as external .cs files means that each time the page is viewed after a change has been made, it will automatically get recompiled into a new cached dll by the server. If I was using Visual Studio or one of the free Express IDEs, I'd use pre-compiled dlls during development, because it would then be a simple case of hitting Build to generate them. I do build the classes into pre-compiled dlls once I have finished working on them, but during development I prefer to spend my time coding, not compiling. I could write a batch file to do the command line compilation via a simple double click, but I'm extremely lazy and never got into the habit of doing this.
Binding Data
<asp:GridView
id="gvBasket"
AutoGenerateColumns="false"
ShowHeader="True"
ShowFooter="True"
DataKeyNames="id"
OnRowDataBound="gvBasket_RowDataBound"
runat="server">
<Columns>
<asp:ImageField DataImageurlField="thumb" alternatetext="Product Thumbnail" readonly="true" />
<asp:TemplateField HeaderText="Item">
<ItemTemplate>
<h3><asp:Literal id="litItemName" runat="server" /></h3>
</ItemTemplate>
<FooterTemplate>
<a href="delivery-costs.aspx" title="View the list of delivery charges">Delivery Charges</a>
<br /><hr />
<b>Total</b>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
If you take a closer look at both of the GridViews you will notice that they both have AutoGenerateColumns set to false. Without this line, or if it was set to true, our columns would be created for us when we bind the DataSource. By turning this feature off we can define our own columns using the "Columns" sub tag. Inside that we can create a number of different type columns. In this demonstration we have used the ImageField and TemplateField column types. The ImageField column takes an image path as its value via the DataImageUrlField property and then displays that image inside its own column when rendered to the page.
The TemplateField is the real gem column. It allows you to define a HeaderTemplate, an ItemTemplate and a FooterTemplate among others. These three tags let you put any content you want into these areas. The HeaderTemplate and FooterTemplate both refer to that column's header and footer, and the ItemTemplate refers to the body content that is displayed in that column for each row.
If you look at the basket GridView you will see that we've used the ItemTemplate to show the name, price and quantity of each item in the basket, and then in the FooterTemplate we are displaying both the delivery charges and the totals. The above snippet just shows the "name" column and its footer; to see the full implementation look in the default.aspx source file. Because the headers for each column are just going to be static text we skipped using the HeaderTemplate and instead opted for the HeaderText property of the TemplateField. To show the header and footer of a GridView you must set the ShowHeader and ShowFooter properties to True on the GridView.
Another reason the ItemTemplate is great to use is that you can put other HTML and .net tags inside it. In the demonstration there are several different types including <input>, <br />, <hr />, <asp:Literal> and <a>. The only downside to putting these inside an ItemTemplate tag is that you have to do a little more work to pre-populate them, but luckily it isn't much. The first step is to set the RowDataBound event on the GridView. You assign a function to this that will get called each time a row is created after we bind our DataSource. You can see this in the basket GridView properties:
OnRowDataBound="gvBasket_RowDataBound"
The equivalent function for the product GridView is simpler but it only shows how to populate the ItemTemplate and not the Header or Footer templates.
Next: An Important Function >>
More C# Articles
More By Tann San
/ 28 
