how to do post operation in web api by jquery ajax - asp.net-web-api

Question

hello i have a problem in implementing post operation with jquery ajax in my web api application ,problem is that my controller action method of post operation in working well but in the html page when i am using jquery ajax for calling post method it is not working my html page code is shown below
$("#btnAddSave").click(function () {
alert("hello");
var Fname = document.getElementById("txtAddFName").value;
var Lname = document.getElementById("txtAddLName").value;
var Street = document.getElementById("txtAddStreet").value;
var Landmark = document.getElementById("txtAddLandmark").value;
var City = document.getElementById("txtAddCity").value;
var State = document.getElementById("txtAddState").value;
var Pincode = document.getElementById("txtAddPincode").value;
var Mobile = document.getElementById("txtAddMobile").value;
var AltMobile = document.getElementById("txtAddAltMobile").value;
var Email = document.getElementById("txtAddEmail").value;
alert(City);
var InData = {
"FirstName": Fname, "LastName": Lname, "Street": Street, "Landmark": Landmark, "City": City, "State": State, "Postalcode": Pincode, "Mobile": Mobile, "AltMobile": AltMobile, "UserId": "User102", "AltEmail": "null", "Extra2": "null", "Extra3": "null", "Extra4": "null", "Extra5": "null", "EmailOrMobile": Email, "UserName": "Null","Id":"Null" ,"Status": "Null"
};
alert("aftrJsonobject");
alert(Fname);
$.ajax({
type: "POST",
url: "/api/tblProducts/AddAltAddress",
data: InData,
contentType: "application/json; charset=utf-8",
dataType: "JSON",
processData: true,
success: function (data) {
alert("success...");
}
});
});
and my api controller code which is working well as i tested in fiddler is shown below
[HttpPost]
[Route("api/tblProducts/AddAltAddress", Name = "GetAltAddress")]
public IHttpActionResult InsertAltAddress(tblUserAltAdd AltAdd)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
var AltAddress = db.InsertAltAdd1(AltAdd.FirstName, AltAdd.LastName, AltAdd.Street, AltAdd.Landmark, AltAdd.City, AltAdd.State,AltAdd.PostalCode, AltAdd.Mobile, AltAdd.AltMobile, AltAdd.UserId, AltAdd.AltEmail, AltAdd.Extra2, AltAdd.Extra3, AltAdd.Extra4, AltAdd.Extra5, AltAdd.EmailOrMobile, AltAdd.UserName, AltAdd.Id, AltAdd.Status);
return CreatedAtRoute("GetAltAddress", new { id = AltAdd.UserId }, AltAdd);
}
please help me in implementing it

Answer 1

try this-
$("#btnAddSave").click(function () {
alert("hello");
var Fname = document.getElementById("txtAddFName").value;
var Lname = document.getElementById("txtAddLName").value;
var Street = document.getElementById("txtAddStreet").value;
var Landmark = document.getElementById("txtAddLandmark").value;
var City = document.getElementById("txtAddCity").value;
var State = document.getElementById("txtAddState").value;
var Pincode = document.getElementById("txtAddPincode").value;
var Mobile = document.getElementById("txtAddMobile").value;
var AltMobile = document.getElementById("txtAddAltMobile").value;
var Email = document.getElementById("txtAddEmail").value;
alert(City);
var InData = {
"FirstName": Fname, "LastName": Lname, "Street": Street, "Landmark": Landmark, "City": City, "State": State, "Postalcode": Pincode, "Mobile": Mobile, "AltMobile": AltMobile, "UserId": "User102", "AltEmail": "null", "Extra2": "null", "Extra3": "null", "Extra4": "null", "Extra5": "null", "EmailOrMobile": Email, "UserName": "Null","Id":"Null" ,"Status": "Null"
};
alert("aftrJsonobject");
alert(Fname);
$.ajax({
type: "POST",
url: "/api/tblProducts/AddAltAddress",
data: JSON.stringfy(InData),
contentType: "application/json; charset=utf-8",
dataType: "JSON",
processData: true,
success: function (data) {
alert("success...");
}
});
});