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

Posted 2023-03-27

【中文标题】单击侧菜单项时如何避免刷新页面

【英文标题】：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 中，我在下面提供了代码示例，如果您觉得对您有帮助，您可以单击 √ 接受它作为答案吗？如果您有任何其他问题，请随时告诉我们。

【参考方案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"
            ;