Question

我正在mvc.core中启动一个新的材料设计项目，我对导航和链接有疑问。如果单击链接，它将“接管”整个页面，而不是加载到页面的内容区域。在老式HTML中，我将使用框架。但是在这里，wat是正确的方法吗？我包含了一个代码段：

<!doctype html>

<html lang="en">
<head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
    <!-- The drawer is always open in large screens. The header is always shown,
    even in small screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
            mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                    <label class="mdl-button mdl-js-button mdl-button--icon"
                           for="fixed-header-drawer-exp">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" name="sample"
                               id="fixed-header-drawer-exp">
                    </div>
                </div>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="/Metering/Channels">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content"><!-- Your content goes here --></div>

        </main>
    </div>
</body>
</html>

Answer 1

当您说它“接管”整个页面而不是加载到内容区域时，我想您是在谈论浏览器窗口导航到新页面/刷新同一页面。 / p>

如果是这种情况，请考虑使用Ajax方法和局部视图。这将更新页面上的特定区域。 Check this

Answer 2

解决了。事实证明，您必须使用Layouts-.NET Core MVC的一项功能，该功能直接支持我想做的事情。

打开从导航栏到“内容”区域的链接

2 个答案: