Unable to display data from the database into html table using angularjs and asp.net webmethod

Question

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.

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

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 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;
    }
}

Vinoth · Accepted Answer · 2017-12-01 07:34:29Z

0

in you controller you are passing only success but you have to pass the data object like success.data.

instead of using $scope.ProductList = success;

change to $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');
        });
    }
});

edited Dec 1, 2017 at 7:34

answered Dec 1, 2017 at 7:32

Vinoth

1,1031 gold badge18 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

karthik shankar Over a year ago

No errors in build time as well as in console. I could not able the fetch the data from that Product.aspx.cs file.. Once please go through Product.aspx.cs file.

Vinoth Over a year ago

please confirm Product.aspx.cs-->GetProductInfo getting values or not from database.

karthik shankar Over a year ago

Just now i checked in debug mode, data's are fetching from the database.

vinod · Accepted Answer · 2018-01-02 12:32:42Z

your controller

       $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) { })
        };

And your .cs file

    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; }
}

Collectives™ on Stack Overflow

Unable to display data from the database into html table using angularjs and asp.net webmethod

Product.aspx

productcontroller.js

Product.aspx.cs

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Product.aspx

productcontroller.js

Product.aspx.cs

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related