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