jQuery.ajax post JSON sent as concatenated string

jQuery.ajax post JSON sent as concatenated string - javascript

i am using a common method for all my $.ajax.post operations, and it is encoding the payload differently per use.
for example, if
data: someJSObject
it gets posted as JSON.
however, if i define the object (i also tried putting properties in 'quotes': val)
data: { mgrID: 0, strId: 0, strName: 'Bowie' }
this gets converted to a url encoded string
mgrID=250411&strId=1006575&strName=Bowie
my post function
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: url,
data: data,
in chrome console, i can see the object recognized as valid json before post.

You are confusing javascript objects and json. If you want to send json, you must give jquery json.
data: { mgrID: 0, strId: 0, strName: 'Bowie' } is not json.
This is json:
data: '{ "mgrID": 0, "strId": 0, "strName": "Bowie" }'
Note how now i'm assigning a string to data rather than an object.
You can convert an object into json using JSON.stringify(theobject)
data: JSON.stringify({ mgrID: 0, strId: 0, strName: 'Bowie' })

try to stringify it like this:
data: JSON.stringify(data)

Looking at your previous posts I assume that you have a ASP.NET / C# background and hence this answer.
In ASP.NET we have something called auto-serialization.
Suppose if you have a class like this
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
}
and you have a web-service, controller or whatever that has a method like this
public bool AddPerson(Person person)
You could pass the JavaScript object serialized into a json string like this
var DTO = {
person: {
FirstName: "Hugh",
LastName: "Jackman",
Age: 10
}
};
$.ajax({
type: 'POST',
contentType: 'application/json',
dataType: 'json',
url: url,
data: JSON.stringify(DTO)
}).done(function () {
console.log("I passed an object");
});
And when you go to the server-side method AddPerson and put a break-point on it.
Then you will see that the json string has been automatically de-serialized as an object of the Person class.
This way you can also pass an array of persons which you can retrieve as List<Person>
P.S: JSON.stringify is present in all modern browsers. For older ones, use this fallback.
Update: If the server-side method accepts three parameters like this
public bool AddPerson(string firstName, string lastName, int age)
Then change your DTO like this
var DTO = {
firstName: "Hugh",
lastName: "Jackman",
age: 10
};
and use the same AJAX call.
Please read this if you have time. Using complex types to make calling services less… complex

to post "as json" try
data: (tempobj={my: "data",is: "json"})
or
data: {mypost:{my: "data",is: "json"} }
in the second case you can look for the mypost var in your server code.

Related

JSON Object - JavaScript, C#, MVC

