CODEWITHSUNDEEP
javascriptc#angularjsasp.net-web-api
dreamer
dreamer

Reputation: 47

C# Web Api Get Method

This is my model file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ConsumeJson.Models
{
    public class ProductModel
    {
        public List<Product> findAll()
        {
            List<Product> result = new List<Product>();
            result.Add(new Product { Id = "p01", Name = "Product 1", Price = "100", Quantity = "1" });
            result.Add(new Product { Id = "p02", Name = "Product 2", Price = "200", Quantity = "2" });
            result.Add(new Product { Id = "p03", Name = "Product 3", Price = "300", Quantity = "3" });
            return result;
        }
        public Product find(string id)
        {
            return findAll().Single(p => p.Id.Equals(id));
        }
    }
}

This is my HTML file.

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <title>My Client</title>
</head>
<body ng-controller="productController">

    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
        <tr ng-repeat="product in result">
            <td>{{product.Id}}</td>
            <td>{{product.Name}}</td>
        </tr>
    </table>

    <script type="text/javascript">
        var myapp = angular.module('myapp', []);
        myapp.controller('productController', function ($scope, $http) {
            $http(
                method: 'GET',
                url:'http://localhost:53204/api/product').success(function (response) {
                $scope.result = response;
            })
        })
    </script>
</body>
</html>

I want to create product's table with informations but hen i run it as localhost it never display the product's id or name. It stays like this way. {{Product.Id}} {{Product.Name}} How can i solve this?

Upvotes: 2

Views: 120

Answers (2)

AmirReza-Farahlagha
AmirReza-Farahlagha

Reputation: 1212

May have many reason.

  1. Check your scope inserted, are you sure that you send ProductId to server side with Http request?.
  2. it's better that use of ngModel instead of dubble braces. check this

and the Important issue is, if your model like this:

public class Test
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string PhoneNumber { get; set; }
}

when your API wants to return your response, convert data to Json, attention that your model is KebabCase but your Json in camelCase, but in your html you use of KebabCase.

If all of this issues not work, check your network and check response of your request in response tab, Is there any response or any Ids?

GoodLuck.

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222722

You need to change it to using .then()

$http({
    method: "GET",
    url: "http://localhost:53204/api/product"
}).then(function mySucces(response) {
    $scope.result = response.data;
}, function myError(response) {

});

Upvotes: 2

Related Questions