Navigation with MVC Action problem

[King Wilder]

Hi, this is really pretty cool, but I've stumbled into a problem, and I don't know if this is a KendoUI issue that I'm not fully comprehending or and HTML5 issue.

My mobile app is presently setup to have a home page that has a listview of links to various parts of the application.  One such action is to Add a new item.

-- Home Page - (MVC Action) Home/Index
-- Add Item - (MVC Action) Home/Add

I have a NavBar div in the Add Item view with an "a" tag that links back to the home page but it never gets there.  When I hover over the Home link it shows the correct link: http://localhost:[myport]/, but it goes to: http://localhost:[myport]/Home/Add/#/Home/Index.

This is the HTML for the link on the Add Item view that should go back to the Home page:

<div data-role="navbar">

    <span data-role="view-title"></span>

    <a data-align="right"

        data-role="button"

        class="nav-button"

        href="@Url.Action("Index", "Home")">Home</a>

</div>

Is it a better practice to use KendoUI with an HTML site that communicates with a web service instead?  I just don't know if there's some sort of issue with using MVC.  It's probably the other option, which is my incompetence.  ;^)

Any help is appreciated.

Thanks,

King Wilder

[Petyo]

Hi,

In theory, the approach you have used should work, but it is not the most optimal way, as a remote view will be loaded. Since this is your home view, you already have it loaded - no need for a secondary ajax request.

The "best practice" in that case would be to name your root view, and link to it using anchor href.

<!-- home view -->
<div data-role="view" id="index">
 ....
</div>

<!-- navbar -->
<div data-role="navbar">
    <span data-role="view-title"></span>
    <a data-align="right"
        data-role="button"
        class="nav-button"
        href="#index">Home</a>
</div>

Regarding your general question about the HTML site: from what we have seen so far, full page ajax requests (which is how our remote views work) perform significantly slower on mobile devices. So for now, I would recommend loading data with web services as the better approach.

For a more complete example you can look through the source of our Sushi demo, where Kendo DataSource is utilized for remote data load.

Hope this helps.

Kind regards,
Petyo
the Telerik team

[King Wilder]

Petyo, I'm only kind of understanding what you are saying.  I've seen different examples of creating HTML5 mobile examples (non-KendoUI), and some have a single page with multiple views on it, and some applications have many individual HTML pages.  It seems the very simple applications have a single page with multiple views.  The more complex applications seem to have multiple HTML pages.

I'm trying to find the reason to choose one over the other.  In my case I'd like to have the home page have a different design than the rest of the pages.  Mostly because all the other pages will probably be using some sort of top NavBar and maybe bottom TabStrip for navigation through the application.  But the home page will simply be the logo and a list of links that point to most frequently used pages, or sections heads, like Settings, Categories, etc, and then the user can drill down inside that section.

I looked at the Sushi example a little while ago and I can see how that works, but it doesn't have a distinct home page, which is what I want.  Is it possible to have a mobile app with both multiple views on a single page and multiple pages?  And unless I'm really doing something wrong (or I don't completely understand how HTML5 for mobile works, which is a distinct possibility), ASP.NET MVC doesn't seem to be the best scenario to be used with HTML5 mobile apps, at least the way I envision it.

So when you say, "Regarding your general question about the HTML site: from what we have seen so far, full page ajax requests (which is how our remote views work) perform significantly slower on mobile devices. So for now, I would recommend loading data with web services as the better approach.", are the "remote views" the scenario of having multiple HTML pages?

Also, "no need for a secondary ajax request...", it sounds like you are saying that a call to an MVC Action is an ajax request, no matter what.  Really?  It's not just a call to a resource like in a standard MVC web application?

You can see I'm pretty green as far as building mobile applications is concerned.  :^)  I'm just trying to absorb this new thought process.

If you can enlighten me a little more, it would be appreciated.

Thanks,

King Wilder

[Petyo]

Hello,

You understood my explanations correctly. Of course, there is no ultimate recipe applicable for all cases. Using remote views (which on the server are presented as multiple HTML pages, or MVC actions, if you want) will make sense if they have complex content/structure.

One can mix and match pages with multiple local views with remote views. For instance, the sushi demo loads the about view remotely, while the other views are local. Again, it really depends on your case. 

Hope this helps,
Petyo
the Telerik team

[Richard]

King,

I appreciate you posting your questions.  I think many of us have the exact same questions/concerns/confusions about MVC & HTML5.  I originally designed my app to use multiple pages.  To link back to the "home" page from a secondary page I used:

 <a data-align="left" data-role="button" class="nav-button" href="../index.htm" data-rel="external">Home</a>

Note, that if you set data-rel="external" it allows you to go to another page, as opposed to trying to find a view on the existing page.

Regards,

Richard

[King Wilder]

Petyo and Richard,

I appreciate your help on this.  It definitely seems I need to find a good resource for HTML5 mobile applications.

Richard, I will try your suggestion of using the "rel='external'" attribute.  That sounds like it should work.

Thanks again.  I'll let you know if I have any issues.

[King Wilder]

Richard, that attribute was the answer to my problem.  It worked!

Thanks,

King Wilder