0

我在我的 asp.net mvc 移动应用程序中遇到了抽屉问题。经过很多麻烦（可能还有一些 asp.net mvc 助手中的错误），我决定回滚到我的应用程序的 javascript 布局。

我唯一的问题是我实现了一个似乎无法正常工作的抽屉菜单。

出于某种原因，Kendo 在我的网址中间生成了一个 #，导致抽屉不显示。这是不起作用时的网址：

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-view 的 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

0

剑道移动抽屉 2013.2.918 存在一个错误，并在后来的内部版本中修复。通过从抽屉中删除 data-views 属性来尝试一些调试。但这会导致抽屉通过滑动显示在所有视图中。

于 2014-02-02T06:50:57.250 回答