在asp.net内核中不需要重新加载页面就可以从侧栏导航吗？

Question

我有三个索引页，每个页面包含3个部分视图。单击侧栏上的锚标记将加载包含部分视图的Index页面。

我有一个问题，边栏被刷新时，导航到一个页面。如何在不刷新边栏的情况下加载具有部分视图的索引页？我只希望页面本身呈现和刷新，而不是侧边栏。

我在主布局中将侧栏部分呈现为

_Sidebar.cshtml I.导航菜单：

   <div class="collapse" id="showDashboards">
            <ul class="no-bullets sidebar-nav">
                <li>
                    <a class="nav-link text-white" id="azure-nav" href="@Url.Action("AzureContent", "Azure")">
                        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#azure" /></svg>
                        Azure
                    </a>
                </li>
                <li>
                    <a class="nav-link text-white azure-reports">
                        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#reports" /></svg>
                        Reports
                    </a>
                </li>
                <li>
                    <a class="nav-link text-white" id="o365-nav" href="@Url.Action("Index", "O365")">
                        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#o365" /></svg>
                        Office 365
                    </a>
                </li>
                <li>
                    <a class="nav-link text-white o365-reports" href="@Url.Action("Index", "O365Reports")"> 
                        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#reports" /></svg>
                        Reports
                    </a>
                </li>

            </ul>
        </div>

Answer 1

这听起来像是您想要使用阿贾克斯。

由于我不确定您的其他视图(除了_Sidebar.cshtml__)是什么样子，所以我提供的示例得到了简化，您将不得不对它们进行调整以适应您的项目。我还假设您正在使用jQuery，但如果不使用，您也必须在那里进行一些更改。

由于您的侧边栏当前位于主布局页面中，因此您需要创建一个主索引页面，该页面包含要加载的其他3个部分视图的区域，以及一个用于javascript的部分视图部分。在最基本的情况下，它会是这样的：

@{
    Layout = "~/_Layout.cshtml";    // path to your main Layout
}

<div id="nav-ajax-target"></div>

@section scripts
{
    <script>
        // javascript in next code snippet
    </script>
}

然后，将单击事件添加到导航栏中的<a>标记中。本例利用了您已经使用的现有href属性。

// add this in the script section above

$("#showDashboards a.nav-link").click(function (e) {
    // prevent the default action of click an <a> tag
    // (navigating away from the current page)
    e.preventDefault();
    
    // get the value of the "href" attribute of the clicked link
    var href = $(this).attr("href");
    
    if (href) {
        // make an ajax call
        $.ajax({
            url: href,
            method: "GET",
            // load the result into the "nav-ajax-target" div
            done: function(data) {
                $("#nav-ajax-target").html(data);
            }
        });
    }
});