我的 JQuery AJax 调用没有序列化表单数据和加载局部视图

Question

我正在使用 ASPNET MVC 视图提交一些搜索条件并使用结果加载部分视图。我正在 ajax 调用我的 controller/Action 并加载部分视图。当我序列化表单时，序列化的对象应该被发送到我的操作方法，但这不起作用。此外，我正在返回局部视图，但它不会呈现局部视图的 html 。

请查看下面的代码，并在此处提出任何不正确或遗漏的建议。

这是脚本：

$('#btnsearch').click(function () {
        var formData = new FormData();
        var form = $('form').serialize();
        alert(form);
        formData.append('Panel', form);
        $.ajax({
            url: "Email/GetEmails",
            type:'POST',
            dataType: 'html',
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                alert(result);
                $("._EmailPartial").html(result);
            },
            error: function () {
                alert('Failed to retrieve the Emails.');
            }
        });
    });

这里是主视图和局部视图：

@using AllturnaCRMOperations.Models
@model AllturnaCRMOperations.Models.EmailSearchPanel

@{
    ViewBag.Title = "Enter the filters to see emails";
}

<h3 class="text-center"><span>@ViewBag.Title</span> </h3>

<div class="row">    
    <div class="SearchPanel" id="SearchPanel">
        <div class="container">
            @using (Html.BeginForm(new { enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group" style="margin-top:10px">
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })
                        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.MessageType, htmlAttributes: new { @class = "control-label" })
                        @Html.DropDownListFor(model => model.MessageType, Model.lstSelectMessageType, new { @id = "ddMessageType", @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.MessageType, "", new { @class = "text-danger", AutoPostBack = "True" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.DateRange, htmlAttributes: new { @class = "control-label" })
                        @Html.DropDownListFor(model => model.DateRange, Model.lstSelectDateRange, new { @id = "ddDateRange", @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.DateRange, "", new { @class = "text-danger", AutoPostBack = "True" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 displaydate">
                        @Html.LabelFor(model => model.CustomFromDate, htmlAttributes: new { @class = "control-label" })
                        @Html.TextBoxFor(model => model.CustomFromDate, new { type = "date", @id = "customFromDate", @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.CustomFromDate, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 displaydate" id="todate">

                        @Html.LabelFor(model => model.CustomToDate, htmlAttributes: new { @class = "control-label" })
                        @Html.TextBoxFor(model => model.CustomToDate, new { type = "date", @id = "customToDate", @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.CustomToDate, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-actions" style="margin-bottom:20px">
                    <div class="col-sm-2 text-center">
                        <p></p>
                    <input type="submit" id="btnsearch" class="btn btn-success" />
                    </div>
                </div>
            }
        </div>
    </div>
 </div>

<p class="text-right" style=" margin-top:20px">
    @Html.ActionLink("Create New", "Create")
</p>  

 <section class="row" id="emailPartial">
     <div class="SearchPanel">
         <div class="container">
             @*@Html.Partial("_EmailPartial", new List<Email>())*@
         </div>
     </div>
 </section>

局部视图：

@model IEnumerable<AllturnaCRMOperations.Models.Email>

@{
    ViewBag.Title = "View";
}

<table class="table table-hover table-responsive scrollable table-striped">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CreateDate)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CreateDate)
        </td>
        <td>
            @Html.ActionLink("Details", "Details", new { /* id=item.Name */ }) |
        </td>
    </tr>
}

</table>

控制器：

public ActionResult GetEmails(EmailSearchPanel Panel)
        {
            List<Email> lstEmails = new EmailViewModel().BuildModel();
            return PartialView("_EmailPartial",lstEmails);
        }

这是我使用 alert(form) 序列化后看到的图片。

请帮我解决这个问题。提前致谢。

Answer 1

您的第一个问题在 AJAX 调用中使用 'form' 而不是 'formData'。然后你的控制器应该得到你传递的表单值。

$('#btnsearch').click(function () {
    var formData = new FormData();
    var form = $('form').serialize();
    alert(form);
    formData.append('Panel', form);
    $.ajax({
        url: "Email/GetEmails",
        type: 'POST',
        dataType: 'html',
        data: form,
        processData: false,
        contentType: false,
        success: function (result) {
            alert(result);
            $("._EmailPartial").html(result);
        },
        error: function () {
            alert('Failed to retrieve the Emails.');
        }
    });
});

您使用局部视图的方式有点不正统，建议您多研究一下。参考：
- https://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html
- http://www.dotnetfunda.com/articles/show/2912/loading-search-result-without-page-refresh-in-aspnet-mvc-ajax

Answer 2

已解决。我的部分视图正在呈现，然后页面自动刷新。我是因为我使用的是按钮类型 = 提交，它会向服务器进行完整的回发，因此它会刷新页面并覆盖 ajax 结果。我用 type = button 更改了按钮，结果如我所料呈现。

我的 JQuery AJax 调用没有序列化表单数据和加载局部视图

My JQuery AJax call does not serialize form data and load the partial view

jquery

ajax

asp.net-mvc

ajaxform