Model undefined when passing Model from View to Controller using AJAX - asp.net-mvc

Question

When I tried to used debugger; in ajax to check if I'm able to serialize the form it say it is "undefined". I don't encounter an error but The value i input in the view does not pass to the controller. This is my reference https://stick2basic.wordpress.com/2013/04/14/how-to-pass-model-from-view-to-controller-using-jquery/
VIEW
<script type="text/javascript">
$(document).ready(function () {
$('#btnsubmit').click(function (e) {
e.preventDefault();
if ($("#OrderForm").valid()) { //if you use validation
$.ajax({
url: $("#OrderForm").attr('action'),
type: $("#OrderForm").attr('method'),
data: $("#OrderForm").serialize(),
success: function (data) {
alert("success");
}
});
}
});
});
</script>
#using (Html.BeginForm("_Order", "Account", FormMethod.Post, new { id = "OrderForm" }))
{
<div class="form-group">
<div class="col-md-3">
#Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col-md-9">
#Html.TextBoxFor(model => model.MerchantEmail, new { #Value = "abc#gmail.com",#class = "form-control" })
#Html.ValidationMessageFor(model => model.MerchantEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
</div>
</div>
}
Controller
[AllowAnonymous]
[HttpPost]
public ActionResult _Order(OrderModel model)
{
List<OrderModel> orderlist = new List<OrderModel>();
if (Session["OrderList"] != null)
{
orderlist = Session["OrderList"] as List<OrderModel>;
orderlist.Add(model);
}
Session["OrderList"] = orderlist;
return PartialView();
}
MODEL
public class OrderModel
{
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
[StringLength(35)]
public string FirstName { get; set; }
[StringLength(35)]
public string MiddleName { get; set; }
[StringLength(35)]
public string LastName { get; set; }
[StringLength(255)]
public string Address { get; set; }
[StringLength(40)]
public string Province { get; set; }
[StringLength(40)]
public string Town { get; set; }
[StringLength(13)]
public string MobileNo { get; set; }
[Required(ErrorMessage = "Please fill up Merchant Email.")]
[DataType(DataType.EmailAddress)]
public string MerchantEmail { get; set; }
[Required(ErrorMessage = "Please enter the exact amount.")]
[DataType(DataType.Currency)]
public float OrderAmount { get; set; }
public string OrderSkuCode { get; set; }
[Required(ErrorMessage = "Please fill up order details.")]
[StringLength(5000)]
public string OrderDetails { get; set; }
}

Answer 1

There are two things you are doing at the same time, you can have ajax or post the data directly to the controller.
#using (Html.BeginForm("_Order", "Account", FormMethod.Post, new { id = "OrderForm" }))
{
<div class="form-group">
<div class="col-md-3">
#Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col-md-9">
#Html.TextBoxFor(model => model.MerchantEmail, new { #Value = "abc#gmail.com",#class = "form-control" })
#Html.ValidationMessageFor(model => model.MerchantEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
</div>
</div>
}
Here you are posting the data directly to the controller (Ajax is for Asynchronous Transfer) , this will by pass the Ajax request in the script.
If you want to post it through Ajax here is the code changes you need to do
<form id="form1">
<div class="form-group">
<div class="col-md-3">
#Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col-md-9">
#Html.TextBoxFor(model => model.MerchantEmail, new { #Value = "abc#gmail.com",#class = "form-control" })
#Html.ValidationMessageFor(model => model.MerchantEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#btnsubmit').click(function (e) {
e.preventDefault();
var data = new FormData($("#form1")[0]);
if ($("#OrderForm").valid()) { //if you use validation
$.ajax({
url: '#Url.Action("_Order","Your Controller Name")',
dataType: "json",
data: data,
success: function (data) {
alert("success");
}
});
}
});
});
</script>