I have this for that fills an array, where the cont came from View
function GenerateJSON(cont) {
var songs= [];
for (var i = 0; i <= cont; i++) {
songs[i] = {
id: i,
genre: $(".genre" + i).val(),
song: $(".song" + i).val()
}
}
$.ajax({
url: "Generate",
type: 'POST',
dataType: "json",
data: { songs: JSON.stringify(songs) },
success: function (data) {
}
})
}
On Controller, i got only one block music
example:
songs= [{"id":0,"genre":"","song":"","id":1,"genre":"","song":"","id":2,"genre":"","song":""}]
I want this:
songs=[{"id":0,"genre":"","song":""},{"id":1,"genre":"","song":""},{id":2,"genre":"","song":""}]
Controller
public JsonResult Generate(string[] songs)
{}

Using a string array as the parameter does not make sense to me. Now you have to make client side code to build some sophisticated string and in server side you have to parse it to get each item's property values.
IMHO, The clean approach is to use a view model and take advantage of MVC model binding. Start by creating a view model to represent your data.
public class SongVm
{
public int Id { set; get; }
public string Genre { set; get; }
public string Song { set; get; }
}
Now use this as the parameter of your action method. Since you want to send a collection of your objects, use List<SongVm> as your parameter.
[HttpPost]
public ActionResult Gerar(List<SongVm> songs)
{
// Simply returning the data with a message property as well
return Json(new { messge ="success", data = songs });
}
Now from the client side code, send the JSON string version of your array, while specifying application/json as the value of contentType property of the option we are passing to the $.ajax method.
var songs = [];
for (var i = 0; i <= cont; i++) {
songs[i] = {
id: i,
genre : "test genre" + i,
song : "test song" + i
};
}
$.ajax({
url: "/Home/Gerar",
type: 'POST',
contentType: "application/json",
data: JSON.stringify(songs),
success: function (data) {
console.log(data);
},
error: function (a, b, c) {
console.log(c);
}
})
Now $.ajax will add the request header Content-Type to the call with the value application/json. As part of model binding, the default model binder will read this request header value and then decide to read the data from the request body(Request payload)
I would also recommend leveraging the Url helper methods like Url.Action to generate the correct relative path to the action method.

How to pass a javascript object to a C# MVC 4 controller

In MVC4, how do you pass a javascript object to a C# controller in AJAX?
Finally I tried this but it did not work.
Javascript Client side:
var myData = {Propr1: '', Propr2: ''};
$.ajax({
type: 'POST',
data: JSON.stringify(myData),
url: '/Home/SubmitMyData',
contentType: 'application/json',
dataType: 'json',
success: alert('Youhou'),
error: alert('not good')
});
C# Server side method:
public ActionResult SubmitMyData(MyParamModel myParam)
{
// Do my stuff here with my parameter
return View();
}
public class MyParamModel
{
string Prop1 { get; set; }
string Prop2 { get; set; }
}
My parameter is always null. I tried to change the contentType but it still not work.
Where are my mistakes? I found some posts but I did not find what I did wrong.
Thanks a lot.

Make sure the property names match between the javascript and the C# model. In your question you had Propr1 and Propr2 for the javascript object, but in the C# model you had Prop1 and Prop2 (missing the "r").
Do not stringify the data before sending it, and do not set dataType to json. MVC can parse just fine with a collection of post parameters without the json serialization in your code.
Omit the contentType, it is not necessary. WebAPI should autodetect this. You can leave it, but it's extraneous.
Make sure the model properties are public.
Javascript Client side:
var myData = {Prop1: '', Prop2: ''}; // #1
$.ajax({
type: 'POST',
data: myData, // #2
url: '/Home/SubmitMyData',
//contentType: 'application/json', #3
//dataType: 'json', #2
success: alert('Youhou'),
error: alert('not good')
});
C# Server side method:
public ActionResult SubmitMyData(MyParamModel myParam)
{
// Do my stuff here with my parameter
return View();
}
public class MyParamModel // #4
{
public string Prop1 { get; set; }
public string Prop2 { get; set; }
}

The value you pass for the data property should be an object, not a string:
data: myData,
the property names need to match:
var myData = { Prop1: '', Prop2: ''};
you need to use the [FromBody] attribute on your parameter value:
public ActionResult SubmitMyData([FromBody] MyParamModel myParam)
and the properties on your model type need to be public:
public class MyParamModel
{
public string Prop1 { get; set; }
public string Prop2 { get; set; }
}

Why is my json object empty in my ASP API?

I'm trying to test my asp api.
One of the endpoints needs to take a json object from a browser. To test this I'm placing a json object into a text field and then making an ajax call to my api. When the api is hit, the json object is always null.
I've checked this post: how to pass json post data to web api method as object and that did not resolve my issue.
Here is my object:
{ "userName": "063bcdf2-36fd-4b8c-a5af-808da63744f6",
"password" : "Password"
}
Here is my ajax call:
var submission = function () {
var url = urlBase + "/api/Submission/";
var testdata = $("input[name=submission]").val();
alert(testdata);
$.ajax(url, {
type: "POST",
data: JSON.parse(testdata),
contentType: 'application/x-www-form-urlencoded'
}).always(showResponse)
return false;
};
And here is my api:
[HttpPost]
[ResponseType(typeof(SubmissionOutputModel))]
public IHttpActionResult POST([FromBody]SubmissionInputModel submission )
{
if (ModelState.IsValid)
{
SubmissionService service = new SubmissionService();
return Json(service.Submit(submission));
}
else
{
return BadRequest("Invalid Model State");
}
}
SubmissionInputModel:
public class SubmissionInputModel
{
[Required]
public string userName { get; set; }
[Required]
public string password { get; set; }
}
The alert in the ajax shows me that the data is being sent and in debug mode, the api is getting hit however the submission object is not getting set to the data being sent from the ajax call.
If anyone can help, it would be greatly appreciated!

I think you need to JSON.stringify instead of parse, since parse if used the other way around.
JSON.parse takes a string and converts it to a JSON object.
Try to stringify your testdata
$.ajax(url, {
type: "POST",
data: JSON.Stringify(testdata),
contentType: 'application/x-www-form-urlencoded'
}).always(showResponse)
return false;
};
If that doesn't work, leave out the contentType from the ajax call, or write contentType:"application/json" instead.
And also post your SubmissionInputModel. Could be some naming that is wrong there :)

