0

asp.net mvc モバイル アプリケーションのドロワーで問題が発生しています。多くの面倒 (およびおそらく asp.net mvc ヘルパーのいくつかのバグ) の後、私はアプリの JavaScript レイアウトにロールバックすることにしました。

私が抱えている唯一の問題は、適切に機能していないように見える引き出しメニューを実装したことです。

何らかの理由で、Kendo が URL の途中に # を生成し、ドロワーが表示されません。これは、動作しない場合の URL です。

http://localhost:55683/#/UnitDetails/Index/2

そして、これが機能するときです：

http://localhost:55683/UnitDetails/Index/2#/

共有 _Layout.cshtml のマークアップは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>

    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
        @RenderBody()

    <!--Main Layout -->
    <div data-role="layout" data-id="mainLayout">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <div data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="action" href="~/Logout">Logout</a>
            </div>
        </div>
    </div>
</body>
</html>

そして、これが私の UnitDetails ビューの Index.cshtml です。

<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span data-role="view-title"></span>
            @*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*@
            <a data-align="right" data-role="backbutton">Back</a>
        </div>
    </header>
</div>

<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
   <!-- Content removed for readability -->
    <div data-role="footer">
    </div>

</div>

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
    <ul data-role="listview" data-type="group">
        <li>Mailbox
            <ul>
                <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
            </ul>
        </li>
</div>

<script>
    window.app = new kendo.mobile.Application(document.body, {
        layout: "drawer-layout",
        transition: "fade",
        skin: "flat",
        hideAddressBar: true
    });
</script>
4

1 に答える 1