我是angularjs和asp.net Web方法的新手。在这里，我创建了一个asp.net .aspx形式的表。我绑定了值，我为这个Product.aspx创建了一个控制器。我使用Web方法将数据传递给控制器。我实际面临的问题是，我无法从数据库中获取数据并显示到html表中。我没有在构建时间和控制台中收到任何错误。请帮忙。
<%@ 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>
我也没有在此文件中收到任何错误，问题是，无法从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');
});
}
});
我创建了一个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;
}
}
在你的控制器中，你只传递成功，但你必须传递像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');
});
}
});
你的控制器
$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; }
}