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

您的第一个问题在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

此问题已解决。呈现了我的局部视图，然后页面被自动刷新。我当时是因为我使用的是按钮type = Submit，它会对服务器进行完整的回发，因此它将刷新页面并覆盖ajax结果。我将按钮的类型更改为= button，结果得到了预期的呈现。

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

2 个答案: