Angular js URL:
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <div ng-app="myApp" ng-controller="myCntrl">
- <table>
- <thead>
- <tr>
- <th>
- Emp Code.
- </th>
- <th>
- Employee Name
- </th>
- <th>
- Pan No
- </th>
- </tr>
- </thead>
- <tr ng-repeat="student in EmployeeList">
- <td ng-bind="student.StudentID">
- </td>
- <td ng-bind="student.StudentName">
- </td>
- <td ng-bind="student.PanNO">
- </td>
- </tr>
- </table>
- </div>
- <script>
- var app = angular.module("myApp", []);
- app.controller("myCntrl", function ($scope, $http) {
- $scope.fillList = function () {
- $scope.EmployeeName = "";
- var httpreq = {
- method: 'POST',
- url: 'Default2.aspx/GetList',
- headers: {
- 'Content-Type': 'application/json; charset=utf-8',
- 'dataType': 'json'
- },
- data: {}
- }
- $http(httpreq).success(function (response) {
- $scope.EmployeeList = response.d;
- })
- };
- $scope.fillList();
- });
- </script>
- using System;
- using System.Collections.Generic;
- using System.Data.SqlClient;
- using System.Data;
- public partial class Default2 : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- [System.Web.Services.WebMethod()]
- public static List<Employee> GetList()
- {
- List<Employee> names = new List<Employee>();
- DataSet ds = new DataSet();
- using (SqlConnection con = new SqlConnection(@"Data Source=140.175.165.10;Initial Catalog=Payroll_290716;user id=sa;password=Goal@12345;"))
- {
- using (SqlCommand cmd = new SqlCommand())
- {
- cmd.Connection = con;
- cmd.CommandText = "select EmpId,Empcode, name,PanNo from EMPLOYEEMASTER order by Name;";
- using (SqlDataAdapter da = new SqlDataAdapter(cmd))
- {
- da.Fill(ds);
- }
- }
- }
- if (ds != null && ds.Tables.Count > 0)
- {
- foreach (DataRow dr in ds.Tables[0].Rows)
- names.Add(new Employee(int.Parse(dr["EmpId"].ToString()), dr["name"].ToString(), dr["PanNo"].ToString()));
- }
- return names;
- }
- }
- public class Employee
- {
- public int StudentID;
- public string StudentName;
- public string PanNO;
- public Employee(int _StudentID, string _StudentName, string _PanNO)
- {
- StudentID = _StudentID;
- StudentName = _StudentName;
- PanNO = _PanNO;
- }
- }
Whole HTML page:
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div ng-app="myApp" ng-controller="myCntrl">
- <table>
- <thead>
- <tr>
- <th>
- Emp Code.
- </th>
- <th>
- Employee Name
- </th>
- <th>
- Pan No
- </th>
- </tr>
- </thead>
- <tr ng-repeat="student in EmployeeList">
- <td ng-bind="student.StudentID">
- </td>
- <td ng-bind="student.StudentName">
- </td>
- <td ng-bind="student.PanNO">
- </td>
- </tr>
- </table>
- </div>
- <script>
- var app = angular.module("myApp", []);
- app.controller("myCntrl", function ($scope, $http) {
- $scope.fillList = function () {
- $scope.EmployeeName = "";
- var httpreq = {
- method: 'POST',
- url: 'Default2.aspx/GetList',
- headers: {
- 'Content-Type': 'application/json; charset=utf-8',
- 'dataType': 'json'
- },
- data: {}
- }
- $http(httpreq).success(function (response) {
- $scope.EmployeeList = response.d;
- })
- };
- $scope.fillList();
- });
- </script>
- </form>
- </body>
- </html>