1

「Filter」ボタンがあるいくつかの検索フィルターを表示する「ContactsFilters」という部分ビューがあります。

@model AppName.Mvc.ViewModels.VmContactsFilters

<script language="javascript" type="text/javascript">

    $.ajaxSetup({ cache: false });

    function btnFilter_onclick() {

        // the below post, gets received by the action but the form data are not posted.
        $.ajax({
            url: "/ControllerName/ContactsList",
            type: 'POST',
            context: this,
            error: function (xhr) {
                alert(xhr);
            },
            success: function (data) {
                $('#ContactsListContainer').html(data);
            }
        });

        return false;
    }

</script>

<fieldset>
        <legend>Filter Contacts</legend>
        <div>
            @Html.HiddenFor(m => m.UserId)
            <div>
                <table>
                    <tr>
                        <th>Company:</th>
                        <td>@Html.TextBoxFor(m => m.CompanyName)</td>
                        <th>First name:</th>
                        <td>@Html.TextBoxFor(m => m.FirstName)</td>
                    </tr>
                    <tr>
                        <th></th>
                        <td colspan="3">
                            <input id="btnFilter" type="submit" value="Filter" onclick="btnFilter_onclick();" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </fieldset>

<div id="ContactsListContainer"></div>

ボタンがクリックされると、ポストによって以下のアクションが呼び出され、「ContactsList」という別の部分ビューからの結果が「ContactsFilters」ビューの「ContactsListContainer」div にロードされます。

 [HttpPost]
        public ActionResult ContactsList(VmContactsFilters vmContactsFilters)
        {
            var result = db.Contacts.Where(c => c.UserId == vmContactsFilters.UserId).ToList();
            // also filtering on other columns

            return PartialView(result);
        }

問題は、会社名、ユーザー ID などの投稿データが返されないことです。

データをサーバーに戻す方法は?

「data : {}」を使用する方法が 1 つあることはわかっていますが、テキスト ボックスが 10 個以上あります。post と言うだけで、すべてが MVC マジックによって投稿されることを願っていました。

フォーム投稿を定義すると、オブジェクトが投稿されることはわかっていますが、その場合、同じページではなく別のページに新しいビューが表示されるため、div を設定できません。

4

1 に答える 1

2

残念ながら、ここには魔法はありません。ただし、いくつかのオプションがあります。

  1. フォームを使用してデータを収集しますが、リクエストは手動で行います。

    $.ajax({
    ...
    data: $("#theForm").serialize(),
    ...
});

<form id="theForm">
...
<!-- your markup here -->
...
</form>

  2. AjaxExtensionsクラスとそのBeginFormメソッドを確認してください。ソリューションは次のようになります。

    @using (Ajax.BeginForm("ContactsList", "ControllerName", new AjaxOptions {/*some options here*/}))
{
<!-- markup here -->
}
于 2013-02-26T11:17:54.553 に答える