单击侧菜单项时如何避免刷新页面答案

【问题标题】：How to Avoid Refreshing the Page when Clicking on the Side Menu item单击侧菜单项时如何避免刷新页面
【发布时间】：2022-01-10 18:52:28
【问题描述】：

我有一个侧边菜单，每个菜单项都是一个ViewComponent，当我单击该项目时，整个页面都会重新加载，我尝试使用 JavaScript，在链接上“防止默认 OnClick”，但是这样做时点击崩溃，我希望内容被渲染到侧面。

我的_布局：

<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
    <div class="menu_section">
        <ul class="nav side-menu">
            <vc:menu />
        </ul>
    </div>
</div>

我的视图组件：

<li>
    <a><i class="fa fa-edit"></i> @menu.Title <span class="fa fa-chevron-down"></span></a>
    <ul class="nav child_menu">
        @foreach (var submenu in menu.Items)
        {
            <li><a href="@submenu.Route">@submenu.Title</a></li>
        }
    </ul>
</li>

【问题讨论】：

你编写了一个MVC项目，希望页面实现部分刷新而不刷新整个页面的功能，所以只能使用ajax绑定Side Menu按钮点击事件，然后将主要内容加载到特定的 div 中，我在下面提供了代码示例，如果您觉得对您有帮助，您可以单击 √ 接受它作为答案吗？如果您有任何其他问题，请随时告诉我们。

标签： javascript c# asp.net-mvc asp.net-core

【解决方案1】：

我认为您需要使用以下代码来防止默认：


<a href="@submenu.Route" (click)="$event.preventDefault()"></a>

【讨论】：

【解决方案2】：

也许你想要这个功能？

在cshtml文件中，去掉标签的href特性，使用ajax获取页面内容。

<div><a id="btn1" href="#">btn1</a><a id="btn2" href="#">btn2</a></div>
<div id="center" style="width:800px;height:500px;background-color:#eee"></div>

<script>
    $("#btn1").click(function () {
        $.ajax({
            url: "https://localhost:44372/home/getPartialViewOne",
            type: "get",
            success: function (data) {
                $("#center").html("").append(data);
            }
        });
    });

    $("#btn2").click(function () {
        $.ajax({
            url: "https://localhost:44372/home/getPartialViewTwo",
            type: "get",
            success: function (data) {
                $("#center").html("");
                $("#center").html(data);
            }
        });
    });
</script>

并且控制器应该创建相应的返回页面视图的方法

public IActionResult getPartialViewOne() { 
            return new PartialViewResult
            {
                ViewName = "Test1Partial"
            };
        } 
        
        public IActionResult getPartialViewTwo() { 
            return new PartialViewResult
            {
                ViewName = "Test2Partial"
            };
        }

【讨论】：