Sample Web Application using ASP.NET 2008

Sample Web Application using ASP.NET 2008

The following content describes the step-by-step procedure to create a new simple website ShopCart in Visual Studio 2008. The connection to the SQL Server database is also explained using ADO.NET

Introduction: The following simple 11 steps help the developer to create a web application, to know basic features of .Net, and learn Connection to the database, who is new to .Net Technology. The web application SHOPCART allows the following features.

1. User can add new items to the database.
2. View the existing items in a grid view.

These features are very simple and basic things for a fresher to learn and know about creating web site in Visual Studio 2008. The Database connection-using ADO.Net is explained and SQL queries to create tables, inserting records and selecting data are explained.

Platform: .Net 2008
Language: C#
Database: SQL Server 2005

Who is it For: This article is useful for a fresh developer who is very new to .Net Technology.

Step 1: Launch Microsoft Visual Studio 2008 from Start Menu -> Programs -> Microsoft Visual Studio 2008 -> Microsoft Visual Studio 2008

Click on File -> New -> Website as shown.



Step 2: The following window appears, select the ASP.NET Web Site (by default this option is selected) template. And select the Language from Language dropdown list, (by default VB.Net is selected). Here I have selected the language as C#. Then, locate your website in any of the location and give any name for your website and click OK button. Here, I have given the website name as ShopCart, please see below.




Step 3: Thus, the Website named ShopCart is loaded, with a page called default.aspx. This is an aspx page, where you can design your web page and code accordingly. Now switch to Design view of the default.aspx page. This is how your Design view of the page looks like:




The Toolbox tab allows you to drag and drop web controls like Textbox, Button, Label, Dropdown List, Grid View, Link Button and many such controls.



Step 5: Now drag Label Control from Toolbox, which appears in the default web page. Right Click on Label and go to Properties. The Properties window appears enter the text WELCOME TO SHOPCART and you can increase font, change its color using Font properties as shown.




Step 6: Drag and drop button controls from Toolbox, and go to their properties, enter text as Add Items, View Items as shown below.



Step 7: Now, lets add one more web page to add items to our website shop cart. To do this, click on Solution Explorer tab, right click on ShopCart and click on Add new Item as shown below.



The following window appears, enter AddItem.aspx as your web page name and click on Add button.



In the similar way, add one more webpage called ViewItem.aspx.


Step 8: Now click on Default.aspx page, and double click on Add Items button, which navigates to Button1_Click event. Write the following code in Button1_Click event.

Response.Redirect("AddItem.aspx");


Similarly double click on View Items button in Default.aspx page, which navigates to Button2_Click event Write the following code in Button2_Click event

Response.Redirect("ViewItem.aspx");

Thus, your page should look like this.





Step 9: Go to Design view of AddItem.aspx page; add 3 labels name Item Name, Description, Item Price and 3 text boxes and 2 buttons named Add and Cancel.
The page should be designed as below




Now double click on Add button, which takes you to Button1_Click event. Write the following code in the Button1_Click event.

string strItemName = TextBox1.Text.ToString();
string strDescription = TextBox2.Text.ToString();
string strPrice = TextBox3.Text.ToString();

//Database connection string
string strConn = "server=SQLSERVERNAME;database=SHOPCART;uid=username;pwd=password;";
string strQuery ="Insert Into ADDItem(Name,Description,Price) Values ('"+strItemName+"', '"+strDescription+"', '"+strPrice+"')";

// using ADO.NET to connect to the database and execute the query
SqlConnection sqlConn = new SqlConnection(strConn);
SqlCommand sqlCmd = new SqlCommand();
sqlCmd.CommandText = strQuery;
sqlConn.Open();
sqlCmd.Connection = sqlConn;
sqlCmd.ExecuteNonQuery();
sqlConn.Close();
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
Label5.Text = " Data Added Successfully";

And add the following in the namespaces
using System.Data.SqlClient;

Note: For the Database I have used SQL Server, you need to write the SQL Server name, username and password in the strConn variable.
In the SQL Server, create a database named SHOPCART, add new table named ADDItem, with columns such as Name, Description, Price.

Here is the query to create a table in SQL

Create table ADDItem
(
Name varchar(50),
Description Varchar(100),
Price varchar(20)
)


With this, you should able to add Items to database.

Now, lets see how to view the items in a grid view.

Step 10: Go to Design view of ViewItem.aspx page, add a grid view from the Toolbox menu, go to its properties make AutoGenerateColumn false, click on Auto Format and choose any of the formats. And then click on Edit Columns Items, add the BoundField column, enter HeaderText and DataText fields as follows.




Thus, your page should appear as follows




Step 11: Press F7 key in ViewItem.aspx page, which navigates to the page load event of the ViewItem. In the page load event write the following code:

//Database connection string
string strConn = "server=SQLSERVERNAME;database=SHOPCART;uid=USERNAME;pwd=PASSWORD";
string strQuery = "Select * from AddItem";
// using ADO.NET to connect to the database and execute the query
SqlConnection sqlConn = new SqlConnection(strConn);
SqlCommand sqlCmd = new SqlCommand();
sqlCmd.CommandText = strQuery;
sqlConn.Open();
sqlCmd.Connection = sqlConn;
SqlDataReader rdr;
rdr = sqlCmd.ExecuteReader();
sqlConn.Close();
GridView1.DataSource = rdr;
GridView1.DataBind();

And add the following in the namespaces
using System.Data.SqlClient;

Note: You can add back buttons on each page and write Response.Redirect(“Default.aspx”) on button click event, thus helps to navigate on each page.

Now, go to Solution Explorer, right click on Default.aspx and select Set as Start page.
Compile your code using F10 key. The build should be succeeded and you should be able to run your shop cart application. To debug the code, can use F5 key.

Conclusion: Thus, the developer should be able to know, how to create a new web application, how to add new web pages, how to insert data into SQL Database, how to fetch data from SQL to ASP.Net using ADO.NET, how to present to the end customer using grid view control and how to build and run your web application.