What does the "testdata" look like? Is it already a string in json format?
1.The JSON.Parse parses a string as JSON only, for example:
JSON.parse('{}'); // {}
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
2.The content-type should application/json in your case, and the value you specified now is default value:
contentType: 'application/json'
3.At the mean time, as your action already marked as [POST] so the ModelBinder will try to bind your model from the request body, so it is not necessary to specify as [FromBody].

Okay, I found my happy place!
The following ajax call finally got the data through to the API:
var submission = function () {
var url = urlBase + "/api/Submission/";
var testdata = $("input[name=submission]").val();
alert(testdata);
$.ajax(url, {
type: "POST",
data: testdata,
contentType: 'application/json'
}).always(showResponse)
return false;
};
Notice that there is no JSON method on the data in the call and the contentType is 'application/json'.
Thank you everyone for your help. I hope this helps the next poor soul that runs into this problem!

How to pass json POST data to Web API method as an object?

ASP.NET MVC4 Web API application defines post method to save customer.
Customer is passed in json format in POST request body.
Customer parameter in post method contains null values for properties.
How to fix this so that posted data will passed as customer object ?
If possible Content-Type: application/x-www-form-urlencoded should used since I dont know how to change it in javascript method which posts form.
Controller:
public class CustomersController : ApiController {
public object Post([FromBody] Customer customer)
{
return Request.CreateResponse(HttpStatusCode.OK,
new
{
customer = customer
});
}
}
}
public class Customer
{
public string company_name { get; set; }
public string contact_name { get; set; }
}
Request:
POST http://localhost:52216/api/customers HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
{"contact_name":"sdfsd","company_name":"ssssd"}

