0

我正在使用 MVC3 创建一个 beta 移动网络应用程序。在我开始尝试在类似于此的视图中获取内联页面之前，它工作正常

这就是我目前在我看来称为索引的东西。为什么我点击导航栏中的链接时它没有转到页面？

@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><a href="#MyNews">My News</a></li>
            <li><a href="#PressReleases">Press Releases</a></li>
            <li><a href="#AllNews">All News</a></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>
4

1 回答 1

0

您的导航栏应该出现在 data-role="page" 中。在 data-role="page" 中，您应该有一个 data-role="header" 并且如果您希望它位于 jqm 页面的标题中，您的导航栏应该进入那里。

或者，如果你不想那样做（你应该这样做，因为它是正确的方式）。您可以尝试自己在导航栏中捕获这些链接的 onclick 事件，然后触发

$.mobile.changePage();

这可能有效。

于 2012-07-31T17:16:42.427 回答