根据查询过滤数据并使用部分视图返回结果

Question

我正在尝试根据查询过滤数据。我正在使用部分视图来显示过滤后的数据。但是，局部视图中没有任何更新。我该如何解决这个问题？

控制器类：

public IActionResult Index() {
    IEnumerable<Organisation> organisations = _organisationRepository.GetAll().OrderBy(b => b.Name).ToList();

    if (isAjaxRequest()) {
        string text = Request.Form["text"].ToString();
        return PartialView("_Organisations", _organisationRepository.GetByName(text).ToList());
        }

        return View(organisations);
    }

private bool isAjaxRequest() {
        return Request != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest";
    }

组织视图：

<form asp-controller="Organisation" asp-action="Index">
<div class="form-inline">
    <div class="form-group">

        <label for="text">Filteren in organisaties</label>
        <input type="text" name="text" id="text" required pattern="^([0-9]{4}|[a-zA-Z]+)$">

        <label for="selected"></label>
        <select name="selected" id="selected" class="form-control">
            <option value="name">Naam</option>
            <option value="postalcode">Postcode</option>
        </select>
    </div>

    <button type="submit" class="btn btn-default" id="search">Zoeken</button>
</div>
</form>

<div id="partial">
    @Html.Partial("_Organisations", Model);
</div>

局部视图：

<table class="table table-striped table-condensed table-bordered">
<tr>
    <th>Naam</th>
    <th>Adres</th>
    <th></th>
</tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @item.Name
        </td>
        <td>
            @item.Location.ToString()
        </td>
        <td>
            <a onClick="showForm(this, @item.OrganisationId)" href="#">Selecteer</a>
        </td>
    </tr>
}

Javascript 文件：

$("#search").click(function () {
    $.ajax({
    url: "Organisation/Index",
    type: "post",
    data: $("form").serialize(),
    success: function (result) {
        $("#partial").html(result);
        }
    });
});

任何帮助将不胜感激！

Answer 1

第一个答案（不正确）：如果不是拼写错误，您在 jquery $("#search").click(function () { 中忘记了 $。

新答案：我认为这是错误：您必须阻止点击事件的正常行为。更改您的 javascript 函数（2 处修改）：

        $("#search").click(function (e) {

            e.preventDefault();

            $.ajax({
                url: "Organisation/Index",
                type: "post",
                data: $("form").serialize(),
                success: function (result) {
                    $("#partial").html(result);
                }
            });
        });

现在函数在参数中使用 e（事件），在我们进行 Ajax 调用之前，我们需要调用 e.preventDefault(); 错误是 Ajax 调用返回了部分视图，#partial html 已更新，但是那么“点击”的正常行为将使用 HTTP GET 请求重新加载页面