EDIT : 31/10/2017
The same code/approach will work for Asp.Net Core 2.0 as well. The major difference is, In asp.net core, both web api controllers and Mvc controllers are merged together to single controller model. So your return type might be IActionResult or one of it's implementation (Ex :OkObjectResult)
Use
contentType:"application/json"
You need to use JSON.stringify method to convert it to JSON string when you send it,
And the model binder will bind the json data to your class object.
The below code will work fine (tested)
$(function () {
var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
type: "POST",
data :JSON.stringify(customer),
url: "api/Customer",
contentType: "application/json"
});
});
Result
contentType property tells the server that we are sending the data in JSON format. Since we sent a JSON data structure,model binding will happen properly.
If you inspect the ajax request's headers, you can see that the Content-Type value is set as application/json.
If you do not specify contentType explicitly, It will use the default content type which is application/x-www-form-urlencoded;
Edit on Nov 2015 to address other possible issues raised in comments
Posting a complex object
Let's say you have a complex view model class as your web api action method parameter like this
public class CreateUserViewModel
{
public int Id {set;get;}
public string Name {set;get;}
public List<TagViewModel> Tags {set;get;}
}
public class TagViewModel
{
public int Id {set;get;}
public string Code {set;get;}
}
and your web api end point is like
public class ProductController : Controller
{
[HttpPost]
public CreateUserViewModel Save([FromBody] CreateUserViewModel m)
{
// I am just returning the posted model as it is.
// You may do other stuff and return different response.
// Ex : missileService.LaunchMissile(m);
return m;
}
}
At the time of this writing, ASP.NET MVC 6 is the latest stable version and in MVC6, Both Web api controllers and MVC controllers are inheriting from Microsoft.AspNet.Mvc.Controller base class.
To send data to the method from client side, the below code should work fine
//Build an object which matches the structure of our view model class
var model = {
Name: "Shyju",
Id: 123,
Tags: [{ Id: 12, Code: "C" }, { Id: 33, Code: "Swift" }]
};
$.ajax({
type: "POST",
data: JSON.stringify(model),
url: "../product/save",
contentType: "application/json"
}).done(function(res) {
console.log('res', res);
// Do something with the result :)
});
Model binding works for some properties, but not all ! Why ?
If you do not decorate the web api method parameter with [FromBody] attribute
[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
return m;
}
And send the model(raw javascript object, not in JSON format) without specifying the contentType property value
$.ajax({
type: "POST",
data: model,
url: "../product/save"
}).done(function (res) {
console.log('res', res);
});
Model binding will work for the flat properties on the model, not the properties where the type is complex/another type. In our case, Id and Name properties will be properly bound to the parameter m, But the Tags property will be an empty list.
The same problem will occur if you are using the short version, $.post which will use the default Content-Type when sending the request.
$.post("../product/save", model, function (res) {
//res contains the markup returned by the partial view
console.log('res', res);
});

Working with POST in webapi can be tricky!
Would like to add to the already correct answer..
Will focus specifically on POST as dealing with GET is trivial. I don't think many would be searching around for resolving an issue with GET with webapis. Anyways..
If your question is - In MVC Web Api, how to- - Use custom action method names other than the generic HTTP verbs? - Perform multiple posts? - Post multiple simple types? - Post complex types via jQuery?
Then the following solutions may help:
First, to use Custom Action Methods in Web API, add a web api route as:
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "ActionApi",
routeTemplate: "api/{controller}/{action}");
}
And then you may create action methods like:
[HttpPost]
public string TestMethod([FromBody]string value)
{
return "Hello from http post web api controller: " + value;
}
Now, fire the following jQuery from your browser console
$.ajax({
type: 'POST',
url: 'http://localhost:33649/api/TestApi/TestMethod',
data: {'':'hello'},
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
success: function(data){ console.log(data) }
});
Second, to perform multiple posts, It is simple, create multiple action methods and decorate with the [HttpPost] attrib. Use the [ActionName("MyAction")] to assign custom names, etc. Will come to jQuery in the fourth point below
Third, First of all, posting multiple SIMPLE types in a single action is not possible.
Moreover, there is a special format to post even a single simple type (apart from passing the parameter in the query string or REST style).
This was the point that had me banging my head with Rest Clients (like Fiddler and Chrome's Advanced REST client extension) and hunting around the web for almost 5 hours when eventually, the following URL proved to be of help. Will quote the relevant content for the link might turn dead!
Content-Type: application/x-www-form-urlencoded
in the request header and add a = before the JSON statement:
={"Name":"Turbo Tina","Email":"na#Turbo.Tina"}
PS: Noticed the peculiar syntax?
http://forums.asp.net/t/1883467.aspx?The+received+value+is+null+when+I+try+to+Post+to+my+Web+Api
Anyways, let us get over that story. Moving on:
Fourth, posting complex types via jQuery, ofcourse, $.ajax() is going to promptly come in the role:
Let us say the action method accepts a Person object which has an id and a name. So, from javascript:
var person = { PersonId:1, Name:"James" }
$.ajax({
type: 'POST',
url: 'http://mydomain/api/TestApi/TestMethod',
data: JSON.stringify(person),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data){ console.log(data) }
});
And the action will look like:
[HttpPost]
public string TestMethod(Person person)
{
return "Hello from http post web api controller: " + person.Name;
}
All of the above, worked for me!! Cheers!

