无法使用angularjs和asp.net Web方法将数据库中的数据显示到html表中 [英] Unable to display data from the database into html table using angularjs and asp.net webmethod
问题描述
我是angularjs和asp.net Web方法的新手。在这里，我以asp.net .aspx格式创建了一个表。我绑定值，为此Product.aspx创建了一个控制器。我使用Web方法将数据传递到控制器。我实际上面临的问题是，我无法从数据库中获取数据并显示到html表中。在构建时间和控制台中都没有出现任何错误。请寻求帮助。
I am new to angularjs and asp.net Web Method. Here i created a table in asp.net .aspx form. I bind the values, i created a controller for this Product.aspx. I used Web method to pass the data to the controller. What i actually facing the problem is, i could not able to get the data from the database and display into the html table. I am not getting any error in build time and also in the console. Please need help.
<%@ 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文件中检索（获取）数据。
productcontroller.js
I am also not getting any eoor in this file, the problem is , unable to retrieve(GET) the data from the Product.aspx.cs file.
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
I创建一个列表，并尝试从数据库中获取数据，然后我从productcontroller.js调用了此方法，但我无法做到这一点。
Product.aspx.cs
I created a List, and tried to fetch the data from the database and i called this method from the productcontroller.js , but i could not make it.
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;
}
}
推荐答案
您的控制器
$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 Web方法将数据库中的数据显示到html表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
