Question

我是angularjs和asp.net Web方法的新手。在这里，我创建了一个asp.net .aspx形式的表。我绑定了值，我为这个Product.aspx创建了一个控制器。我使用Web方法将数据传递给控制器。我实际面临的问题是，我无法从数据库中获取数据并显示到html表中。我没有在构建时间和控制台中收到任何错误。请帮忙。

Product.aspx

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Product.aspx.cs" ClassName="Product" Inherits="Product" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="product/productcontroller.js"></script>
      <body data-ng-app="app">
        <form>
                    <div data-ng-controller="GridController" data-ng-init="firstCall()">
                   <button type="submit" data-ng-click="firstCall()" value="Fetch" class="btn btn-primary">Show</button>
                            <h2> Table </h2>
                            <div class="table-responsive com-table">
                                <table class="table table-bordered table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th data-width="5%">productcode</th>
                                            <th data-width="15%">productname</th>
                                            <th data-width="15%">productprice</th>
                                            <th data-width="15%">productqty</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="PR in ProductList">
                                            <th data-width="5%">{{PR.productcode}}</th>
                                            <th data-width="15%">{{PR.productname}}</th>
                                            <th data-width="15%">{{PR.productprice}}</th>
                                            <th data-width="15%">{{PR.productqty}}</th>
                                        </tr>
                                    </tbody>
                                    </table>
                           </div>
                        </div>
                    </div>
                </form>
    </body>
    </html>

productcontroller.js

我也没有得到这个文件，问题是，无法从Product.aspx.cs文件中检索（GET）数据。

var app = angular.module("app", []) 
app.controller("GridController", function ($scope, $http) {
    $scope.firstCall = function () {
        $http({
            url: 'Product.aspx/GetProductInfo',
            dataType: 'json',
            method: 'GET',
            data: '',
            headers: {
                "Content-Type": "application/json"
            }
        }).then(function (success) {
            //debugger;
            $scope.ProductList = success;
        }, function (error) {
            console.log(error, 'can not get data');
        });
    }
});

Product.aspx.cs

我创建了一个List，并尝试从数据库中获取数据，并且我从productcontroller.js调用了这个方法，但我无法实现。

public class ProductInfo
{
    public int productcode { get; set; }
    public string productname { get; set; }
    public float productprice { get; set; }
    public int productqty { get; set; }
}
public partial class Product : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       // GetProductInfo() //i called this function, then also not working.
    }
    [WebMethod]
    [ScriptMethod(UseHttpGet = true,ResponseFormat =ResponseFormat.Json)]
    public static List<ProductInfo> GetProductInfo()
    {
        List<ProductInfo> productinfos = new List<ProductInfo>();
        using (NpgsqlConnection con = new NpgsqlConnection("Server=127.0.0.0;Port=1234;Database=TEST_DB;User Id=test;Password=****;"))
        {
            using (NpgsqlCommand cmd = new NpgsqlCommand("select *from product1", con))
            {
                con.Open();
                NpgsqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    ProductInfo productInfo = new ProductInfo
                    {
                        productcode = Convert.ToInt32(rdr["productcode"].ToString()),
                        productname = rdr["productname"].ToString(),
                        productprice = Convert.ToInt32(rdr["productprice"].ToString()),
                        productqty = Convert.ToInt32(rdr["productqty"].ToString())
                    };
                    productinfos.Add(productInfo);
                }
                con.Close();
            }
        }
        return productinfos;
    }
}

Answer 1

在您的控制器中，您只传递成功，但您必须传递数据对象，如success.data。

而不是使用$scope.ProductList = success;

更改为$scope.ProductList = success.data;

var app = angular.module("app", []) 
app.controller("GridController", function ($scope, $http) {
    $scope.firstCall = function () {
        $http({
            url: 'Product.aspx/GetProductInfo',
            dataType: 'json',
            method: 'GET',
            data: '',
            headers: {
                "Content-Type": "application/json"
            }
        }).then(function (success) {
            //debugger;
            $scope.ProductList = success.data;
        }, function (error) {
            console.log(error, 'can not get data');
        });
    }
});

Answer 2

你的控制器

       $scope.firstCall = function () {
            var httpreq = {
                method: 'GET',
                url: 'Product.aspx/GetProductInfo',
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'dataType': 'json'
                },
                data: {}
            }
            $http(httpreq).then(function (data) {
                $scope.ProductList = data.data.d;
            }, function (error) { })
        };

你的.cs文件

    public static List<ProductInfo> GetProductInfo()
    {
        List<ProductInfo> products = new List<ProductInfo>();
        DataSet ds = new DataSet();
        con = new NpgsqlConnection(connectionString);
        {
            using (var cmd = new NpgsqlCommand("select *from product1", con))
            {  
                using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd))
                {
                    da.Fill(ds);
                }
            }
        }
        if (ds != null && ds.Tables.Count > 0)
        {
            foreach (DataRow dr in ds.Tables[0].Rows)
                products.Add(new ProductInfo()
                {
                    productcode = int.Parse(dr["productcode"].ToString()),
                    productname = dr["productname"].ToString(),
                    productprice = float.Parse(dr["productprice"].ToString()),
                    productqty = int.Parse(dr["productqty"].ToString())
                });
        }
        return products;
    }
public class ProductInfo
{
    public int productcode { get; set; }
    public string productname { get; set; }
    public float productprice { get; set; }
    public int productqty { get; set; }
}

无法使用angularjs和asp.net webmethod将数据库中的数据显示到html表中

Product.aspx

productcontroller.js

Product.aspx.cs

2 个答案: