ASP 4.0 Table, TableRow & TableCell
We know html provides Table tag to form the row and column of data. The table is also used to layout the html elements in a formatted way. Asp 4.0 provides a control called Table and using this we can create tables without using the Tr and Td tags. The Table Control contains one or more TableRow Control and a TableRow Control can have one or more TableCell Controls. ASP.Net derived all these controls from the WebControl class. In this lab, we will create a Table Control and generate row and columns of data. Note, ASP.Net do not remember the content of table control between web requests. The data should be persisted, or one should use sessions. We will learn about session and DB in the later Labs.
1: Create ASP Table Control at Design Time
One can create a Table at design time to show the static content. The steps below will help you learn how Table, TableRow and TableCell work together to form a Table of data.
Drop The Control
1) Create a New WebForm called 06_TableTableRowTableCell.aspx web form. Note, here we use the same website which we used in the previous labs.
2) You can locate a
Table Control from the toolbox. Other controls
TableRow &
TableCell will be created from the Table Control’s property later.
3) Drag & Drop the Table control to the Web Form.
4) Once we drop the control, one can see ### here which denotes we placed control on the Form.
Add TableRow
5) Got to the properties window of the Table control and click the ellipsis button to edit the
Rows property.
6) You will land in TableRow Collection Editor dialog. This dialog let you edit or add one or more table rows. Click three times to add three rows to the Table. Note, this action will create three TableRow Controls and add them to the Table Control.
7) The members list shows the added TableRow entries. Select the first entry on the list.
Add TableCell
8) Click the ellipsis (…) button in the
Cells property to land on the TableCell Collection Editor.
9) Click the Add button three times to add three TableCell controls to the TableRow which you selected in sub-step 7.
10) Shows list of TableCell entries.
11) Select First entry and set
Text property as Row 1 – A. Select second entry and set Text property as Row 1 – B. Set Row 1 – C for the third one. Click OK to close the TableCell Collection Editor. Now, we added Cell for the first table row. Repeat the steps (7-11) for the other two TableRow entries.
12) In the Design view, expand the table to see the data. You can also run the form to see the table of data formed at design time.
13) The Design view shows the entry for ASP’s Table Control.
14) Shows Table contains TableRow Control. The marker shows one entry. But there will be two more entries after ending the TableRow.
15) You can see TableRow contains three TableCell ASP Control. By going through this design view, you can see how ASP performs control containment to form the Table.
2: Populate ASP Table Control at Runtime
In the last section, we entered data manually for the ASP 4.0 Table control. Now, we will add the data at runtime. Have a look at the Sub-Step chart below:
1) Remove all the content of the ASP table from the design view. This will remove the data and make the table empty. Name the control as MyTable and set other properties as shown. You can either type the attributes in the source view or use the property window to set individual properties.
2) Add a Button below the Table Control and set the properties. Name is btnAdd and we handled Click event.
3) In the click event, we run a nested loop.
TableCell represents the data part, and we set its text property with a dynamic string.
4) In the inner for loop, we create a TableCell on every iteration and add it to the
TableRow. Cells is the TableCell collection which we can access from the TableRow. The Add method will add a data cell to the table row.
5) In the outer loop, before starting the inner loop, we create a TableRow. We will populate this row with cells in the inner loop.
6) When we come out of the Inner loop, the TableRow is ready & populated with TableCell controls. Now it is time to add this TableRow to the Table Control and we do so by calling the Add method of the Rows property, which is a collection of TableRow.
7) Shows the result produced in the browser when the user clicks the button, Prepare Table.
Code Reference
06_TableTableRowTableCell.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="06_TableTableRowTableCell.aspx.cs" Inherits="_06_TableTableRowTableCell" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { font-family: Arial; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Table ID="MyTable" runat="server" Height="27px" Width="908px" BackColor="#FFFFCC" BorderColor="#3333CC" BorderStyle="Double" BorderWidth="1px" CellPadding="2" CellSpacing="2" GridLines="Both"> </asp:Table> </div> <asp:Button ID="btnAdd" runat="server" onclick="btnAdd_Click" Text="Prepare Tables" /> </form> </body> </html> |
06_TableTableRowTableCell.aspx.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _06_TableTableRowTableCell : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnAdd_Click(object sender, EventArgs e) { for (int i = 1; i < 11; i++) { TableRow Tr = new TableRow(); for (int j = 1; j < 11; j++) { TableCell tc = new TableCell(); tc.Text = i + "*" + j + " = " + (i * j); Tr.Cells.Add(tc); } MyTable.Rows.Add(Tr); } } } |
Categories: ASP 4.0
Tags: add method, Cells Property, Rows Property, Table Control, TableCell Control, TableRow Control
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.