Introduction
We always face online registration form, application form, feedback form, query
form and even if we want to create new email id we must face form to feed our
information or else. But for the beginners of ASP.Net, it is very complex task
to accomplish. Because when I was beginner in the same, I faced lots of problem
like database configuration settings on local host and even on shared host. But
in this article I will explain the simplest way to get connected with MS SQL
Server Database, and also to fetch all information on web form. In different
books, web articles there are couples of way discussed to accomplish but here is
the simplest one.
Perquisites
There is something listed which I expect from you
- You should know, how to open and create simple web pages and tables
- You should know, how to create MS SQL Server Databases
- You should have Visual Studio 2005/2008 or Visual Web Developer 2005/2008
installed and running ok.
Steps to Create Form
Step 1:
Create a web page and place the controls as listed below:
| Control Name |
Property 1 |
Property 2 |
Property 3 |
| TextBox1 |
Id =fname |
|
|
| TextBox2 |
Id =lname |
|
|
| TextBox3 |
Id =dob |
|
|
| TextBox4 |
Id =gender |
|
|
| TextBox5 |
Id =fathername |
|
|
| TextBox6 |
Id =contact |
|
|
| TextBox7 |
Id =address |
|
|
| Button1 |
Id =submit |
Text=Submit |
|
| Label1 |
Id =conform |
Text=
Submitted, thank you ! |
Visible=False |
![form1.gif]()
Step 2:
In this step we will create the database in MS SQL Server as per the information
given below:
Database Name = onlineapplicationform.mdf
Table Nem = onlineapplication
| Columns Name |
Data Types |
Allow Nulls
|
Property 3 |
| id |
int |
Not Checked |
|
| fname |
varchar(50) |
Checked |
|
| lname |
varchar(50) |
Checked |
|
| dob |
varchar(50) |
Checked |
|
| gender |
char(10) |
Checked |
|
| fathername |
varchar(50) |
Checked |
|
| contact |
int |
Checked |
only 6 digits |
| address |
varchar(100) |
Checked |
|
![form2.gif]()
Step 3:
In this step we will discuss, how to show that data available in database on web
form. For this, we simply drag the table named 'onlineapplication' from Database
Explorer and drop it on the web form. Now it will automatically establish the
connect strings in web.config file. But we don't have any data in database to
show it on form so simply it will show you 'There are no data records to
display' message on the form. Now take a step to code behind to connect it to
database and then after we can insert our data in table and view it on form that
what we have given. Here is the screenshots of working process.
![form3.gif]()
![form4.gif]()
Step 4:
In this step we will discuss about the coding.
In Default.aspx Page
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.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>Simple
Application Form in ASP.Net</title>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div>
<strong><span
style="font-size: 14pt;
color: #0000ff">Simple Application Form In ASP.Net</span></strong><br
/>
<br
/>
<br
/>
<br
/>
<table>
<tr>
<td
style="width: 123px">
First Name</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="fname"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Last Name</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="lname"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Date of Birth</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="dob"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Gender</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="gender"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Father's Name</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="fathername"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Contact Number</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="contact"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px">
Address</td>
<td
style="width: 63px">
:</td>
<td
style="width: 193px">
<asp:TextBox
ID="address"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 123px;
height: 21px">
</td>
<td
style="width: 63px;
height: 21px">
</td>
<td
style="width: 193px;
height: 21px">
<asp:Label
ID="conform"
runat="server"
Text="Submitted, thank
you !" Visible="False"
Width="152px"></asp:Label></td>
</tr>
<tr>
<td
style="width: 123px">
</td>
<td
style="width: 63px;
text-align: center">
</td>
<td
style="width: 193px">
<asp:Button
ID="submit"
runat="server"
Text="Submit"
OnClick="submit_Click"
/></td>
</tr>
</table>
</div>
<br
/>
<br
/>
<strong><span
style="text-decoration:
underline">Database Details</span></strong><br
/>
<br
/>
<asp:GridView
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
EmptyDataText="There
are no data records to display.">
<Columns>
<asp:BoundField
DataField="id"
HeaderText="id"
SortExpression="id"
/>
<asp:BoundField
DataField="fname"
HeaderText="fname"
SortExpression="fname"
/>
<asp:BoundField
DataField="lname"
HeaderText="lname"
SortExpression="lname"
/>
<asp:BoundField
DataField="dob"
HeaderText="dob"
SortExpression="dob"
/>
<asp:BoundField
DataField="gender"
HeaderText="gender"
SortExpression="gender"
/>
<asp:BoundField
DataField="fathername"
HeaderText="fathername"
SortExpression="fathername"
/>
<asp:BoundField
DataField="contact"
HeaderText="contact"
SortExpression="contact"
/>
<asp:BoundField
DataField="address"
HeaderText="address"
SortExpression="address"
/>
</Columns>
</asp:GridView>
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$
ConnectionStrings:onlineapplicationformConnectionString1
%>"
ProviderName="<%$
ConnectionStrings:onlineapplicationformConnectionString1.ProviderName
%>"
SelectCommand="SELECT
[id], [fname], [lname], [dob], [gender], [fathername], [contact], [address] FROM
[onlineapplication]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
In Default.aspx.cs Page
using
System;
using
System.Data;
using
System.Configuration;
using
System.Data.SqlClient;
using
System.ComponentModel;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
public
partial class
Default2 : System.Web.UI.Page
{
public string
GetConnectionString()
{
//we will set up the configuration which will
call our
//web.config file to provide the
database details because
//in configuration file we have created
the <connectionStrings>
//in the process we draged and droped.
It creates automatically.
//We normally put the database details
in web.config file or
//machine.config file because it is
very sensitive information
//usually there IP address of remote
database, passwords and
//user names are stored.
return System.Configuration.ConfigurationManager.ConnectionStrings
["onlineapplicationformConnectionString1"].ConnectionString;
//in above line
"onlineapplicationformConnectionString1" is
//our configuration name which is
inside the web.config file.
}
private void
execution(string fname,
string lname, string dob,
string gender, string
fathername, string contact,
string address)
{
//In above line we declaring different
variables same as backend
SqlConnection conn =
new SqlConnection(GetConnectionString());
//In above line we are calling connection
//string function which is defined
already on top
string sql =
"INSERT INTO onlineapplication (fname, lname, dob,
gender, fathername, contact, address) VALUES "
+ " (@fname, @lname, @dob, @gender, @fathername,
@contact, @address)";
//In above lines we are just storing the sql
commands which
//will insert value in
onlineapplication named table,
//using variable named sql.
try
{
conn.Open();
SqlCommand cmd =
new SqlCommand(sql,
conn);
//In above lines we are opening the
connection to work and
//also storing connection name and
sql command in cmd variable
//which has 'SqlCommand' type.
SqlParameter[] pram =
new SqlParameter[7];
//In above lines we are defining 7 sql
parameters will be use
//In below lines we will not
disscuss about id column
pram[0] = new
SqlParameter("@fname",
SqlDbType.VarChar, 50);
pram[1] = new
SqlParameter("@lname",
SqlDbType.VarChar, 50);
pram[2] = new
SqlParameter("@dob",
SqlDbType.VarChar, 50);
pram[3] = new
SqlParameter("@gender",
SqlDbType.Char, 10);
pram[4] = new
SqlParameter("@fathername",
SqlDbType.VarChar, 50);
pram[5] = new
SqlParameter("@contact",
SqlDbType.Int, 20);
pram[6] = new
SqlParameter("@address",
SqlDbType.VarChar, 100);
//Now we set-uped all fiels in database in
above lines
//Now we will set-up form fields
pram[0].Value = fname;
pram[1].Value = lname;
pram[2].Value = dob;
pram[3].Value = gender;
pram[4].Value = fathername;
pram[5].Value = contact;
pram[6].Value = address;
//Now create loop to insert
for (int
i = 0; i < pram.Length; i++)
{
cmd.Parameters.Add(pram[i]);
}
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
}
catch(System.Data.SqlClient.SqlException
ex_msg)
{
//Here will be catch elements
string msg =
"Error occured while inserting";
msg += ex_msg.Message;
throw new
Exception(msg);
}
finally
{
//Here will be fially elements
conn.Close();
}
}
protected void
Page_Load(object sender,
EventArgs e)
{
}
protected void
submit_Click(object sender,
EventArgs e)
{
//Here is the command inside the click event
of button
if(fname.Text=="")
{
Response.Write("Please complete the
form.");
}
else
{
execution(fname.Text,lname.Text,dob.Text,gender.Text,fathername.Text,contact.Text,address.Text);
conform.Visible = true;
fname.Text="";
lname.Text="";
dob.Text="";
gender.Text="";
gender.Text="";
fathername.Text="";
contact.Text="";
address.Text="";
}
}
}
After all coding run the web application and sees the following results. You
have to enter some data using text box and click on submit button. After submit
button clicks you can see the enabled label with the message "Submitted, thank
you !" behind the button. Here is screenshots.
HAVE A HAPPY CODING!