如何将页面数据发布到使用 ajax 呈现部分视图的操作？

Question

我有一个名为“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>

单击按钮时，它会通过 post 调用以下操作，并将另一个名为“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);
        }

问题是post数据，比如Company Name、UserId等，没有回传。

如何将数据回传到服务器？

我知道一种可能的方法是使用“数据：{}”，但我有超过 10 个文本框。我希望我可以只说帖子，所有内容都会由 MVC 魔术发布！

我知道如果我定义一个表单发布，它会发布对象，但在这种情况下我将无法填充我的 div，因为它将在单独的页面而不是同一页面中显示新视图。

Answer 1

不幸的是，这里没有魔法。不过，您仍然有多种选择：

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