Question

我的目标

是在我的jquery文件（ otf.js ）中进行异步调用，该文件使用搜索词更新我的主页（ index.cshtml ）中的我的餐馆列表以过滤餐厅结果的形式输入。 otf.js 在一个包中，并在布局视图中呈现。

我的问题

是我输入搜索字词并提交表单，列表会按预期更新，但在输入新搜索字词并单击“提交”时，列表不会更改。每次输入新的搜索结果时都需要更改，然后单击“提交”。

我的源代码

otf.js

$(function () {

    var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            $target.replaceWith(data);
        });

        return false;
    };

    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
});

index.cshtml

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

@{
    ViewBag.Title = "Home Page";
}
<hr />

<form method="get" action="@Url.Action("index")"
        data-otf-ajax="true" data-otf-target="#restaurantList">
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
</form>

<div id="restaurantList">
    @Html.Partial("_Restaurants", Model)
</div>

_Restaurants.cshtml（局部视图）

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

   @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>
                @item.City, @item.Country

            </div>
            <div>
                Reviews: @item.CountOfReviews

            </div>
            <hr />

        </div>
    }

Answer 1

问题是<div id="restaurantList">围绕 index.cshtml 中的@Html.Partial("_Restaurants", Model)行，并且需要将@foreach代码块包裹在其中部分视图 _Restaurants.cshtml

我对我的代码进行了此更改，并且每次点击搜索按钮时餐馆列表都会更新，而不仅仅是第一次。

现在唯一的问题是为什么这会导致列表第一次没有更新？

Answer 2

看起来您正在从DOM中删除表单以替换为新表单。在这种情况下，您应该委派事件。

所以：

$("form[data-otf-ajax='true']").submit(ajaxFormSubmit);

成为：{这里我使用文档作为委托，但更好的是使用最接近的静态容器格式}

$(document).on('submit',"form[data-otf-ajax='true']",ajaxFormSubmit);

部分视图无法使用异步请求进行更新