在 asp.net 核心中從側邊欄導航而不重新加載頁面？

Question

我有三個索引頁面，每個頁面包含 3 個局部視圖。 單擊側邊欄上的錨標記會加載包含部分視圖的索引頁面。

導航到頁面時，邊欄會刷新，我遇到了問題。 如何在不刷新側欄的情況下加載具有部分視圖的索引頁面？ 我只希望頁面本身呈現和刷新而不是側邊欄。

我像這樣在主布局中渲染側邊欄部分 <partialname="_SideBar.cshtml" />

_Sidebar.cshtml 即導航菜單：

   <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

這聽起來像你想使用AJAX 。

由於我不確定您的其他視圖（除了_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);
            }
        });
    }
});