Question

我正在研究asp.net MVC 4 Mobile模板并尝试在_layout视图上显示导航菜单

环境：XP，Visual Web开发人员2010 express，VB。

以下是我的_Layout视图

<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
@*---Master Page---*@
<div data-role="page" data-theme="b">
    @*---Header Image---*@
    <div data-role="header">
        <div>
            <img src='@Url.Content("~\Content\Images\Banner.jpg")' alt="Header Img" style="max-width:100%;" />
        </div>
    </div>

    @*---Menu---*@
    <a href="#" id="search-area-switch" >Menu</a>
    <div id="dvMenu"  style="display:none">
        <ul data-role="listview" data-theme="a" >
        <li data-role="list-divider"> Select Search Type</li>
            @Code
                Dim menu As New Dictionary(Of String, String)()
                menu = CType(Session("menu"), Dictionary(Of String, String))
                @For Each item As KeyValuePair(Of String, String) In menu
                    @<li>
                        <a href='@item.Value' >
                            @item.Key
                        </a>
                    </li>
                Next                    

            End Code            
        </ul>
    </div>
        @*---Page Heading---*@
        @ViewData("SearchType").ToString()
        @*---Content/child view---*@
        <div data-role="content" >
            @RenderBody()
        </div>
</div>

    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @RenderSection("scripts", required:=False)

    @*--- Menu Toggle script ---*@
    <script type="text/javascript">
            $('#search-area-switch').live('tap', function (event) {
                $('#dvMenu').toggle("slow");
            });
    </script>
</body>

现在在初始加载时，菜单切换工作正常，但是当我在菜单下选择一个项目，返回另一个视图时，一切看起来都不错，但菜单不再有效。

我做错了什么？

Answer 1

我现在知道了，我只需在菜单项

上禁用AJAX

所以添加'data-ajax =“false”'对我有用。所以关注完毕_layout

<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @RenderSection("scripts", required:=False)        

    @*--- Menu Toggle script ---*@
    <script type="text/javascript">
        $('#search-area-switch').live('tap', function (event) {
            $('#dvMenu').toggle("slow");
        });
</script>
</head>
<body>

@*---Master Page---*@
<div data-role="page" data-theme="b">

    @*---Header Image---*@
    <div data-role="header">
        <div>
            <img src='@Url.Content("~\Content\Images\Banner.jpg")' alt="Header Img" style="max-width:100%;" />
        </div>
    </div>

     @*---Page Heading---*@
    <div data-role="header">
        <h4 style="text-align: left; margin-left: .1em;">@ViewData("SearchType").ToString().ToUpper()</h4>
        <a id="search-area-switch" href="#" data-icon="arrow-d" class="ui-btn-right">Menu</a>
    </div>

    @*---Menu---*@
    <div id="dvMenu" style="display:none;" >
        <ul data-role="listview" data-theme="a" >
        <li data-role="list-divider"> Select Search Type</li>
            @Code
                Dim menu As New Dictionary(Of String, String)()
                menu = CType(Session("menu"), Dictionary(Of String, String))
                @For Each item As KeyValuePair(Of String, String) In menu
                    @<li>
                        <a href='@item.Value' data-ajax="false" id='@String.Concat(item.Key, "_menuid")' >
                            @item.Key
                        </a>
                    </li>
                Next                    

            End Code            
        </ul>
    </div>

    @*---Content/child view---*@
    <div data-role="content" >
        @RenderBody()
    </div>

</body>

加载另一个视图后，JQuery Mobile Menu不起作用

1 个答案: