Insert Data Into Database In C# Using JavaScript

Nilesh Jadav
Jan 03, 2016
43.6k
0
4
Article

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]

DESIGN CHAMBER:

Step 5: 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 Occured, Try Again");
}
});
} else
{
alert("Pleae Fill all the Fields");
return false;
}
})
});
</script>
</body>
</html>

CODE CHAMBER

Step 6: 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 CHAMBER
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