Kendo UI移动抽屉由于url中的#而无法正常工作

Kendo UI mobile drawer does not work properly because of # in url

本文关键字：常工作 工作 移动 UI 中的 url Kendo      更新时间：2023-09-26

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

剑道移动抽屉2013.2.918有一个错误，在后来的内部构建中得到了修复。尝试通过从抽屉中删除数据视图属性进行调试。但这将导致抽屉通过滑动显示在所有视图中。

相关文章：