Question

我试图实现一个过滤搜索框，实际上它可以工作，但它只是完全重新加载我的所有索引视图而不是替换div内容：

我的控制器操作（索引操作和部分操作）：

    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);
}

我的索引视图与搜索框和目标div一起呈现我的部分：

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

我的partialTable代码视图：

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

最后，我的keyup事件的ajax函数：

$("#sbox").keyup(function () {
    $("form").submit();
});

Answer 1

尝试data-ajax-url代替asp-action

<form data-ajax-url="@Url.Action("tablePartial","Grupo")" data-ajax-method="GET" data-ajax-update="#pdiv" data-ajax="true" method="get">

为什么Ajax助手不起作用？

1 个答案: