ASP.
NET & ADO.NET
Examples
Getting Started with ASP.NET and Database Communication using ADO.NET
Hans-Petter Halvorsen
Web Form and ADO.NET Examples
In this Tutorial we will create the following Examples:
Web Form Example 1
Web Form Example 2
Web Form and ADO.NET Examples
In this Tutorial we will create the following Examples:
Web Form Example 3
Web Form Example 4
SQL Server Database
Hans-Petter Halvorsen
Create Database and Table used in
Examples
Web Form Example 1
Writing Data to Database
Hans-Petter Halvorsen
Web Form Example 1
We will create the following Web Form Example:
Create ASP.NET Project
Finetune GUI elements in
(WebForm1.aspx)
the Code window
Create Web Form
Drag Textboxes and a Button
from the Toolbox and update
Properties
Double-click to create Event Handler
ASPX Code (WebForm1.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="Database_Web_Example.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Car Registration Form</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Car Example</h1>
Registration Number:<br />
<asp:TextBox ID="txtRegistrationNumber" runat="server" Width="200px"></asp:TextBox>
<br />
Car Type:<br />
<asp:TextBox ID="txtCarType" runat="server" Width="200px"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save Data" />
</div>
</form>
</body>
</html>
Create C# Code (WebForm1.aspx.cs)
Your Database
Create C# Code (WebForm1.aspx.cs)
using System;
using System.Data.SqlClient;
namespace Database_Web_Example
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
protected void btnSave_Click(object sender, EventArgs e)
{
string sqlQuery = "INSERT INTO CAR VALUES (" + "'" + txtRegistrationNumber.Text + "'" + "," + "'" + txtCarType.Text + "'" + ")";
SqlConnection conDB = new SqlConnection("Data Source=<Your Database >;Initial Catalog=TEST;Integrated Security=True");
conDB.Open();
SqlCommand sc = new SqlCommand(sqlQuery, conDB);
sc.ExecuteNonQuery();
conDB.Close();
}
}
}
Visual Studio Project
Running Web Form
Entering and Saving Data
You are finished with the Example
Web Form Example 2
Getting Data from Database
Hans-Petter Halvorsen
Web Form Example 2
We will create the following Web Form Example:
Create a new
Web Form
(WebForm2.aspx)
ASPX Code (WebForm2.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="Database_Web_Example.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Car List</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Car Example</h1>
Car Type List:<br />
<asp:DropDownList ID="listCarTypes" runat="server" Height="16px" Width="200px">
</asp:DropDownList>
<br />
</div>
</form>
</body>
</html>
Create C# Code (WebForm2.aspx.cs)
Your Database
Create C# Code (WebForm2.aspx.cs)
using System;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
namespace Database_Web_Example
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conDB = new SqlConnection("Data Source=<Your Database>;Initial Catalog=TEST;Integrated Security=True");
conDB.Open();
string sqlQuery = "SELECT CarType FROM CAR ORDER BY CarType";
SqlCommand sc = new SqlCommand(sqlQuery, conDB);
SqlDataReader reader;
reader = sc.ExecuteReader();
while (reader.Read())
{
ListItem newItem = new ListItem();
newItem.Text = reader["CarType"].ToString();
listCarTypes.Items.Add(newItem);
}
conDB.Close();
}
}
}
Visual Studio Project
Running Web Form
You are finished with the Example
Web Form Example 3
Getting spesific Data from Database
based on User Interaction
Hans-Petter Halvorsen
Web Form Example 3
We will create the following Web Form Example:
Create a new
Web Form
(WebForm3.aspx)
ASPX Code (WebForm3.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs"
Inherits="Database_Web_Example.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Select Car Registration Number</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Car Example</h1>
Car Number List:<br />
<asp:DropDownList ID="listCarNumbers" runat="server" Height="16px" Width="200px">
</asp:DropDownList>
<br />
<br />
<asp:Button ID="btnGetCarType" runat="server" OnClick="btnGetCarType_Click" Text="Get CarType" />
<br />
The Car Type is: <asp:Label ID="lblCarNumber" runat="server" Text="Label"></asp:Label>
<br />
</div>
</form>
</body>
</html>
Create C# Code (WebForm3.aspx.cs)
Create C# Code (WebForm3.aspx.cs)
using System;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
namespace Database_Web_Example
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillCarNumberList();
}
}
protected void btnGetCarType_Click(object sender, EventArgs e)
{
GetCarType();
}
}
}
Create C# Code (WebForm3.aspx.cs)
void FillCarNumberList()
{
SqlConnection conDB = new SqlConnection("Data Source=<Your Database>;;Initial Catalog=TEST;Integrated Security=True");
conDB.Open();
string sqlQuery = "SELECT RegistrationNumber FROM CAR ORDER BY RegistrationNumber";
SqlCommand sc = new SqlCommand(sqlQuery, conDB);
SqlDataReader reader;
reader = sc.ExecuteReader();
while (reader.Read())
{
ListItem newItem = new ListItem();
newItem.Text = reader["RegistrationNumber"].ToString();
listCarNumbers.Items.Add(newItem);
}
conDB.Close()
}
Create C# Code (WebForm3.aspx.cs)
void GetCarType()
{
SqlConnection conDB = new SqlConnection("Data Source=<Your Database>;Initial Catalog=TEST;Integrated Security=True");
conDB.Open();
string sqlQuery = "SELECT CarType FROM CAR WHERE RegistrationNumber='" + listCarNumbers.SelectedItem.Text + "'";
SqlCommand sc = new SqlCommand(sqlQuery, conDB);
SqlDataReader reader;
reader = sc.ExecuteReader();
if (reader.Read())
{
lblCarNumber.Text = reader["CarType"].ToString();
}
conDB.Close();
}
}
Visual Studio Project
Running Web Form
You are finished with the Example
Layout
Hans-Petter Halvorsen
Web Form Example 4
Bootstrap
Hans-Petter Halvorsen
Bootstrap
• Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.
• Bootstrap is completely free to download and use!
• Bootstrap is a free front-end framework for faster and easier
web development
• Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, etc.
• Bootstrap also gives you the ability to easily create responsive
designs
http://getbootstrap.com
http://www.w3schools.com/bootstrap/
Create Layout with Bootstrap
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Database_Web_Example.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Car Registration Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<div class="panel panel-success">
<div class="panel-heading">
<h1>Car Example</h1>
</div>
<div class="panel-body">
<label for="txtRegistrationNumber">Registration Number:</label>
<asp:TextBox ID="txtRegistrationNumber" runat="server" Width="200px" class="form-control"></asp:TextBox>
<label for="txtCarType">Car Type:</label>
<asp:TextBox ID="txtCarType" runat="server" Width="200px" class="form-control"></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save Data" class="btn btn-success" />
</div>
</div>
</div>
</form>
</body>
</html>
Final Results
You are finished with the Example
Hans-Petter Halvorsen, M.Sc.
University College of Southeast Norway
www.usn.no
E-mail: [email protected]
Blog: http://home.hit.no/~hansha/