I've just been playing with this and discovered a rather odd result. Say you have public properties on your class in C# like this:
public class Customer
{
public string contact_name;
public string company_name;
}
then you must do the JSON.stringify trick as suggested by Shyju and call it like this:
var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
type: "POST",
data :JSON.stringify(customer),
url: "api/Customer",
contentType: "application/json"
});
However, if you define getters and setters on your class like this:
public class Customer
{
public string contact_name { get; set; }
public string company_name { get; set; }
}
then you can call it much more simply:
$.ajax({
type: "POST",
data :customer,
url: "api/Customer"
});
This uses the HTTP header:
Content-Type:application/x-www-form-urlencoded
I'm not quite sure what's happening here but it looks like a bug (feature?) in the framework. Presumably the different binding methods are calling different "adapters", and while the adapter for application/json one works with public properties, the one for form encoded data doesn't.
I have no idea which would be considered best practice though.

Use the JSON.stringify() to get the string in JSON format, ensure that while making the AJAX call you pass below mentioned attributes:
contentType: 'application/json'
Below is the give jquery code to make ajax post call to asp.net web api:
var product =
JSON.stringify({
productGroup: "Fablet",
productId: 1,
productName: "Lumia 1525 64 GB",
sellingPrice: 700
});
$.ajax({
URL: 'http://localhost/api/Products',
type: 'POST',
contentType: 'application/json',
data: product,
success: function (data, status, xhr) {
alert('Success!');
},
error: function (xhr, status, error) {
alert('Update Error occurred - ' + error);
}
});

Make sure that your WebAPI service is expecting a strongly typed object with a structure that matches the JSON that you are passing. And make sure that you stringify the JSON that you are POSTing.
Here is my JavaScript (using AngluarJS):
$scope.updateUserActivity = function (_objuserActivity) {
$http
({
method: 'post',
url: 'your url here',
headers: { 'Content-Type': 'application/json'},
data: JSON.stringify(_objuserActivity)
})
.then(function (response)
{
alert("success");
})
.catch(function (response)
{
alert("failure");
})
.finally(function ()
{
});
And here is my WebAPI Controller:
[HttpPost]
[AcceptVerbs("POST")]
public string POSTMe([FromBody]Models.UserActivity _activity)
{
return "hello";
}

Following code to return data in the json format ,instead of the xml -Web API 2 :-
Put following line in the Global.asax file
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

#model MVCClient.Models.ProductDetails
#{
ViewBag.Title = "ProductDetails";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Save").click(function () {
var ProductDetails = new Object();
ProductDetails.ProductName = $("#txt_productName").val();
ProductDetails.ProductDetail = $("#txt_desc").val();
ProductDetails.Price= $("#txt_price").val();
$.ajax({
url: "http://localhost:24481/api/Product/addProduct",
type: "Post",
dataType:'JSON',
data:ProductDetails,
success: function (data) {
alert('Updated Successfully');
//window.location.href = "../Index";
},
error: function (msg) { alert(msg); }
});
});
});
</script>
<h2>ProductDetails</h2>
<form id="form1" method="post">
<fieldset>
<legend>ProductDetails</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ProductName)
</div>
<div class="editor-field">
<input id="txt_productName" type="text" name="fname">
#Html.ValidationMessageFor(model => model.ProductName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ProductDetail)
</div>
<div class="editor-field">
<input id="txt_desc" type="text" name="fname">
#Html.ValidationMessageFor(model => model.ProductDetail)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
<input id="txt_price" type="text" name="fname">
#Html.ValidationMessageFor(model => model.Price)
</div>
<p>
<input id="Save" type="button" value="Create" />
</p>
</fieldset>
</form>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
</form>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

