Initial Chamber
Step 1. Open Visual Studio 2010 and create an Empty Website, Give a suitable name [insert_demo].
Step 2. In Solution Explorer you get your empty website, add a web form, SQL Database. By going like this.
For Web Form
insert_demo (Your Empty Website) - Right-click, Add New Item, then Web Form. Name it insert_demo.aspx.
For SQL Server Database
insert_demo (Your Empty Website) - Right-click, Add New Item, SQL Server Database. [Add Database inside the App_Data_folder].
Database Chamber
Step 3. Get to your Database [Database.mdf], we will create a table tbl_Data. Go to database.mdf, Table, then Add New table; design your table like the following.
Table - tbl_data [Don’t forget to make ID, then Identity Specification - Yes]
![database]()
Design Chamber
Step 4. Now open your insert_demo.aspx file, where we create our design for inserting data into database.
insert_demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<title></title>
<style type="text/css">
.auto-style1 {
width: 147px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td class="auto-style1"></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="auto-style1">Name</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style1">Email</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style1">Designation</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style1">City</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style1"></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="auto-style1"></td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</td>
<td></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
var name = $('#TextBox1').val();
var email = $('#TextBox2').val();
var designation = $('#TextBox3').val();
var city = $('#TextBox4').val();
if (name !== '' && email !== '' && designation !== '' && city !== '') {
$.ajax({
type: 'POST',
url: 'Default.aspx/insertdata',
async: false,
data: "{'name':'" + name + "','email':'" + email + "','designation':'" + designation + "','city':'" + city + "'}",
contentType: 'application/json; charset=utf-8',
success: function (data) {
var obj = data.d;
if (obj === 'true') {
$('#TextBox1').val('');
$('#TextBox2').val('');
$('#TextBox3').val('');
$('#TextBox4').val('');
alert("Data Saved Successfully");
}
},
error: function (result) {
alert("Error Occurred, Try Again");
}
});
} else {
alert("Please Fill all the Fields");
return false;
}
});
});
</script>
</body>
</html>
![menu]()
Code Chamber
Step 5. Open your insert_demo.aspx.cs and write some code so that our application starts working.
Insert_demo.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
public partial class _Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string insertdata(string name, string email, string designation, string city)
{
string msg = "";
SqlConnection con = new SqlConnection("Data Source=Nilu;Initial Catalog=mydb;Integrated Security=True");
SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name, @email,@designation,@city)", con);
cmd.Parameters.AddWithValue("@name", name);
cmd.Parameters.AddWithValue("@email", email);
cmd.Parameters.AddWithValue("@designation", designation);
cmd.Parameters.AddWithValue("@city", city);
con.Open();
int i = cmd.ExecuteNonQuery();
if (i == 1)
{
msg = "true";
} else
{
msg = "false";
}
return msg;
}
}
Output
![output]()
Now go back to the database, where we check that the same data is entered into the database or not, by going to database.mdf, Tables, tbl_data, then right click and show Table Data.
![table]()
Hope you liked this. Thank you for reading. Have a good day.