不使用异步更新请求呈现部分视图答案

【问题标题】：Partial view not rendering with asynch request for update不使用异步更新请求呈现部分视图
【发布时间】：2013-06-03 16:14:23
【问题描述】：

我的目标

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

【问题讨论】：

标签： jquery ajax html asynchronous partial-views

【解决方案1】：

问题是<div id="restaurantList">在index.cshtml中环绕@Html.Partial("_Restaurants", Model)这一行，需要在局部视图中环绕@foreach代码块 _Restaurants.cshtml

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

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

【讨论】：

是问题还是答案还是两者兼而有之？

【解决方案2】：

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

所以：

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

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

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

【讨论】：