Getting 'HelloWorld' working in Visual Studio 2010 - please help

2 posts, 0 answers
  1. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 02 May 2012 Link to this post

    Hello, I am trying to get the Hello World example from http://www.kendoui.com/documentation/mobile/application/overview.aspx to work in a Visual Studio 2010 ASP.NET project.

    i created a new aspx page called 'Mobile.aspx' and included all the Kendo js files and Scripts.
    I tried to "aspify" the Hello World example, but when I run it via F5 (and it is displayed in Chrome) I just see the content from the default Site.master page, and just the text
    Header
    Hello world!
    Footer
    in the content area.  I see nothing that looks like a Kendo mobile app.

    Here is my attempt at "aspification" of the Hello World app.  The Intellisense doesn't like the 'data-role' attribute, but I suspect my problems are much more basic.
    --------------------------------------------------------------
    <%@ Page  Title="Mobile" MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeFile="Mobile.aspx.cs"
        Inherits="Mobile" %>

    <asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
        <title>Kendo Mobile Test</title>
        <!-- Kendo UI Web styles-->
        <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
        <!-- Kendo UI Web scripts-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.dataviz.min.js" type="text/javascript"></script>-->
        <script src="content/console.js" type="text/javascript"></script>
    </asp:Content>

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

       <div data-role="view">
         <div data-role="header">Header</div>
         Hello world!
         <div data-role="footer">Footer</div>
       </div>

       <script type="text/javascript" src="js/kendo.mobile.application.min.js">
           var app = new kendo.mobile.Application(); //document.body is used by default
       </script>

    </asp:Content>
    --------------------------------------------------------------

    Thank you,
    Tim
  2. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 02 May 2012 Link to this post

    OK, made some progress on my own.  Two problems above:
    1) wrong headers
    2) src="js/kendo.mobile.application.min.js" is incorrect and not needed

    the latest version, which seems to be invoking the Kendo Mobile Application finally:

    <%@ Page  Title="Mobile" MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeFile="Mobile.aspx.cs"
        Inherits="Mobile" %>

    <asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
        <title>Kendo Mobile Test</title>
         <!--In the header of your page, paste the following for Kendo UI Mobile styles-->
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

        <!--Then paste the following for Kendo UI Mobile scripts-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.mobile.min.js" type="text/javascript"></script>

    </asp:Content>

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

       <div data-role="view">
         <div data-role="header">Header</div>
         Hello world!
         <div data-role="footer">Footer</div>
       </div>

       <script type="text/javascript">
           var app = new kendo.mobile.Application(); //document.body is used by default
       </script>

    </asp:Content>

Back to Top