Why Ajax helpers doesnt work? - asp.net

Question

Im trying to achieve a filter search box, actually it works but it just completely reload all of my Index view instead of replacing the div content:
My controller Actions (The index action and the partial action):
public IActionResult Index()
{
var grupoModels = _grupos.GetAll("");
var listaGrupos = grupoModels
.Select(resultado => new grupoCRUDModel
{
Codigo = resultado.id,
Nombre = resultado.nombre,
NIS = resultado.nis,
FeAcceso = resultado.feacceso,
Linea = resultado.Linea
});
var model = new grupoIndexModel()
{
grupos = listaGrupos
};
return View(model);
}
public IActionResult tablePartial(string filter = "")
{
var grupoModels = _grupos.GetAll(filter);
var listaGrupos = grupoModels
.Select(resultado => new grupoCRUDModel
{
Codigo = resultado.id,
Nombre = resultado.nombre,
NIS = resultado.nis,
FeAcceso = resultado.feacceso,
Linea = resultado.Linea
});
var model = new grupoIndexModel()
{
grupos = listaGrupos
};
return PartialView("tablePartial",model);
}
My Index view with the searchbox and the target div to render my partial:
<div>
<div class="mdl-grid headeritems">
<div class="mdl-cell mdl-cell--8-col ">
<h2>LISTADO DE GRUPOS</h2>
</div>
<div class="mdl-cell mdl-cell--2-col" style="text-align:right;">
<button class="mdl-button mdl-js-button mdl-button--fab" id="btnAdd">
<a class="material-icons" asp-controller="Grupo" asp-action="Crear" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">add</a>
</button>
</div>
<div class="mdl-cell mdl-cell--2-col">
<form asp-controller="Grupo" asp-action="tablePartial" data-ajax-method="GET" data-ajax-update="#pdiv" data-ajax="true" method="get">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sbox">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sbox" name="filter">
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>
</form>
</div>
</div>
<br />
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div id="pdiv" class="mdl-cell mdl-cell--10-col">
#Html.Partial("tablePartial")
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
My partialTable code view:
#model libraryDemo.Models.grupoIndexModel
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="tablaGrupos" style="width:100%;">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Nombre</th>
<th class="text-center">Linea</th>
<th class="text-center">Codigo</th>
<th colspan="2" class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
#foreach (var grupo in Model.grupos)
{
<tr class="mtoRow">
<td class="mdl-data-table__cell--non-numeric">#grupo.Nombre</td>
<td class="text-center">#grupo.Linea.nombre</td>
<td class="text-center">#grupo.Codigo</td>
<td class="text-center" data-toggle="tooltip" data-placement="top" title="Editar"><a class="btn btn-warning" asp-controller="Grupo" asp-action="Editar" asp-route-id="#grupo.Codigo" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">Editar</a></td>
<td class="text-center" data-toggle="tooltip" data-placement="top" title="Eliminar"><a class="btn btn-danger" asp-controller="Grupo" asp-action="Eliminar" asp-route-id="#grupo.Codigo" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">Eliminar</a></td>
</tr>
}
</tbody>
</table>
Finally, my ajax function for keyup event:
$("#sbox").keyup(function () {
$("form").submit();
});

Answer 1

try data-ajax-url in place of asp-action
<form data-ajax-url="#Url.Action("tablePartial","Grupo")" data-ajax-method="GET" data-ajax-update="#pdiv" data-ajax="true" method="get">