从angularJS中的aspx.cs页面获取数据?

时间:2014-03-16 09:08:18

标签: c# javascript jquery asp.net angularjs

我是angularJS的新手甚至是这个客户端编码。开始兴趣并愉快地探索它。

我只是试着效仿@ Navigational Menu

通过绑定来自服务器端的数据来做到这一点。没有用。需要帮助..

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 个答案:

答案 0 :(得分:4)

严格关注前端我建议为前者购买,销售产品,Sale30天提供单一服务:

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

    });

现在,您可以使用Dependancy Injection将此服务注入任何需要获取数据的控制器。

例如您的购买控制器:

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

Sale30Days:

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

通过这种方式,您可以在一个控制器内共享计算产品属性所需的潜在功能 - 价格,税金,金额。

现在您可以正确绑定数据。