c#之从 angularJS 中的 aspx.cs 页面获取数据

我对 angularJS 还是个新手，即使是这个客户端编码。出于兴趣开始并愉快地探索它。

我只是试着按照一个例子@ Navigational Menu

通过绑定(bind)服务器端的数据来完成它。它不起作用。需要帮助..

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> 

请您参考如下方法:

严格关注前端，我建议制作一个服务来获取 Purchases、SalesProducts、Sale30Days，例如:

 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); 
            } 
        }; 
 
    }); 

现在您可以使用依赖注入(inject)将此服务注入(inject)到任何需要获取数据的 Controller 中。

例如您的采购 Controller :

myApp.controller('PurchasesController', function($scope, getProductService) { 
     $scope.purchases = getProductsService.purchases(); 
}); 

销售 30 天:

myApp.controller('Sale30Days', function($scope, getProductService) { 
         $scope.sale30Days = getProductsService.sale30Days(); 
    }); 

然而，从更高层次的功能来看，所有这三个 Controller 都在执行类似的功能 - 为产品提供服务。

所以我建议重构到一个更高的层次，只需要一个 ProductsController:

myApp.controller('ProductsController', function($scope, getProductService) { 
         $scope.purchases = getProductsService.purchases(); 
         $scope.sale30Days = getProductsService.sale30Days(); 
         $scope.saleProducts = getProductsService.saleProducts(); 
    }); 

通过这种方式，您可以共享计算产品属性(价格、税金、金额)所需的潜在功能，所有这些都在一个 Controller 中。

现在您可以正确绑定(bind)数据了。