Datatable jquery Html.BeginForm搜索返回json代替表

Question

我有一个数据表jQuery，在默认配置下工作正常。现在，我正在尝试使用Html.BeginForm进行搜索，但返回了show json数据而非表格。

HTML

<table id="Table" class="table table-head-fixed">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr>
    </thead>
</table>

Datatable JS

@* === LOADER TABLE === *@
<script>
    var gerarTabela;
    var idPes;

    $(document).ready(function () {
            gerarTable = $("#Table").DataTable({
                    //"select": true,
                "processing": true,
                "serverSide": false,
                    "ordering": false,
                    "paging": true,
                    "searching": true,
                    "retrieve": true,
                    "ajax": {
                        "url": '@Url.Action("AjaxHandler", "People")',
                        "type": "POST",
                        "cache": true,
                        "dataType": "json",
                        "error": function () {
                            console.log("error!");
                        },
                        "complete": function () {
                            console.log("complete-> ");
                        }
                },
                "scroller": {
                    loadingIndicator: true
                },
                    "columns": [
                        { "data": "id" },
                        { "data": "name" },
                     },
                ],
                });

   });
</script>

CONTROLLER

    [HttpPost]
    public JsonResult AjaxHandler(string filter)
    {
        List<People> listPeoples = null;

        if (!string.IsNullOrEmpty(filter)) //---ERROR HERE---
        {
            var _Context = _context.People
                .Where(p => p.Name.Contains(filter))
                .Take(20);

            listPeoples = _Context.OrderByDescending(o => o.DtRegister).ToList();

            var ResultObj = new
            {
                Data = listPeoples ,
                Draw = "1",
            };
            return Json(ResultObj );
        }
        else //--THIS WORK FINE--
        {
            var _Context2 = _context.Peoples
                .Take(100);

            listPeoples = _Context2.OrderByDescending(o => o.DtRegister)
                .ToList();

            var ResultObj = new
            {
                Data = listPeoples ,
                Draw = "1",
            };
            return Json(ResultObj);
        }
    }

以上默认情况下工作正常，但是当我使用下面的Html.BeginForm进行搜索时，返回show only json data。

<div class="card-tools">
    <div class="input-group" style="width: 250px;">

        @using (Html.BeginForm("AjaxHandler", "People", FormMethod.Post))
        {
            <p>
                <div class="input-group">
                    @Html.TextBox("filter", null, new { @class = "form-control", placeholder = "Searching for?..." })
                    <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                </div>
            </p>
        }
    </div>
</div>

Answer 1

[您需要触发jQuery中的表单提交的事件，并使用ajax通过url和filter参数重新绑定并加载DataTable以重新呈现此表。

<script>
   var gerarTabela;
   var idPes;

    $(document).ready(function () {
        gerarTable = $("#Table").DataTable({
            //"select": true,
            "processing": true,
            "serverSide": false,
            "ordering": false,
            "paging": true,
            "searching": true,
            "retrieve": true,
            "ajax": {
                 "url": '@Url.Action("AjaxHandler", "People")',
                "type": "POST",
                "cache": true,
                "dataType": "json",
                "error": function () {
                    console.log("error!");
                },
                "complete": function () {
                    console.log("complete-> ");
                }
            },
            "scroller": {
                loadingIndicator: true
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },]
        });

        ***//add this event***
        $('form').on("submit", function (event) {
            event.preventDefault();
             gerarTable.ajax.url($(this).attr('action')+"?filter="+$("#filter").val()).load();

        });

    });

</script>

这里是结果：