堆栈内存溢出
  繁体   English   中英

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

[英]get data from aspx.cs page in angularJS?

 原文  2014-03-16 09:08:17  5   1    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.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 个解决方案

解决方案1
 4  2014-03-16 09:33:37

严格专注于前端，我建议您提供一项服务来获取购买，销售产品，销售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();
    });

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法从aspx页面获取价值到aspx.cs 在aspx.cs页面中获取HTML按钮 如何从ascx.cs页到aspx.cs页获取HiddenField值 从aspx.cs向aspx页面添加新的LiteralControl 从aspx.cs到aspx页面的实现逻辑 将int从aspx.cs传递到aspx页面 如何将数据从.ASPX传递到.ASPX.CS（C＃）？ aspx.cs和aspx页面问题 从aspx.cs页面的.ashx处理程序调用方法 如何从aspx.cs页面切换确认消息框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM