How to put jqm data-role="page" in a MVC view page? - asp.net-mvc

Question

I'm using MVC3 to create a beta mobile web app. It was working fine until I started to try and get inline pages inside of a view similar to this
This is what I currently have in my view called Index. How come when I click the links in the navbar it doesn't go to the page?
#model List<ShawGoVersion1.Models.NewsItem>
#{
ViewBag.Title = "News";
}
#section Header {
#Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l"})
<h1>#ViewBag.Title</h1>
<div data-role="navbar">
<ul>
<li>My News</li>
<li>Press Releases</li>
<li>All News</li>
</ul>
</div>
}
<div data-role="page" id="MyNews">
<div data-role="content">
<h1>This feature coming soon</h1>
</div>
</div>
<div data-role="page" id="AllNews">
<div data-role="content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Article")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>
<div id="PressReleases" data-role="page">
<div data-role"content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Press Release")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>

Answer 1

Your navbar should appear within data-role="page". Within the data-role="page" you should have a data-role="header" and your navbar should go in there if you want it to be in the header of the jqm page.
Alternatively if you don't want to do it that way(which you should do, as its the correct way). You could try catch the onclick event of those links in your navbar yourself and then fire
$.mobile.changePage();
This may work.