Question

我正在使用MVC3来创建测试版移动网络应用。它工作正常，直到我开始尝试在类似于this

的视图中获取内联页面

这就是我目前在我看来称为Index的内容。为什么当我点击导航栏中的链接时，它不会转到页面？

@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>

Answer 1

您的导航栏应显示在data-role =“page”中。在data-role =“page”中，你应该有一个data-role =“header”，如果你想让它在jqm页面的标题中，你的导航栏应该在那里。

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

$.mobile.changePage();

这可能有效。

如何将jqm data-role =“page”放入MVC视图页面？

1 个答案: