Calling Asp.Net Web Api in Kendo UI html page

2 posts, 0 answers
  1. Nithya
    Nithya avatar
    1 posts
    Member since:
    Feb 2013

    Posted 30 Oct 2013 Link to this post

    Dear All,

    I have created the web api and deployed it.in the html page using the kendo Ui

    "<head>
        <!-- Common Kendo UI Web CSS -->
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <!-- Default Kendo UI Web theme CSS -->
        <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

        <!-- jQuery JavaScript -->
        <script src="js/jquery.min.js"></script>
        <!-- Kendo UI Web combined JavaScript -->
        <script src="js/kendo.all.min.js"></script>

        <title>Dashboard</title>
    </head>
    <body>

        <div id="example" class="k-content">

            <div class="grid-wrapper">
                
                <div id="grid"></div>

                <script>
                    var remoteDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://localhost:2704/api/employee",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Id: { type: "number" },
                                    FirstName: { type: "string" },
                                    LastName: { type: "string" }
                                }
                            }
                        }

                    });


                    $("#grid").kendoGrid({
                        dataSource: remoteDataSource,
                        height: 200
                    });

                </script>
            </div>

            <div class="table-wrapper">
                <div id="divResult">
                    
                    <script>
                        function GetAllProducts() {
                            jQuery.support.cors = true;
                            $.ajax({
                                url: 'http://localhost:2704/api/employee',
                                dataType: 'jsonp',
                                success: function (data) {
                                    WriteResponse(data);
                                },
                            });
                        }
                        function WriteResponse(products) {
                            var strResult = "<table><th>ID</th><th>FirstName</th><th>LastName</th>";
                            $.each(products, function (index, product) {
                                strResult += "<tr><td>" + product.Id + "</td><td> " + product.FirstName + "</td><td>" + product.LastName + "</td></tr>";
                            });
                            strResult += "</table>";
                            $("#divResult").html(strResult);
                        }

                        $(document).ready(function () {
                            GetAllProducts();
                        });
                    </script>
                </div>
            </div>
        </div>
     
    </body>"

    im calling the the api the response headers are empty.when i access the api it is working fine.Can anyone help how to intergerate the web api with the Kendo UI html pages.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Oct 2013 Link to this post

    Hello,

     Web API doesn't support JSONP by default. Try using dataType: "json" in your data source configuration.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top