Scribd
Upload
37 views

Asp - Net Ajax Data Query

This document contains code to retrieve employee data from a SQL database and display it in an HTML table using AJAX calls in ASP.NET. It defines a web service method that executes a stored procedure to get all employee records from the database and serializes the results. JavaScript code calls this web service method on page load and loops through the returned employee data to dynamically build and populate a table row for each record.

Uploaded by

Niresh Maharaj
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
37 views

Asp - Net Ajax Data Query

This document contains code to retrieve employee data from a SQL database and display it in an HTML table using AJAX calls in ASP.NET. It defines a web service method that executes a stored procedure to get all employee records from the database and serializes the results. JavaScript code calls this web service method on page load and loops through the returned employee data to dynamically build and populate a table row for each record.

Uploaded by

Niresh Maharaj
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

using System.

Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;

[WebMethod]
public void GetAllEmployee()
{
List<EmployeesRecord> employeelist = new List<EmployeesRecord>();

string CS =
ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con=new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetAllEmployee", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();

SqlDataReader rdr = cmd.ExecuteReader();

while (rdr.Read())
{
EmployeesRecord employee = new EmployeesRecord();
employee.ID = Convert.ToInt32(rdr["ID"]);
employee.Name = rdr["Name"].ToString();
employee.Position = rdr["Position"].ToString();
employee.Office = rdr["Office"].ToString();
employee.Age = Convert.ToInt32(rdr["Age"]);
employee.Salary= Convert.ToInt32(rdr["Salary"]);

employeelist.Add(employee);
}
}

JavaScriptSerializer js = new JavaScriptSerializer();


Context.Response.Write(js.Serialize(employeelist));
}

Step 5

Create web form in project; right click, add new item, choose web form, and give
it a meaningful name.

Add script cdn link in head section:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Write script to call web service to retrieve data from the SQL server:

<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'EmployeeService.asmx/GetAllEmployee',
dataType: "json",
method: 'post',
success: function (data) {
var employeeTable = $('#tblEmployee tbody');
employeeTable.empty();
$(data).each(function (index, emp) {
employeeTable.append('<tr><td>' + emp.ID + '</td><td>'

+ emp.Name + '</td><td>' + emp.Position +


'</td><td>' + emp.Office
+ '</td><td>' + emp.Age + '</td><td>' + emp.Salary
+ '</td></tr>');
});
},
error: function (err) {
alert(err);
}
});
});
</script>

Step 6

Design an html table to display data:

<body>
<form id="form1" runat="server">
<div class="container">
<h3 class="text-uppercase text-center">How to retrive data using
ajax in asp.net</h3>
<table id="tblEmployee" class="table table-bordered">
<thead class="bg-primary text-white">
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>

Step 7

Run project ctr+F5

You might also like