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>
I think you need to preventDefault by using this code:
<a href="@submenu.Route" (click)="$event.preventDefault()"></a>
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"
};
}