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);
});

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>
    }
4

2 に答える 2

1

問題は、 index.cshtml<div id="restaurantList">の@Html.Partial("_Restaurants", Model)行をラップしており、部分ビュー_Restaurants.cshtmlのコード ブロックをラップする必要があることです。@foreach

コードにこの変更を加えたところ、最初だけでなく、検索ボタンをクリックするたびにレストランのリストが更新されました。

唯一の疑問は、なぜこれが原因でリストが初めて更新されないのかということです。

于 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 に答える