0

私はMVC3を使用してベータ版のモバイルWebアプリを作成しています。これに似たビュー内にインラインページを取得しようとするまでは、正常に機能していました。

これは、私が現在インデックスと呼んでいるものです。ナビゲーションバーのリンクをクリックしてもページに移動しないのはなぜですか？

@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 ページのヘッダーに配置する場合は、navbar をそこに配置する必要があります。

または、そのようにしたくない場合（正しい方法であるため、これを行う必要があります）。navbar でこれらのリンクの onclick イベントを自分でキャッチしてから起動することができます

$.mobile.changePage();

これはうまくいくかもしれません。

于 2012-07-31T17:16:42.427 に答える