locked
Web API OData Service Get data Problem! RRS feed

  • Question

  • User1642350797 posted

    Hello Everyone!

    I have hosted my odata service on somee.com. But when i get it using AngularJs the data does not show. 

    Service link: http://waliservice.somee.com/odata/Products

    Is this process correct or not?

    Please anyone help me about the issue.......

    Best Regards 

    Wali

    var app = angular.module("MyApp",[])
    app.controller("ProductCtrl", function ($scope, $http) {
    
        $http.get('http://waliservice.somee.com/odata/Products')
        .success(function (data) {
            $scope.products = data.value;
        })
        .error(function () {
            //$scope.error = "An Error has occured while loading posts!";
            alert('oData servuce is not available !');
        });
    
    });

    Wednesday, November 30, 2016 9:07 AM

All replies

  • User-2057865890 posted

    Hi Wali,

    Any error message? Is it a cross-origin request?

    API Controller

    using ODataRouteDemo.Models;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Http;
    using System.Web.Http.Cors;
    using System.Web.OData;
    
    namespace ODataRouteDemo.Controllers
    {
        public class ProductsController : ODataController
        {
            [HttpGet]
            [EnableCors(origins: "http://localhost:60268", headers: "*", methods: "*")]
            public IQueryable<Product> GetProducts()
            {
                var c = new List<Product>
                {
                    new Product
                    {
                        ProductID = 2,
                        ProductName = "Panjabi",
                        Description = "Nice"
                    },
                    new Product
                    {
                        ProductID = 3,
                        ProductName = "Panjabi",
                        Description = "Nice"
                    }
                };
                return c.AsQueryable();
            }
        }
    }
    

    WebAPIConfig

    using ODataRouteDemo.Models;
    using System.Web.Http;
    using System.Web.OData.Builder;
    using System.Web.OData.Extensions;
    
    namespace ODataRouteDemo
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                config.EnableCors();
                ODataModelBuilder builder = new ODataConventionModelBuilder();
                builder.EntitySet<Product>("Products");
                config.MapODataServiceRoute(
                    routeName: "ODataRoute",
                    routePrefix: null,
                    model: builder.GetEdmModel());
            }
        }
    }
    

    Model

    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public string Description { get; set; }
    }

    AngularJS

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script>
            var app = angular.module("MyApp", [])
            app.controller("ProductCtrl", function ($scope, $http) {
    
                $http.get('http://localhost:59032/Products')
                .success(function (data) {
                    $scope.products = data.value;
                })
                .error(function (data, status, header, config) {
                    $scope.ResponseDetails = "Data: " + data +
                        "<hr />status: " + status +
                        "<hr />headers: " + header +
                        "<hr />config: " + config;
                });
    
            });
        </script>
    </head>
    <body>
        <div ng-app="MyApp" ng-controller="ProductCtrl">
            <hr />
            <ul>
                <li ng-repeat="d in products">
                    {{ d.ProductID + ', ' + d.ProductName + ', ' + d.Description + ','+d.UnitPrice}}
                </li>
            </ul>
            <p ng-bind="ResponseDetails"></p>
            {{ResponseDetails}}
        </div>
    </body>
    </html>
    

    reference: https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api 

    Best Regards,

    Chris

    Thursday, December 1, 2016 6:26 AM