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

I am working on an ASPNET MVC view to submit some search criteria and load a partial view using the result. I am making an ajax call to my controller/Action and load the partial view. When I serialize the form, the serialized object should be sent to my action method, but this does not work. Also I am returning the partial view, but it does not render the html of the partial view.

Please see the code below and suggest anything that's incorrect or missing here.

Here is the script:

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

And here are the main and partial View:

@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>

Partial view:

@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>

And the controller:

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

Here is pic of what I see after serializing using alert(form).

Please help me in solving this issue. Thanks in advance.

Solution

This is solved. My partial view was being rendered and then the page was getting refreshed automatically. I was because I was using button type= submit, which does a full postback to the server, so it refreshes the page and overrides the ajax result. I changed the button with type = button and the result got rendered as I was expecting.