我的 JQuery AJax 调用不会序列化表单数据并加载部分视图

Question

我正在使用 ASPNET MVC 视图提交一些搜索条件并使用结果加载部分视图。我正在对我的控制器/操作进行 ajax 调用并加载部分视图。当我序列化表单时，序列化的对象应该被发送到我的操作方法，但这不起作用。我也返回部分视图，但它不呈现部分视图的 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

解决了。我的部分视图正在呈现，然后页面会自动刷新。我是因为我使用的是 button type= submit，它对服务器进行了完整的回发，所以它刷新了页面并覆盖了 ajax 结果。我用 type = button 更改了按钮，结果按预期呈现。

Answer 2

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.');
           }
       });
   });
   

2. 您使用局部视图的方式有点不正统，我建议您对此进行更多研究。 参考：

   • 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