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

Missing documentation on how to properly setup a new mobile application using asp.net wrappers

4 Answers 111 Views

General Discussions

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

Nicklas asked on 30 Jul 2013, 11:24 AM

Hi,

First off; it's absolutelty GREAT that you've released server wrappers for use with mobile! Up until now, I've made my own "homerolled" asp.net mobile application using javascript and different views with mvc. (Quite the hassle!)

Now, I've finally decided to port it over to your new server wrappers, and that's where I need some help!
I see from your demos that you include a

@{

Layout = "~/Areas/razor/Views/Shared/_MobileLayout.cshtml";

}

in all of your examples. What does this layout contain? For me, the examples doesn't really do me much good if I do not know how to setup my layout properly. The reason for my asking is that I have two shared layouts; one for logged in users and one for users that has not logged in yet.

My "_AnonynmousUserLayout.cshtml" (razor) looks like this:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="~/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>

<link href="~/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>

<link href="~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">

<script src="~/Scripts/kendo/2013.2.716/jquery.min.js"></script>

<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>

</head>

<body>

@RenderBody()

</body>

</html>

And the @RenderBody() will render the Login page, that at the moment looks like this (until I get the wrappers to work):

@(Html.Kendo().MobileView()

.Name("loginView")

.Title("Stimline Mobile")

.Content(

@<text>

<h2>New login form goes here</h2>

</text

When I open the page, nothing is displayed, but if I view the page source (in browser), all the markup including the text is there and produced by the wrappers.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>

<link href="/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">

<script src="/Scripts/kendo/2013.2.716/jquery.min.js"></script>

<script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>

</head>

<body>

<div data-reload="false" data-role="view" data-stretch="false" data-title="Stimline Mobile" data-use-native-scrolling="false" data-zoom="false" id="loginView"><div data-role="content">

<h2>New login form goes here</h2>

</div></div>

</body>

</html>

A little help would be appreciated :)

Also, do you have a template for creating a new asp.net mvc mobile project available? Couldn't seem to find one :)

4 Answers, 1 is accepted

Accepted

answered on 31 Jul 2013, 07:16 AM

Hello Nicklas,

Thank you for the kind words.

Actually you can find code for the server layouts in the archive that is distributed with the release:
kendoui.aspnetmvc.2013.2.716.commercial.zip\wrappers\aspnetmvc\Examples\Areas\razor\Views\Shared\_MobileLayout.cshtml.

What this page contains is the initialization of the mobile application which will initialize all other mobile widgets.

<!DOCTYPE html>

<html>

<head>

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

@RenderSection("HeadContent", false)

</head>

<body>

@RenderBody()

@(Html.Kendo().MobileApplication()

.ServerNavigation(true)

.Layout("examples")

.Name(isMobileDevice ? null : "example")

)

</body>

</html>

There are few articles showing how to setup a mobile wrappers: Using Kendo With ASP.NET MVC

Regarding you question about VS Template project - unfortunately we don't have one currently.

Please let us know if you need additional assistance or if you find something confusing.

Regards,
Nikolay Rusev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 17 Sep 2014, 08:16 AM

RazorAjaxNavigation.zip

Hello Ruud,

Unfortunately we don't have project templates for mobile application yet.

For your convenience I'm attaching quick example demonstrating how to setup mobile application by using MVC wrappers.

Regards,
Nikolay Rusev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.