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

本文关键字：现部 视图 Action ajax 何使用 数据 | 更新日期: 2023-09-27 18:01:04

我有一个名为"ContactsFilters"的部分视图，它显示了一些搜索筛选器，我们在其中有一个"Filter"按钮：

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

问题是，发布数据，如公司名称、用户ID等，没有发布回。

如何将数据发布回服务器？

我知道一种可能的方法是使用"data:｛｝"，但我有超过10个文本框。我希望我可以只是说帖子，所有的都会被MVC魔术发布！

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

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

不幸的是，这里没有魔法。尽管如此，你仍然有几个选择：

  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 -->
}
相关文章：