Submit data from Dialog to controller - asp.net-mvc

Question

I have a View from which a button call a dialog Bootstrap.
Inside this dialog I render this view:
#using (Ajax.BeginForm("Create", new { #class = "form-control", id="form-create" }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "wrapperViews" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(false)
<hr />
<div class="form-horizontal">
<div id="divParamType" style="display: none;"></div>
<div class="form-group">
#Html.LabelFor(x => Model.PhaseID, htmlAttributes: new { #class = "control-label col-md-1" })
<div class="col-md-3">
#Html.DropDownListFor(x => Model.PhaseID,
new SelectList(Model.Phases, "Value", "Text"), "", new { #class = "form-control", id = "Phase" })
#Html.ValidationMessageFor(x => Model.PhaseID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => Model.ParamID, "Description", htmlAttributes: new { #class = "control-label col-md-1" })
<div class="col-md-3">
#Html.DropDownListFor(x => Model.ParamID,
new SelectList(Model.ProcessIDListParams, "Value", "Text"), "", new { #class = "form-control", id = "ProcessParam" })
#Html.ValidationMessageFor(x => Model.ParamID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group" id="forList">
#Html.LabelFor(x => Model.CodeValue, htmlAttributes: new { #class = "control-label col-md-1" })
<div class="col-md-3">
#Html.DropDownListFor(x => Model.CodeValue,
new SelectList(Model.PPvalues, "Value", "Text"), "", new { #class = "form-control", id = "PPValue" })
#Html.ValidationMessageFor(x => Model.CodeValue, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group" id="forOtherType">
#Html.LabelFor(x => Model.CodeValue, htmlAttributes: new { #class = "control-label col-md-1" })
<div class="col-md-2">
#Html.TextBoxFor(x => Model.CodeValue, new { #class = "form-control", id = "PPValTextBox" })
#Html.ValidationMessageFor(x => Model.CodeValue, "", new { #class = "text-danger" })
<div id="idTypeValue1"></div>
</div>
#Html.Label("<=", htmlAttributes: new { #class = "control-label col-md-1", id = "SecondValueLabel" })
<div class="col-md-2">
#Html.TextBoxFor(x => Model.SecondValue, new { #class = "form-control", id = "SecondValue" })
#Html.ValidationMessageFor(x => Model.SecondValue, "", new { #class = "text-danger" })
<div id="idTypeValue2"></div>
</div>
</div>
}
by calling #Html.Action("Create", "Search")
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Add Parameter</h5>
</div>
<div class="modal-body">
#Html.Action("Create", "Search")
<div id="myModalContent"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" id="bntSubmit" , name="name" class="btn btn-primary" value="Save" />
</div>
</div>
</div>
So far so good, my dialog opens and shows the view.
But when I click on Save button , my ajax request fails for I cannot pass the data even if I serialized the form. The form id is "form-create" on the View:
#using (Ajax.BeginForm("Create", new { #class = "form-control", id="form-create" }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "wrapperViews" }))
but when result from serialize() is empty.
$(document).ready(function () {
$('#bntSubmit').click(function (e) {
debugger;
e.preventDefault();
var form = $("#form-create").serialize();
debugger;
$.ajax({
type: "POST",
url: '/Search/Create',
data: form,
success: function () {
$('#myModal').modal("hide");
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
});
I tried to change id form with modal id but nothing changed.
I am struggling over this for one day and no solution yet.
Any help would be appreciated.

Answer 1

First, make sure you include the "jquery.unobtrusive-ajax.min.js" in your layout, "Ajax.Beginform" won't work without it.
If that doesn't work, try just submit the form.
By using an "Ajax.Beginform", you should just bind :
$(function () {
$('#bntSubmit').on('click', function (e) {
e.preventDefault();
$('form-create').submit();
});
});
And use "OnSuccess" event in the "AjaxOptions" object to do the rest.