This is a migrated thread and some comments may be shown as answers.

Using own REST service

0 Answers 125 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
HDC
Top achievements
Rank 1
HDC asked on 28 Aug 2012, 05:01 PM

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>

No answers yet. Maybe you can help?

Tags
General Discussions
Asked by
HDC
Top achievements
Rank 1
Share this question
or