This has been asked before by others, but I have not been able to use their answers.
I am trying to sending some data by doing the following:
function addForumPost() {
var title = jQuery('#forumTitle').val();
var message = htmlEncode(jQuery('#message').htmlarea("toHtmlString"));
var tagNames = addTags();
var dataPost = $.toJSON({ title: 'testingsadf', message: message, tagNames: tagNames });
jQuery.ajax({
type: "POST",
url: "/Create",
data: dataPost,
dataType: "json",
success: function (result) {
}
});
}
I have checked, and doubled checked that the input contains data, but I only receive the data from the message parameter in my controller. The other two values are null. As you can see in the the example above, I have even assigned some static text to the title parameter, but I still only receive data for the message parameter.
The controller looks like this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(string title, string message, List<string> tagNames)
{
....
}
Your error is very simple. If you have an action which returns JsonResult then it means not that you have to send also JSON encoded input parameters to the method. Just remove the usage of $.toJSON() and use the object as a value of data parameter of jQuery.ajax (see the answer of Darin for example).
If you call ASMX Web Service instead of ASP.NET MVC action you have to use contentType: "application/json; charset=utf-8" and convert the values of all web-method parameters to JSON but in a little other way (see How do I build a JSON object to send to an AJAX WebService?). But ASP.NET MVC hat no such requirement. MVC converts the input parameters which you send with respect of Parse method (int.Parse, DateTime.Parse and so on) and not deserialize from JSON. So if you search for code examples look exactly which technology are used on the backend: ASP.NET MVC, ASMX web serveces or WFC.
Try setting the traditional parameter starting from jQuery 1.4. This works for me:
var title = 'title';
var message = 'message';
var tagNames = ['tag1', 'tag2'];
jQuery.ajax({
type: 'POST',
url: '/Home/Create',
data: { title: title, message: message, tagNames: tagNames },
dataType: 'json',
traditional: true,
success: function (result) {
}
});
With this action:
[HttpPost]
public ActionResult Create(
string title,
string message,
IEnumerable<string> tagNames
)
{
return Json(new
{
Title = title,
Message = message,
TagNames = tagNames
});
}
You don't have to post json for the type of action you described.
You don't have to manually assemble the fields into a map. Use .serializeArray()
var postData = $('.myform').serializeArray()
Related
Im having a very bad time triying to figure out this problem, I have a web API made in net core 6 with Entity Framework, in this web api I have to consume a third party API. If a try to make a POST request directly the Swagger UI it works perfectly:
POST in Swagger
HOWEVER, if i made a post request in javascript using fetch it return a 400 error, that to be honest doesn't say much:
400 error response
I know there is no missing data in my post request, I checked a lot, in fact there is no field call "data".
Here is the code to make a fetch in the frontend:
return fetch(apiURL, {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: JSON.stringify(data)
})
.then(response => response.json())
Here is the post method in net core
[HttpPost]
public async Task<string> PostProductAsync(string data)
{
HttpResponseMessage response = await _client.PostAsync(path, new StringContent(data, Encoding.UTF8, "application/json"));
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return json;
}
I'm a bit confused. What could i be doing wrong.
UPDATE
I followed each instruction in the answers section, and I can say that it makes a lot of sense to put [FromBody] in the POST method since in the fetch method I am sending the data in the body.
However this led me to a new parsing error: parsing error after POST request
I have been searching in other forums about this error, it seems that what is recommended in this case is to make a class Unexpected character encountered while parsing value: . Path '', line 1, position 1
Now, the problem that i have with this approach its that i have quite a big json to post, witch means that i will have to create a lot of classes to make this possible. Its there any way to this without creating a class?
So far i tried the following changes in the POST method:
Adding [FromBody]
[HttpPost]
public async Task<string> PostProductAsync([FromBody] string data)
{
HttpResponseMessage response = await _client.PostAsync(path, new StringContent(data, Encoding.UTF8, "application/json"));
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return json;
}
This one leads to the parsing error mentioned before.
Adding [FromBody] and changing string to object
[HttpPost]
public async Task<string> PostProductAsync([FromBody] object data)
{
HttpResponseMessage response = await _client.PostAsync(path, new StringContent(data.ToString(), Encoding.UTF8, "application/json"));
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return json;
}
This one leads to a non valid JSON is not a valid JSON error
Your Swagger UI is sending your data as a Query parameter, but you are trying to post it through body in your fetch. They are two different methods of post. I recommend you use body only.
Change your controller method to use the [FromBody] parameter attribute:
PostProductAsync([FromBody] string data)
More information from https://learn.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api#using-frombody
Defaults for a string, in your case:
If the parameter is a "simple" type, Web API tries to get the value from the URI. Simple types include the .NET primitive types (int, bool, double, and so forth), plus TimeSpan, DateTime, Guid, decimal, and string, plus any type with a type converter that can convert from a string. (More about type converters later.)
So the default behavior is what Swagger is currently using.
Since you want to pass json type data,you need to use 'Content-Type': 'application/json' in fetch,and then use [FromBody]in action.
fetch:
return fetch(apiURL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
action:
[HttpPost]
public async Task<string> PostProductAsync([FromBody]string data)
{
HttpResponseMessage response = await _client.PostAsync(path, new StringContent(data, Encoding.UTF8, "application/json"));
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return json;
}
In your case, you can bind model in two ways.
Simple type model binding approach
Since you are accepting simple type string value in controller, you can use 'Content-Type': 'application/x-www-form-urlencoded' in fetch and you can pass parameter data in the URL as following:
At fetch:
let apiURL = `https://localhos:8080/Test/data`;
return fetch(apiURL, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: null
}).then(response => response.json())
Complex type model binding approach
Let's assume you're now posting complex object type data. To post data from request body Content-Type should be application/json. And add [FromBody] in the action to define the location to get data from request. Here's the example code snippet.
At fetch:
return fetch(apiURL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}).then(response => response.json())
At controller:
[HttpPost]
public async Task<string> PostProductAsync([FromBody]string data)
{
HttpResponseMessage response = await _client.PostAsync(path, new StringContent(data, Encoding.UTF8, "application/json"));
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return json;
}
On a side note, please avoid using text/plain as Content-Type to avoid security issues.
Hope this helps you and here's for your further reference for model binding in ASP.NET Core.
I am trying to send a POST request from my TornadoFX application to my nodejs server.
That's how i send my request to the server:
val api: Rest by inject()
api.baseURI = "http://localhost:5000/"
api.post("api/register", userModel) {
it.addHeader("Content-Type", "application/x-www-form-urlencoded")
}
My UserModel looks like this:
class UserModel : JsonModel {
val nameProperty = SimpleStringProperty("")
var name by nameProperty
val emailProperty = SimpleStringProperty("")
var email by emailProperty
override fun toJSON(json: JsonBuilder) {
with(json) {
add("name", name)
add("email", email)
}
}
}
Printing the request body on my node server i get following:
[Object: null prototype] {
'{"name":"Test","email":"test#test.org"}': ''
}
When i send a request via Postman i get the following body:
[Object: null prototype] {
name: 'Test',
email: 'test#test.org'
}
And that's what i'm trying to produce with TornadoFX without success.
I am grateful for any help!
You are correctly setting the Content-Type header, but you're pushing a JsonModel as your data, and consequently the framework will convert it to a JSON structure by calling toJSON() on it. The application/x-www-form-urlencoded content type expects an URL encoded piece of data, so you need to convert your data into an url encoded string. I suggest adding a function to your domain model like this:
fun toURLEncoded() =
"name=${name.urlEncoded}&email=${email.urlEncoded}".byteInputStream(StandardCharsets.UTF_8)
This example uses an extension function called urlEncoded to avoid clutter. You can define that extension function like this for example:
fun Any.urlEncoded(): String = URLEncoder.encode(toString(), "UTF-8")
Now you just have to call api.post("api/register", userModel.toURLEncoded()) and you should be good to go.
In my Rest server, i can't read the data contained in the HTTP Message Body when the call comme from script writing in Dart.
When calling the same webservice with ajax, there is no problem. In both case the data send with the URL (pcParamUrl=yopla) can be read in the server side.
i think the problem come from "processData: false" in ajax, i don't know how to set this key in HttpRequest Dart object.
I am trying to convert this ajax call (javascript) :
var url = "http://127.0.0.1:8980/TestDartService/rest/TestDartService/Test?pcParamUrl=yopla";
$.ajax({url: url,
type: "POST",
processData: false,
contentType: "application/json",
data: JSON.stringify({ request: {pcParamBody: "yepYep"} }),
success: function(data, status) { alert(data.response.pcRetour); },
error: function(status) { alert("erreur"); }
});
to this one using Dart:
HttpRequest request = new HttpRequest();
request.onReadyStateChange.listen((_) {
if (request.readyState == HttpRequest.DONE && request.status == 200 || request.status == 0)) {
print(request.responseText);
}
});
var url = "http://127.0.0.1:8980/TestDartService/rest/TestDartService/Test?pcParamUrl=yopla";
request.open("POST", url, async: false);
request.setRequestHeader("content-Type", "application/json");
String jsonData = JSON.encode('{ request: { pcParamBody: "yepYep" } }'); // etc...
request.send(jsonData);
thanks for your help and sorry for my bad english
(moved from the Question:)
The problem is the format of the data being passed to JSON.encode; it should be an object; or you could skip the encoding altogether:
String jsonData = JSON.encode('{request: {pcParamBody: "yepYep"}}'); // BAD
String jsonData = JSON.encode({"request": {"pcParamBody": "yepYep"}}'); // GOOD
String jsonData = '{request: {pcParamBody: "yepYep"}}'; // ALSO GOOD
I have a partial view with this jquery script:
$("#btnGetEmpInfo").click(function () {
var selectedItem = $('#EmployeeId').val();
var focusItem = $('#EmployeeId')
alert("Starting");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "<%= Url.Action("getEmpInfo", "NewEmployee")%>?sData=" + selectedItem,
data: "{}",
success: function(data) {
if (data.length > 0) {
alert("Yeah!");
} else {
alert("No data returned!");
}
}
});
alert("Back!");
});
Then in my controller I have:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult getEmpInfo(string sData)
{
return new JsonResult { Data = "test" };
}
I can breakpoint in the controller and it is hitting, but the only "Alerts" I get are the "Starting" and "Back". Why would the data not be returned or at least hit saying no data returned?
Thanks in advance for any and all help.
Geo...
You probably might want to improve this ajax call like this:
$.ajax({
type: 'GET',
url: '<%= Url.Action("getEmpInfo", "NewEmployee")%>',
data: { sData: selectedItem },
success: function(data) {
// Warning: your controller action doesn't return an array
// so don't expect a .length property here. See below
alert(data.Data);
}
});
and have your controller action accept GET requests:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult getEmpInfo(string sData)
{
return Json(new { Data = "test" }, JsonRequestBehavior.AllowGet);
}
OK, now that we have fixed the error let me elaborate. In your code you were using an application/json content type to format your request string. Unfortunately in ASP.NET MVC 2 there is nothing out of the box that is capable of making sense of JSON requests (unless you wrote a custom json value provider factory). Then using string concatenation to append the sData parameter to the URL without ever URL encoding it meaning that your code would break at the very moment the user enters some special character such as & in the EmployeeId textbox.
Try adding the 'beforeSend', 'error' and 'complete' callbacks to get more info in your javascript debugger. http://api.jquery.com/jQuery.ajax/
Are you using a javascript debugger? (firebug, ie9 dev-tools, chrome dev-tools are decent ones 3 that come to mind)
I try to post some data via json objects to my asp.net mvc view, here is the code
$("#submitButton").click(function () {
var name = $("#name")[0].valueOf();
var price = $("#price").valueOf();
var url = $("#url").valueOf();
var product = { Name: name, Price: price, Url: url };
$.post("/Home/NewProduct", product, function (json) { $('ul.items').append("<li><img src=" + url + "/></li>"); },"json");
});
and now, the result is an error:
uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://localhost:1804/Scripts/jquery-1.4.2.min.js :: f :: line 132" data: no]
I try JQuery 1.4.1 and 1.4.2, If I try this code the error is the same
$.ajax({
type: "POST",
url: "/Home/NewProduct",
dataType: "json",
data: { Name: name, Price: price, Url: url },
success: function () { $('ul.items').append("<li><img src=" + url + "/></li>"); }
});
What I'm doing wrong? Please help!
Thanks!
To get the value of an input type element, use .val() instead of .valueOf(), like this:
var name = $("#name").val(),
price = $("#price").val(),
url = $("#url").val();
When you call .valueOf() on a jQuery object, it gets an array of DOM elements...and that doesn't serialize well :)
In your $.post call if you pass JSON as a 4th parameter then jQuery will expect VALID json string only other wise it might cause error.
example of valid JSON is
var json = {"a":"my name", "b":"my school"};