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被更新了，然后＆＃34;点击＆＃34;的正常行为将使用HTTP GET请求重新加载页面

使用部分视图基于查询和返回结果过滤数据

1 个答案: