C# 从angularJS中的aspx.cs页面获取数据？_C#_Javascript_Jquery_Asp.net_Angularjs

C# 从angularJS中的aspx.cs页面获取数据？

c# javascript jquery asp.net angularjs

C# 从angularJS中的aspx.cs页面获取数据？,c#,javascript,jquery,asp.net,angularjs,C#,Javascript,Jquery,Asp.net,Angularjs,我对angularJS甚至这种客户端编码都是新手。出于兴趣而开始，并愉快地探索它我只是想学个例子@ 通过绑定服务器端的数据来完成。它不起作用。我需要帮助 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.WebCont

我对angularJS甚至这种客户端编码都是新手。出于兴趣而开始，并愉快地探索它

我只是想学个例子@

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

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>

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Script.Serialization；
使用System.Web.UI；
使用System.Web.UI.WebControl；
使用System.Web.Services；
使用系统数据；
名称空间AngularJS
{
公共部分类AngularJSTest:System.Web.UI.Page
{
受保护的无效页面加载（对象发送方、事件参数e）
{
}
[网络方法]
公共静态数据表A（）
{
DataTable=新的DataTable（）；
表.列.添加（“日期”，类型（字符串））；
表.列.添加（“文本”，类型（字符串））；
表。行。添加（“20/05/2012”，“A”）；
表。行。添加（“20/05/2012”，“B”）；
表.增加行（“20/05/2012”，“C”）；
返回表；
}
[网络方法]
公共静态数据表B（）
{
DataTable=新的DataTable（）；
表.列.添加（“日期”，类型（字符串））；
表.列.添加（“文本”，类型（字符串））；
表。行。添加（“20/05/2012”，“P”）；
表。行。添加（“20/05/2012”，“Q”）；
表。行。添加（“20/05/2012”，“R”）；
返回表；
}
[网络方法]
公共静态数据表C（）
{
DataTable=新的DataTable（）；
表.列.添加（“日期”，类型（字符串））；
表.列.添加（“文本”，类型（字符串））；
表。行。添加（“20/05/2012”，“X”）；
表。行。添加（“20/05/2012”，“Y”）；
表。行。添加（“20/05/2012”，“Z”）；
返回表；
}
}
}
myApp.factory（'getProductService'，函数（$http，$q）{
函数getProduct（url）{
var deferred=$q.deferred（）；
$http（{method'GET'，url:url}）
.成功（功能（数据）{
延迟。解析（数据）；
})
.错误（函数（错误）{
console.error（'尝试获取产品时出错：'，错误）；
延迟。拒绝（错误）；
});
回报。承诺；
}
返回{
采购：功能（）{
var url='AngularJSTest.aspx/A'
返回getProduct（url）；
},
销售30天：功能（）{
var url='AngularJSTest.aspx/B'
返回getProduct（url）；
},
销售产品：功能（）{
var url='AngularJSTest.aspx/C'
返回getProduct（url）；
}
};
});
myApp.controller（'ProductsController'，函数（$scope，getProductService）{
$scope.purchase=getProductsService.purchases（）；
$scope.sale30Day=getProductsService.sale30Days（）；
$scope.saleProduct=getProductsService.saleProducts（）；
}); 
身体
{
字体：12px arial，helvetica，无衬线；
}
氢
{
字体大小：16px；
}
桌子
{
利润率：20px0；
边界塌陷：塌陷；
}
th，td
{
边框：1px实心#ccc；
填充：2px；
}
a、 活跃的
{
颜色：红色；
}
购买：
日期
描述
{{购买日期}
{{purchase.text}
销售产品：
日期
描述
{{saleProduct.date}
{{saleProduct.text}
销售30天：
日期
描述
{{sale30Day.date}
{{sale30Day.text}

严格关注前端，我建议为购买、销售产品和销售提供单一服务30天，例如：

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

    });

现在，您可以使用依赖注入将此服务注入到任何需要获取数据的控制器中

例如，您的采购控制器：

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

销售30天：

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

然而，从更高的功能级别来看，这三个控制器都在做类似的功能服务产品

因此，我建议只使用一个ProductsController就可以将重构提升到更高的层次：

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

通过这种方式，您可以在一个控制器内共享计算产品属性（价格、税收、金额）所需的潜在函数

现在你可以