Using own REST service

1 posts, 0 answers
  1. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 28 Aug 2012 Link to this post

    Hi,

    I'm new to development with Kendo UI

    I want to create a mobile application that needs to be deployable to ios & android.

    From what i know, i'm therefore limited to HTML5, CSS and Javascript.

    So i have created a project in Visual Studio that only contains those things in a first project. Then i have created a second web project that will contain the services. I have following code in an html page (see bottom).

    When i run it nothing will happen... however, when i move the services into the first project and set url to "api/menu", it will work, so i know the service is configured correctly!

    The below code is based on http://docs.kendoui.com/tutorials/ASP.NET/asp-net-hello-services, but i know this not really for making a mobile kendo ui application. I guess my question is really on how you can make a mobile Kendo UI application that contacts an asp.net REST service.

    <!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>   
        <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" data-layout="default">
            <table id="menu">           
            </table>
            <script type="text/javascript">           
     
                $(function () {               
     
                    // select the employees table from the page and
                    // store it in a variable for later use.
                    var $menu= $("#menu");
     
                    // make an ajax call to the employees WebAPI service
                    // to retrieve a JSON response of all the employees
                    $.ajax({
     
                        // the url to the service
                        url: "http://localhost:50999/api/menu",
     
                        // the format that the data should be in when
                        // it is returned
                        contentType: "json",
     
                        crossDomain: true,
     
                        // the function that executes when the server
                        // responds to this ajax request successfully
                        success: function (data) {
     
     
                            // iterate over the data items returned from the server
                            // the index variable is the position in the colleciton.
                            // the item variable is the item itself
                            $.each(data, function (index, item) {
     
                                // append the first and last name to the table
                                $menu.append("<tr><td>" + item.Week + "</td>" +
                                              "<td>" + item.Day + "</td>");
     
                            });
     
                        }
     
                    });
     
     
     
                                });
             
    </script>
     
        </div>
     
        <section data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">My App</div>
            </header>
            <!--View content will render here-->
             
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#">Home</a>  
                    <a href="about.html">About</a>
                    <a href="#view2">More</a>       
                </div>
            </footer>
        </section>
     
        <script src="js/jquery.min.js"></script>   
        <script src="js/kendo.mobile.min.js"></script>
     
    <script type="text/javascript">   
            var app = new kendo.mobile.Application(document.body,
            {
                transition: 'slide',
                platform: 'android'
            });
    </script>
    </body>
    </html>
Back to Top