0

我的目标

是在我的 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);
});

索引.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>
    }
4

2 回答 2

1

问题是<div id="restaurantList">环绕@Html.Partial("_Restaurants", Model)in ​​dex.cshtml中的行，它需要环绕@foreach局部视图_Restaurants.cshtml中的代码块

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

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

于 2013-06-03T16:14:23.390 回答
0

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

所以：

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

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

$(document).on('submit',"form[data-otf-ajax='true']",ajaxFormSubmit);
于 2013-06-03T16:21:51.213 回答