Reader Level:
Article

Inserting Data in to DB using jQuery Ajax and LINQ to SQL

By Shinuraj on Feb 06, 2011
Inserting data into a database using jQuery ajax and LINQ to SQL.


First create an Employees table that has EmployeeId, name, email and address.

Then create LINQtoSQL Employee.dbml file.

Create new handler file AddEmployee.ashx.

Update the ProcessRequest method :

public void ProcessRequest(HttpContext context)
{
    var name = context.Request["name"];
    var email = context.Request["email"];
    var address = context.Request["address"];
 
    EmployeeDataContext HRDB = new EmployeeDataContext();
    Employee employee = new Employee();
    employee.Name = name;
    employee.Email = email;
    employee.address = comment;
    HRDB.Employees.InsertOnSubmit(employee);
    HRDB.SubmitChanges();
    context.Response.Write("loading success");
}

On the front file: AddEmployee.htm add the form method="post" action ="AddEmployee.ashx"
add container div:

HTML:

<div id="container">
<label for="name">EmployeeName</label>
<input type="text" name="name" id="name" />

<label for="email">Email</label>
<input type="text" name="email" id="email" />

<label for="comment">Address</label>
<textarea id="address " name="comment" cols="35" rows="5">
</textarea>

<br />
<input type="button" id="submit" name="submit" value="Add Employee" /></div>

Add the following code to the head section:

<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#submit').click(function(){
$('#container').append('<img id="loadining" src="ajax-loader.gif" alt="loading"/>');
var name = $('#name').val();
var email = $('#email').val();
var address = $('#address').val();
$.ajax({
url: 'AddEmployee.ashx',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&address =' +address,

success:function(result)
{
$('#response').remove();
$('#container').append('<p id="response">'+ result+ '</p>');
$('#loadining').fadeOut(500,function(){
$(this).remove();
});
}
});
return false;
});
});
</script>
Thanks

shinu

Shinuraj

I'm Shinuraj A R, Completed my B-tech in ECE from Govt College of engineering Kannur.Currently working as a senior software engineer @ Cognizant Technology Solution Kochi

COMMENT USING