«

»

Nov 23

Insert Data in DataBase Using JQuery in ASP.NET

Hi,In this Article I will explain you how to Insert data into SQLServer using JQuery with  ASP.NET

If u want to insert so many columns then it’s so much of time to insert, to overcome this problem use JQuery  its very fast while executing,I will show you with example.

Add a New WebForm “JQuery.aspx”

–>Copy And Paste Below Code in it:

[code language=”html”]

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Insert Data Using JQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<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>
<script type="text/javascript">

$(document).ready(function () {

$(‘#btnSubmit’).click(function () {

$.ajax({

type: ‘POST’,
contentType: "application/json; charset=utf-8",
url: ‘JQuery.aspx/InsertDataUsingJQuery’,
data: "{‘FirstName’:’" + document.getElementById(‘txtFirstName’).value + "’, ‘LastName’:’" + document.getElementById(‘txtLastName’).value + "’,’Address’:’" + document.getElementById(‘txtAddress’).value + "’,’PhoneNo’:’" + document.getElementById(‘txtPhoneNo’).value + "’,’PinCode’:’" + document.getElementById(‘txtPinCode’).value + "’}",
async: false,
success: function (response) {
$(‘#txtFirstName’).val(”);
$(‘#txtLastName’).val(”); $(‘#txtAddress’).val(”);
$(‘#txtPhoneNo’).val(”);
$(‘#txtPinCode’).val(”);

alert("Data Saved Sucessfully in Database");

},
error: function ()
{ console.log(‘there is some error’); }
});
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 40%">
<legend>Insert Data Using JQuery </legend>
<table width="100%">
<tr>
<td>
FirstName:
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server" ClientIDMode="Static" Width="70%"></asp:TextBox>
</td>
<td>
LastName:
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server" ClientIDMode="Static" Width="70%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" ClientIDMode="Static" Width="70%"></asp:TextBox>
</td>
<td>
PhoneNo:
</td>
<td>
<asp:TextBox ID="txtPhoneNo" runat="server" ClientIDMode="Static" Width="70%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
PinCode:
</td>
<td>
<asp:TextBox ID="txtPinCode" runat="server" ClientIDMode="Static" Width="70%"></asp:TextBox>
</td>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Static" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
[/code]

–>Below Image shows the Design of form:

JQuery

–>Open “JQuery.cs” and Paste Below Code

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Services;
using System.Data;

public partial class JQuery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

public static string InsertDataUsingJQuery(string FirstName, string LastName, string Address, string PhoneNo, string PinCode)
{
try
{
SqlConnection con = new SqlConnection("Server=Naseer-PC;Database=Naseer;Uid=sa;Pwd=123");
{
SqlCommand cmd = new SqlCommand("Insert into Tbl_Mst_EmployeeDetails(FirstName,LastName,Address,PhoneNo,PinCode) values(‘" + FirstName + "’, ‘" + LastName + "’,’" + Address + "’,’" + PhoneNo + "’,’" + PinCode + "’)", con);
{
con.Open();
cmd.ExecuteNonQuery();
return "True";
}
}
}
catch (Exception ex)
{
throw ex;
}

}
}

[/code]

–>Create a Table Called Tbl_Mst_EmployeeDetails

–>Below Image shows the Structure of the table

JQuery2

o/p Screen:

JQuery3

Happy Coding!!!!!!

Admin.

4 comments

Skip to comment form

  1. aaa

    xcv

    1. Anonymous

      hgfgh

  2. Munna yadav

    HOW TO insert data by jquery in ASP.NET MVC 4.0

    1. Azia

      I much prefer inoiamrtfve articles like this to that high brow literature.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>