C# Web Api Get Method

Question

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?

Why do you have jquery-3.3.1.js included twice? You only need one. Maybe that's part of the problem. — Mike Loffland
– Mike Loffland, Commented Jul 22, 2018 at 0:44

Sajeetharan · Accepted Answer · 2018-07-22 00:45:11Z

2

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) {

});

answered Jul 22, 2018 at 0:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

AmirReza-Farahlagha · Accepted Answer · 2018-07-22 04:10:01Z

2

May have many reason.

Check your scope inserted, are you sure that you send ProductId to server side with Http request?.
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.

answered Jul 22, 2018 at 4:10

AmirReza-Farahlagha

1,20414 silver badges26 bronze badges

Collectives™ on Stack Overflow

C# Web Api Get Method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related