passing model from view to controller using ajax call? - asp.net-mvc

Question

I am making an application, in which it is required to create a lead when user enters the mobile number and tab out, the lead is created if entered mobile number is valid(with all other details on the form). But when i am passing model from view to controller the data i 'm getting null.
View
#{
ViewBag.Title = "EmailQuote";
Layout = "~/Views/Shared/Template.cshtml";
}
#model Max.VirtualSalesManager.UI.ViewModels.LeadViewModel
#{
var data = Html.Raw(Json.Encode(Model));
}
<script src="#Url.Content("~/Scripts/Common.js")" type="text/javascript"></script>
<h2>
EmailQuote</h2>
#using Acidaes.VirtualSalesManager.UI.Helpers
#using (Html.BeginForm("GenerateEQuote", "Quote", FormMethod.Post, new{id="frmEmailQuote" }))
{
#Html.MandatoryLabel("Name", false, new { style = "width: 50px; display: inline" }) #Html.FullName()
#Html.MandatoryLabel("City", false, new { style = "width: 50px; display: inline" }) #Html.DropDownListFor(m => m.CommunicationAddress.City, new SelectList(ViewBag.CityList, "Key", "Value"), "select", new { id = "ddlCity" })
#Html.MandatoryLabel("Mobile No.", false, new { style = "width: 100px; display: inline" }) #Html.TextBoxFor(m => m.MobileNumber, new { style = "width: 100px", id = "txtmobilenumber", onBlur = "createLead('"+#data+"')" })
#Html.MandatoryLabel("Email ID", false, new { style = "width: 80px; display: inline" }) #Html.TextBoxFor(m => m.EmailId, new { style = "width: 100px" })
#Html.HiddenFor(m => m.LeadId)
<input type="submit" id="btnSubmit" />
}
Js
function createLead(data) {
var number = /^[0-9]+$/;
var mobileNumber = document.getElementById('txtmobilenumber').value;
if (mobileNumber.match(number) && mobileNumber.length == 10) {
var jsondata = JSON.stringify(data);
var Parameters = "{'data':'" + ("#frmEmailQuote").serialize() + "'}";
Events.DoServerRequest('/MAXVSM/Quote/test', Parameters, GetLeadId);
}
}
DoServerRequest Function
DoServerRequest: function (url, data, funSuccess) {
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: funSuccess,
error: function () {
alert("Error in getting list");
}
});
Controller
[HttpPost]
[ActionName("test")]
public JsonResult test(LeadViewModel data)
{
LeadViewModel t = new LeadViewModel();
t.MobileNumber = data.MobileNumber;
return Json(t);
}
The data reaching fine from view to ajax function, but when the data is reaching to controller it is null.

Answer 1

Try removing contentType from your ajax call:
DoServerRequest: function (url, data, funSuccess) {
$.post({
type: "POST",
url: url,
data: data,
async: false,
dataType: "json",
success: funSuccess,
error: function () {
alert("Error in getting list");
}
});
}
The server is not expecting JSON content but application/x-www-form-urlencoded which is the default value.
This means you should also use a normal Javascript object or string as data:
if (mobileNumber.match(number) && mobileNumber.length == 10) {
Events.DoServerRequest('/MAXVSM/Quote/test', $("#frmEmailQuote").serialize(), GetLeadId);
}