How to insert record in database using Jquery:-
Create Table:-
create table Employee
(
Empid int primary key identity(1,1),
Name varchar(50),
Age int,
Address varchar(50)
)
Create insert Procedure:-
create proc usp_employee_insert
@Name varchar(50),
@Age int,
@Address varchar(50)
as
begin
insert into Employee(Name,Age,Address) values(@Name,@Age,@Address)
end
use to j query code with ado.net:-
j query in does not use server control only on html control. j query support Json. How to install json
Aspx page code in j query:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Jqueryinsertonly.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Getdata();
});
function Savedata()
{
$.ajax({
url: 'Registration.aspx/Insert',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{A: '" + $("#textname").val() + "', B:'" + $("#textage").val() + "',C: '" + $("#textaddress").val() + "'}",
success: function () {
alert('data is insert !!');
Getdata();
},
error: function () {
alert('data error !!');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Nmae:</td>
<td><input type="text" id="textname" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="textage" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" id="textaddress" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
CS page code of Jquery:-
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.Configuration;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace Jqueryinsertonly
{
public partial class Registration : System.Web.UI.Page
{
static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBC"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void Insert(string A, int B, string C)
{
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_insert", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name", A);
cmd.Parameters.AddWithValue("@Age", B);
cmd.Parameters.AddWithValue("@Address", C);
cmd.ExecuteNonQuery();
con.Close();
}
}
}
Create Table:-
create table Employee
(
Empid int primary key identity(1,1),
Name varchar(50),
Age int,
Address varchar(50)
)
Create insert Procedure:-
create proc usp_employee_insert
@Name varchar(50),
@Age int,
@Address varchar(50)
as
begin
insert into Employee(Name,Age,Address) values(@Name,@Age,@Address)
end
use to j query code with ado.net:-
j query in does not use server control only on html control. j query support Json. How to install json
Aspx page code in j query:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Jqueryinsertonly.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Getdata();
});
function Savedata()
{
$.ajax({
url: 'Registration.aspx/Insert',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{A: '" + $("#textname").val() + "', B:'" + $("#textage").val() + "',C: '" + $("#textaddress").val() + "'}",
success: function () {
alert('data is insert !!');
Getdata();
},
error: function () {
alert('data error !!');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Nmae:</td>
<td><input type="text" id="textname" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="textage" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" id="textaddress" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
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.Configuration;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace Jqueryinsertonly
{
public partial class Registration : System.Web.UI.Page
{
static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBC"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void Insert(string A, int B, string C)
{
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_insert", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name", A);
cmd.Parameters.AddWithValue("@Age", B);
cmd.Parameters.AddWithValue("@Address", C);
cmd.ExecuteNonQuery();
con.Close();
}
}
}
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<connectionStrings>
<add name="DBC" connectionString="data source=Shiva; integrated security=true;initial catalog=jqueryinsertonly"/>
</connectionStrings>
</configuration>
No comments:
Post a Comment