Reader Level:

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.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 18.2k
  • 0

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;
    context.Response.Write("loading success");

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


<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">

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

$('#container').append('<p id="response">'+ result+ '</p>');
return false;