How to Avoid Refreshing the Page when Clicking on the Side Menu item-CodePudding

I have a Side Menu, each Menu item is a ViewComponent, when I click on the item the entire page is reloaded, I've tried using JavaScript, "prevent Default OnClick" on the Link, but when doing this the Click gets crash, I would just like the Content was render to the Side.

My _Layout :

<!-- 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>

My ViewComponent :

<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>

CodePudding user response：

I think you need to preventDefault by using this code:


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

CodePudding user response：

Maybe you wanna this feature?

In the cshtml file, you remove the href feature of tag and using ajax to get the page content.

<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>

And the controller should create corresponding methods which return page view

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