Introduction

Before going in detail of this article I would like to introduce you the technologies used in the example.

Jquery: JQuery is a JavaScript Library, it greatly simplifies JavaScript programming.

Web Services: A web service is the communication platform between two different platform applications that allows using their web method.

JSON:

  • JSON stands for JavaScript Object Notation
  • JSON is a lightweight data-interchange format
  • JSON is language independent *
  • JSON is "self-describing" and easy to understand

Note: For better understanding of jQuery you must have the knowledge of CSS and JavaScripts.

Descriptions

Here are the files we have to create:

Files

Step 1: Create an HTML Page Design Page:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.11.3.js"></script>
  6. <script src="MyJsCode.js"></script>
  7. <style type="text/css">
  8. .auto-style1 {
  9. width: 72px;
  10. }
  11. .auto-style2 {
  12. width: 53px;
  13. }
  14. </style>
  15. </head>
  16. <body style="background-color:ActiveBorder">
  17. <form id="form1" style="height: 500px; width: 500px;background-image:url('img/p2.jpg'); border:solid;
  18. border-collapse:collapse;margin-top:120px; margin-left:400px;">
  19. <div id="div1" style="height: 170px; width: 500px;">
  20. <p style="margin-left:100px; font-family:Algerian;">Enter Name and Salary Below !</p>
  21. <table id="tbl1" border="1" style="margin-left: 130px; margin-top: 30px">
  22. <tr>
  23. <td>Name</td>
  24. <td>
  25. <input id="txtname" type="text" /></td>
  26. </tr>
  27. <tr>
  28. <td>Salary</td>
  29. <td>
  30. <input id="txtsalary" type="text" /></td>
  31. </tr>
  32. <tr>
  33. <td colspan="2">
  34. <input id="btnSave" type="button" value="Save" style="margin-left: 10px; width: 150px" />
  35. </td>
  36. </tr>
  37. </table>
  38. <br />
  39. </div>
  40. <div id="div2" style="height: 250px; width: 500px">
  41. <p style="margin-left:150px; font-family:Algerian;">Employee Records</p>
  42. <table id="tbl2" border="1" style="border-collapse: collapse; margin-left: 135px; width: 200px;">
  43. <thead>
  44. <tr>
  45. <th class="auto-style2">ID</th>
  46. <th>Name</th>
  47. <th class="auto-style1">Salary</th>
  48. </tr>
  49. </thead>
  50. <tbody>
  51. </tbody>
  52. </table>
  53. </div>
  54. </form>
  55. </body>
  56. </html>

Step 2: After designing the Web Page, let's create a table in SQL Server to save data.

result

Step 3: Create a user defined type (or class) to accept the user value:

  1. public class Employee
  2. {
  3. public int ID { get; set; }
  4. public string Name { get; set; }
  6. public int Salary { get; set; }
  8. }

Step 4: We have created a web service having two Web Methods with ADO.NET class to communicate with SQL Server from HTML Page.

  1. public class My : System.Web.Services.WebService
  2. {
  3. string CS = ConfigurationManager.ConnectionStrings["MyCon"].ConnectionString;
  4. //Below method will accept employee type object and save it DB.
  5. [WebMethod]
  6. public void saveData(Employee emp1)
  7. {
  8. SqlConnection _con = new SqlConnection(CS);
  9. SqlCommand _cmd = new SqlCommand("insert into Employees values(@name,@salary)", _con);
  10. _cmd.Parameters.AddWithValue("@name", emp1.Name);
  11. _cmd.Parameters.AddWithValue("@salary", emp1.Salary);
  12. _con.Open();
  13. int i = _cmd.ExecuteNonQuery();
  14. _con.Close();
  15. }
  16. //This method has used to select the employee record and store in collection.
  17. [WebMethod]
  18. public void GetEmployeeRecord()
  19. {
  20. List<Employee> _li = new List<Employee>();
  21. SqlConnection _con = new SqlConnection(CS);
  22. SqlCommand _cmd = new SqlCommand("select * from Employees", _con);
  23. _con.Open();
  24. SqlDataReader dr = _cmd.ExecuteReader();
  25. while (dr.Read())
  26. {
  27. Employee emp = new Employee();
  28. emp.ID = Convert.ToInt32(dr[0]);
  29. emp.Name = dr[1].ToString();
  30. emp.Salary = Convert.ToInt32(dr[2]);
  32. _li.Add(emp);
  33. }
  34. _con.Close();
  35. //JavaScriptSerializer class has used to convert list collection to JSON array.
  36. JavaScriptSerializer js = new JavaScriptSerializer();
  37. Context.Response.Write(js.Serialize(_li));
  38. }
  40. }

Web Services will look like.

Step 5: Finally, create a javascript file for jQuery functions.

Here we have created two functions like webservices:

  1. //TO Save the User Data
  2. $(document).ready(function () {
  3. $("#btnSave").click(function () {
  4. var employee = {};
  5. employee.Name = $("#txtname").val();
  6. employee.Salary = $("#txtsalary").val();
  8. $.ajax({
  9. url: 'My.asmx/saveData',
  10. method: 'post',
  11. contentType: 'application/json;Charset=utf-8',
  12. data: '{emp1:' + JSON.stringify(employee) + '}',
  13. success: function () {
  14. show();
  15. $("#txtname").val("");
  16. $("#txtsalary").val("");
  17. },
  18. error: function (err) {
  19. alert("Please Enter Name and Salary");
  21. }
  22. });
  23. });
  24. });
  25. //TO Display the Records
  26. function show() {
  27. $.ajax({
  28. url: 'My.asmx/GetEmployeeRecord',
  29. dataType: "json",
  30. method: 'post',
  31. success: function (data) {
  32. var employee = $("#tbl2 tbody");
  33. employee.empty();
  34. $(data).each(function (index, emp) {
  35. employee.append('<tr><td>' + emp.ID + '</td><td>' + emp.Name + '</td><td>' + emp.Salary + '</td></tr>');
  36. });
  37. },
  38. error: function (err) {
  39. alert(err);
  40. }
  41. });
  42. }

To successfully execution of jQuery codes, please download the latest jQuery script file form jquery.com.

Output:

Output

Hope you liked this article.