Hi,
Here is the full code to show data using AngularJs
In .aspx
<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" type="text/javascript"></script>
<style>
table, th, td
{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table th
{
background-color: #274257;
color: #fff;
}
table tr:nth-child(odd)
{
background-color: #f1f1f1;
}
table tr:nth-child(even)
{
background-color: #ffffff;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("csrControl", function ($scope, $http) {
$scope.Showcustomer = function () {
var httpreq = {
method: 'POST',
url: 'ajxExampleShow.aspx/GetCustomerList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq).success(function (response) {
$scope.customerList = response.d;
})
};
$scope.Delete = function (csrId) {
alert(csrId);
//your web method call here for delete
};
// this line called while page load
$scope.Showcustomer();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="csrControl">
<table>
<thead>
<tr>
<th>
No
</th>
<th>
Customer Name
</th>
<th>
Address
</th>
<th>Action</th>
</tr>
</thead>
<tr ng-repeat="csr in customerList">
<td ng-bind="csr.Id">
</td>
<td ng-bind="csr.Name">
</td>
<td ng-bind="csr.Address">
</td>
<td>
<a href="#" ng-click="Delete(csr.Id)">Delete</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In .aspx.cs
[System.Web.Services.WebMethod()]
public static List<Customer> GetCustomerList()
{
List<Customer> objlst = new List<Customer>();
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from tblCustomer";
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(ds);
}
}
}
if (ds != null && ds.Tables.Count > 0)
{
foreach (DataRow dr in ds.Tables[0].Rows)
{
Customer obj = new Customer();
obj.Id = int.Parse(dr["Id"].ToString());
obj.Name = dr["Name"].ToString();
obj.Address = dr["Address"].ToString();
objlst.Add(obj);
}
}
return objlst;
}
Here is the Customer Class
public class Customer
{
private int _Id;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
private String _Name;
public String Name
{
get { return _Name; }
set { _Name = value; }
}
private String _Address;
public String Address
{
get { return _Address; }
set { _Address = value; }
}
}
SQL table Script For you
CREATE TABLE [dbo].[tblCustomer](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Address] [varchar](500) NULL,
CONSTRAINT [PK_tblCustomer] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
Here is the full code to show data using AngularJs
In .aspx
<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" type="text/javascript"></script>
<style>
table, th, td
{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table th
{
background-color: #274257;
color: #fff;
}
table tr:nth-child(odd)
{
background-color: #f1f1f1;
}
table tr:nth-child(even)
{
background-color: #ffffff;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("csrControl", function ($scope, $http) {
$scope.Showcustomer = function () {
var httpreq = {
method: 'POST',
url: 'ajxExampleShow.aspx/GetCustomerList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq).success(function (response) {
$scope.customerList = response.d;
})
};
$scope.Delete = function (csrId) {
alert(csrId);
//your web method call here for delete
};
// this line called while page load
$scope.Showcustomer();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="csrControl">
<table>
<thead>
<tr>
<th>
No
</th>
<th>
Customer Name
</th>
<th>
Address
</th>
<th>Action</th>
</tr>
</thead>
<tr ng-repeat="csr in customerList">
<td ng-bind="csr.Id">
</td>
<td ng-bind="csr.Name">
</td>
<td ng-bind="csr.Address">
</td>
<td>
<a href="#" ng-click="Delete(csr.Id)">Delete</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In .aspx.cs
[System.Web.Services.WebMethod()]
public static List<Customer> GetCustomerList()
{
List<Customer> objlst = new List<Customer>();
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from tblCustomer";
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(ds);
}
}
}
if (ds != null && ds.Tables.Count > 0)
{
foreach (DataRow dr in ds.Tables[0].Rows)
{
Customer obj = new Customer();
obj.Id = int.Parse(dr["Id"].ToString());
obj.Name = dr["Name"].ToString();
obj.Address = dr["Address"].ToString();
objlst.Add(obj);
}
}
return objlst;
}
Here is the Customer Class
public class Customer
{
private int _Id;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
private String _Name;
public String Name
{
get { return _Name; }
set { _Name = value; }
}
private String _Address;
public String Address
{
get { return _Address; }
set { _Address = value; }
}
}
SQL table Script For you
CREATE TABLE [dbo].[tblCustomer](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Address] [varchar](500) NULL,
CONSTRAINT [PK_tblCustomer] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
No comments:
Post a Comment