connect to remote API

2 posts, 0 answers
  1. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 26 Oct 2017 Link to this post

    I am having problem connect to Web API CORE

     using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;

    using Kendo.Mvc.UI;
    using Kendo.Mvc.Extensions;
    using Example.API.Data;
    using Microsoft.AspNetCore.Authorization;
    using ExampleAPI.Models;

    namespace Example.API.Controllers
    {
       
        [Produces("application/json")]
        [Route("api/Activity")]
        public class ActivityController : Controller
        {
            private readonly SampleContext _context;

            public ActivityController(SampleContext context)
            {
                _context = context;
            }

            // GET: api/Activity
            [HttpGet]
            public IEnumerable<Activity> Read()
            {
               return _context.Activity.ToList();
            }
        }
    }
    the code above returns JSON string back , I can see it in the browser
    http://localhost:49624/api/Activity

    but my grid is empty

    <!DOCTYPE html>
    <html>
    <head>
        
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.mobile.min.css" />

        <script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
        

    </head>
    <body>

            <div id="example">
                <div id="grid"></div>
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                transport: {
                                    read: {
                                        url: "http://localhost:49624/api/Activity",
                                        dataType: "jsonp"
                                    },
                                    parameterMap: function (data, operation) {
                                        return JSON.stringify(data);
                                    }
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            ActivityID: { type: "number" }
                                        }
                                    }
                                },
                                pageSize: 20
                             
                            },
                            height: 550,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                    field:"ActivityID"
                             
                                }
                            ]
                        });
                    });
                </script>
    </div>


    </body>
    </html>

    I found an example of Web API Core 
    http://demos.telerik.com/aspnet-core/grid/webapi
    I replaced my HttpGet with:

            [HttpGet]
            public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
            {
                var result = _context.Activity.ToList();
                return result.AsReadOnly().ToDataSourceResult(request);
            }
    A break point in the Get method never hit when I run it in the VS and I navigate in the browser to
    http://localhost:49624/api/Activity

    Thanks for your help




  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1099 posts

    Posted 27 Oct 2017 Link to this post

    Hi,

    I am not sure why the debugger is not hit when debugging but I have suggestion on how to resolve the issue in regards of the blank grid.

    If you inspect the result returned from the service of our online demo you will notice that it has the following format
    {
        "Data": [.... the data],
        "Total": 77,
        "AggregateResults": null,
        "Errors": null
    }
    Where Data is an array with the data and Total contains the total number of records. The result is returned in such a way because ToDataSourceResult(on the server) is called which returns a new DataSourceResult object that has Data and Total properties assigned. If you modify the service to return the data in the same way and provide values for the schema data and total properties which indicate the data source to read from the response object in particular places to extract the data and total, all should be good.

    Regards,
    Angel Petrov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top