Мой вызов JQuery AJax не сериализует данные формы и загружает частичное представление - PullRequest
0 голосов
/ 28 марта 2019

Я работаю над представлением ASPNET MVC, чтобы отправить некоторые критерии поиска и загрузить частичное представление, используя результат. Я делаю ajax-вызов в мой контроллер / 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);
        }

Вот изображение того, что я вижу после сериализации с использованием оповещения (форма). enter image description here

Пожалуйста, помогите мне в решении этой проблемы. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Это решено. Мой частичный вид был обработан, а затем страница обновлялась автоматически. Это произошло потому, что я использовал кнопку type = submit, которая выполняет полную обратную передачу на сервер, поэтому обновляет страницу и перезаписывает результат ajax. Я изменил кнопку с помощью кнопки type =, и результат был получен так, как я ожидал.

0 голосов
/ 29 марта 2019
  1. В первом вопросе используйте «form» вместо «formData» при вызове AJAX.Тогда ваш контроллер должен получить значения формы, которые вы передаете.

    $('#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. То, как вы использовали частичное представление, немного неортодоксально, я предлагаю вам больше изучить это.Ссылка:

...