In this article we will create a table in a web application programmatically. Instead of a database table we will create a table in a code behind file using the DataTable class. We can add rows in this table dynamically from front ends through user input as many as we want. Basically this technique is used for adding and showing temporary data at run time.
All the code related to this mini application is given below. So let's start to create this web application.
Step 1: Open Visual Studio 2010.
- Go to Visual Studio 2010
- New-> Select a website application
- Click OK
Step 2: Now we will add a new aspx page to our project; do the following for that:
- Go to the Solution Explorer
- Right-click on the Project name
- Select add new item
- Add new web page and give it a name
- Click OK
Step 3: This is the code of the .aspx file that determines how our page looks:
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"Inherits="Default2" %>
<!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>
</head>
<body style=" background-color:Yellow">
<form id="form1" runat="server">
<div >
<asp:gridview runat="server" ID="Gv1" AutoGenerateColumns="true" HeaderStyle-BackColor="Red" BackColor="LightBlue"
BorderWidth="5" BorderColor="Blue">
</asp:gridview>
</div>
<div>
<h1>Add New Row.....</h1>
Product NO:
<asp:TextBox ID="txtb1" runat="server"></asp:TextBox>
<br />
Product Name:
<asp:TextBox ID="txtb2" runat="server"></asp:TextBox>
<br />
Order Date:
<asp:TextBox ID="txtb3" runat="server"></asp:TextBox>
<asp:Label runat="server" Text="dd/mm/yyyy"></asp:Label>
<br />
Quantity:
<asp:TextBox ID="txtb4" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button runat="server" OnClick="Addnewrow" Text="Add Row" />
</div>
</form>
</body>
</html>
Step 4: This is the code behind file code. It contains the logic of application:
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Default2 : System.Web.UI.Page
{
DataTable tb = new DataTable();
DataRow dr;
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
createtable();
}
public void createtable()
{
tb.Columns.Add("Prod_NO", typeof(string));
tb.Columns.Add("Prod_Name", typeof(string));
tb.Columns.Add("Order_Date", typeof(string));
tb.Columns.Add("Quantity", typeof(string));
dr = tb.NewRow();
dr["Prod_NO"] = "101";
dr["Prod_Name"] = "Product1";
dr["Order_Date"] = "12/06/2012";
dr["Quantity"] = "50";
tb.Rows.Add(dr);
dr = tb.NewRow();
dr["Prod_NO"] = "102";
dr["Prod_Name"] = "Product2";
dr["Order_Date"] = "15/06/2012";
dr["Quantity"] = "70";
tb.Rows.Add(dr);
Gv1.DataSource = tb;
Gv1.DataBind();
ViewState["table1"] = tb;
}
protected void Addnewrow(object sender, EventArgs e)
{
tb =(DataTable) ViewState["table1"];
dr = tb.NewRow();
dr["Prod_NO"] = txtb1.Text;
dr["Prod_Name"] = txtb2.Text;
dr["Order_Date"] = txtb3.Text;
dr["Quantity"] = txtb4.Text;
tb.Rows.Add(dr);
Gv1.DataSource = tb;
Gv1.DataBind();
txtb1.Text = "";
txtb2.Text = "";
txtb3.Text = "";
txtb4.Text = "";
}
}
Step 5: After running the application, it look like this:
To add a new row you will fill in all the text boxes and click the Add Row button:
Now you can see one row added in the GridView:
