Tengo un menú lateral, cada elemento del menú es un ViewComponent , cuando hago clic en el elemento, se vuelve a cargar toda la página, he intentado usar JavaScript, "evitar el clic predeterminado" en el enlace, pero al hacer esto, el clic se bloquea, Solo me gustaría que el contenido se renderizara en el lateral.
Mi _Diseño :
<!-- 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>Mi componente de vista :
<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>Creo que necesitas prevenirDefault usando este código:
<a href="@submenu.Route" (click)="$event.preventDefault()"></a>¿Quizás quieras esta función?
En el archivo cshtml, elimina la característica href de la etiqueta y usa ajax para obtener el contenido de la página.
<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>Y el controlador debe crear los métodos correspondientes que devuelvan la vista de página
public IActionResult getPartialViewOne() { return new PartialViewResult { ViewName = "Test1Partial" }; } public IActionResult getPartialViewTwo() { return new PartialViewResult { ViewName = "Test2Partial" }; }