Microsoft gave a good example of doing this:
https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-1
First validate the request
if (ModelState.IsValid)
and than use the serialized data.
Content = new StringContent(update.Status)
Here 'Status' is a field in the complex type. Serializing is done by .NET, no need to worry about that.

1)In your client side you can send you http.post request in string like below
var IndexInfo = JSON.stringify(this.scope.IndexTree);
this.$http.post('../../../api/EvaluationProcess/InsertEvaluationProcessInputType', "'" + IndexInfo + "'" ).then((response: any) => {}
2)Then in your web api controller you can deserialize it
public ApiResponce InsertEvaluationProcessInputType([FromBody]string IndexInfo)
{
var des = (ApiReceivedListOfObjects<TempDistributedIndex>)Newtonsoft.Json.JsonConvert.DeserializeObject(DecryptedProcessInfo, typeof(ApiReceivedListOfObjects<TempDistributedIndex>));}
3)Your ApiReceivedListOfObjects class should be like below
public class ApiReceivedListOfObjects<T>
{
public List<T> element { get; set; }
}
4)make sure that your serialized string (IndexInfo here) becomes like below structure before JsonConvert.DeserializeObject command in step 2
var resp = #"
{
""element"": [
{
""A"": ""A Jones"",
""B"": ""500015763""
},
{
""A"": ""B Smith"",
""B"": ""504986213""
},
{
""A"": ""C Brown"",
""B"": ""509034361""
}
]
}";

Jquery ajax post to MVC2 action

I'm using the following script to post to and endpoint, it's hitting the breakpoint on the server so I know the routing is correct.
$(document).ready(function() {
var o = new Object();
o.message = 'Hi from the page';
$.ajax({
type: 'POST',
contentType: 'application/json;',
data: JSON.stringify(o),
dataType: 'json',
url: 'home/PingBack',
success: function(result) {
alert(result.success);
}
});
});
The endpoint on the server looks like this.
public JsonResult PingBack(MHolder message)
{
return Json(new { success = "steve"});
}
and the Model looks like this.
public class MHolder
{
public string message { get; set; }
}
I'm sure that in the past the values have been automatically bound to the model, but I can't seem to get anything to be bound atm! Even if I just pass the value as a string, I'm sure it's something silly that I'm missing any ideas?

A few things to notice. You are sending the request as a JSON string (contentType: 'application/json' and JSON.stringify(o)) while on the server you are expecting an object of type MHolder. The default model binder won't do this transformation. You will need to either write a custom model binder capable of deserializing JSON back to an MHolder instance or send the request as key=value pairs (do not stringify):
var o = new Object();
o.message = 'Hi from the page';
$.ajax({
type: 'POST',
data: o,
dataType: 'json',
url: 'home/PingBack',
success: function (result) {
alert(result.success);
}
});

The code seems OK to me, at first glance.
try using...
data : {message : "Hi from the page."},
...to see if this causes the MHolder instance to be populated.
Also, use something like Fiddler to capture your requests and allow you to see exactly what is being posted.

Develop Reference

JavaScript is the programming language of the Web.

jQuery.ajax post JSON sent as concatenated string - javascript

try to stringify it like this: data: JSON.stringify(data)

to post "as json" try data: (tempobj={my: "data",is: "json"}) or data: {mypost:{my: "data",is: "json"} } in the second case you can look for the mypost var in your server code.

Related

JSON Object - JavaScript, C#, MVC

How to pass a javascript object to a C# MVC 4 controller

Why is my json object empty in my ASP API?

How to pass json POST data to Web API method as an object?

Jquery ajax post to MVC2 action

Categories

Resources