get data from aspx.cs page in angularJS?
Question
I am new to angularJS even this client side coding.Started for interest and exploring it happily.
I just tried to follow an example @ Navigational Menu
Have tied to do it from binding the data from server side.its not working. need help ..
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
namespace AngularJS
{
public partial class AngularJSTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static DataTable A()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "A");
table.Rows.Add("20/05/2012", "B");
table.Rows.Add("20/05/2012", "C");
return table;
}
[WebMethod]
public static DataTable B()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "P");
table.Rows.Add("20/05/2012", "Q");
table.Rows.Add("20/05/2012", "R");
return table;
}
[WebMethod]
public static DataTable C()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "X");
table.Rows.Add("20/05/2012", "Y");
table.Rows.Add("20/05/2012", "Z");
return table;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJSTest.aspx.cs"
Inherits="AngularJS.AngularJSTest" %>
<!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>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<link href="Styles/css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script>
myApp.factory('getProductService', function ($http, $q) {
function getProduct(url) {
var deferred = $q.defer();
$http({ method: 'GET', url: url })
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
console.error('Error occurred trying to get the products: ', error);
deferred.reject(error);
});
return deferred.promise;
}
return {
purchases: function () {
var url = 'AngularJSTest.aspx/A'
return getProduct(url);
},
sale30Days: function () {
var url = 'AngularJSTest.aspx/B'
return getProduct(url);
},
saleProducts: function () {
var url = 'AngularJSTest.aspx/C'
return getProduct(url);
}
};
});
myApp.controller('ProductsController', function ($scope, getProductService) {
$scope.purchase = getProductsService.purchases();
$scope.sale30Day = getProductsService.sale30Days();
$scope.saleProduct = getProductsService.saleProducts();
});
</script>
<style>
body
{
font: 12px arial, helvetica, sans-serif;
}
h2
{
font-size: 16px;
}
table
{
margin: 20px 0;
border-collapse: collapse;
}
th, td
{
border: 1px solid #ccc;
padding: 2px;
}
a.active
{
color: red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp">
<nav class="{{active}}" ng-init="active='home'">
<a href="#" title="" class="home" rel="tab1" ng:click="active='home'" ng:class="{'active' : selected==1 }">Purchases</a>
<a href="#" title="" class="projects" rel="tab2" ng:click="active='projects'" ng:class="{'active' : selected==2 }">Products on sale</a>
<a href="#" title="" class="services" rel="tab3" ng:click="active='services'" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
</nav>
<div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl" ng:show="active == 'home'">
<h2>
Purchases:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{purchase.date}}
</td>
<td>
{{purchase.text}}
</td>
</tr>
</table>
</div>
<div id="tab2" class="tabContent selected" ng-controller="SaleProductsCtrl" ng:show="active == 'projects'">
<h2>
Sale products:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{saleProduct.date}}
</td>
<td>
{{saleProduct.text}}
</td>
</tr>
</table>
</div>
<div id="tab3" class="tabContent selected" ng-controller="Sale30DaysCtrl" ng:show="active == 'services'">
<h2>
Sale 30 days:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{sale30Day.date}}
</td>
<td>
{{sale30Day.text}}
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
1 answers
solution1
4 2014-03-16 09:33:37
Focusing strictly on the front end I would recommend making a single service for getting Purchases, SalesProducts, Sale30Days for ex:
myApp.factory('getProductService', function ($http, $q) {
function getProduct(url) {
var deferred = $q.defer();
$http({method: 'GET', url: url})
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
console.error('Error occurred trying to get the products: ', error);
deferred.reject(error);
});
return deferred.promise;
}
return {
purchases: function () {
var url = 'yourURLPurchases'
return getProduct(url);
},
sale30Days: function () {
var url = 'yourURLSale30Days'
return getProduct(url);
},
saleProducts: function () {
var url = 'yourURLSaleProducts'
return getProduct(url);
}
};
});
Now you can use Dependancy Injection to inject this service into whatever controller needs to get data.
For example your purchases controller:
myApp.controller('PurchasesController', function($scope, getProductService) {
$scope.purchases = getProductsService.purchases();
});
Sale30Days:
myApp.controller('Sale30Days', function($scope, getProductService) {
$scope.sale30Days = getProductsService.sale30Days();
});
However looking at an even higher level of functionality all three of these controllers are doing a similar function - serving products.
So i would recommend refactoring to an even higher level just having a single ProductsController:
myApp.controller('ProductsController', function($scope, getProductService) {
$scope.purchases = getProductsService.purchases();
$scope.sale30Days = getProductsService.sale30Days();
$scope.saleProducts = getProductsService.saleProducts();
});
In this way you can share the potential functions you will need to calculate attributes of the products - prices, tax, amounts - all within one single controller.
Now you can bind the data properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
not able to get value from aspx page to aspx.cs
Get HTML button in aspx.cs page
how to get HiddenField Value from ascx.cs page to aspx.cs page
adding new LiteralControl to an aspx page, from aspx.cs
Implementing logic from aspx.cs to aspx page
Pass int from aspx.cs to aspx page
How to pass data from .ASPX to .ASPX.CS (C#)?
aspx.cs and aspx page problem
Calling methods from .ashx handler from aspx.cs page
How to Toggle confirm message box from aspx.cs page
Related Tags