个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 21:34:30 25 4
gpt4 key购买 nike

我对 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)数据了。

关于c# - 从 angularJS 中的 aspx.cs 页面获取数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22434971/

25 4 0
文章推荐： html - 如何在屏幕的两侧放置两个 div，HTML，CSS
文章推荐： python - 跨多个测试脚本模拟 Python 模块
文章推荐： html - Bootstrap : Full width inputs
文章推荐： python - Jupyter笔记本-属性错误: 'module' object has no attribute 'F_OK'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com