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
>