ajax - Ajax 呼び出しを使用して ASP.NET MVC で部分ビューをレンダリングしないフォームを送信する

Question

私の Index コントローラは、いくつかのテーブルのデータをフィルタリングするための 3 つのチェックボックスを持つフォームを含むビューをロードします。Index ビュー内には、次のものがあります。

<div id="ajax-container">

    <div id="content-loading"><img src="~/Images/preloader4.gif" /></div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#filter-form").trigger("submit");
        });
    </script>
}

つまり、ページの読み込み時に、デフォルト値でフォームを送信します。これは、次のような部分ビューを返すコントローラーのメソッドを呼び出します。

<table id="summaryTable">
    <tr>
       <th>Column1</th>
       <th>Column2</th>
       <th>Column3</th>
    </tr>
    <tr>
       <td>Column1</td>
       <td>Column2</td>
       <td>Column3</td>
    </tr>
</table>

最初のページの読み込み時に、これは機能します。その後フォームを送信するたびに、ビューが更新されることはありません。部分ビューを返すメソッドが呼び出され、PartialView() が返されますが、更新されません。

これはすべて、document.ready で AJAX 呼び出しを実装しようとする前に機能していました。違いは、Index ビューの最初のロードが @Html.Partial("_summaryTable", Model) (現在は ajax-container div がある場所) と呼ばれ、その内容全体<div id="ajax-container">が部分ビューにあり、テーブルをラップしていることです。

編集

Ajax 呼び出しは次のとおりです。

$(function () {

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

    $("#content-loading").show();

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

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $("#content-loading").hide();
    });

    return false;
};