I'm trying to make an Ajax request to an action sending a Json object as parameter.
Here is the code of the Jquery:
var jsonObject = {
"Id": 33,
"Name": "TEST"
};
$.ajax({
type: "GET",
url: rootPath + "ScheduledEvents/Edit/",
data: JSON.stringify(jsonObject),
/*contentType: "application/json; charset=utf-8",*/
dataType: "json",
success: function (data) {
$("#defaultModalRightEventContent").html(data);
$("#defaultModalRightEvent").modal("show");
},
error: function (request, status, error) {
alert(request.responseText);
}
});
Here is the class on the server side:
public class TestingClass
{
public int Id { get; set; }
public string Name { get; set; }
}
And here is the controller action:
[HttpGet]
public ActionResult Edit(TestingClass testingClass)
{
return PartialView("_ScheduledEvent", new ScheduledEventVM());
}
What is happening is that even though the object isn't null when hitting the action, both Id and Name as empty.
If I change the method from GET to POST then the object arrives correctly to the action, but then I get a RequiredValidationToken error. And since I don't actually have a form with the token to use I'm really out of options.
Is there a way to use GET or do I really need to use POST.
Thanks in advance for your help.
Since your method reads Edit, it means it is changing the state of the server. Hopefully an update operation in the database.
As far as RequiredValidation Token error is concerned, I think you are talking about AntiForgeryToken. You can avoid this by removing [ValidateAntiForgeryToken] attribute on your post requests or you can provide the same token from client side using a helper method.
If you write Html.AntiForgeryToken() in your views, it will create a hidden field on in html with name __RequestVerificationToken. You can pick up this value and also push this along with ajax request's data and header. After doing this, your problem will go away.
Related
I have a project with areas and would like to post a view model as JSON to a controller method.
This is what I have, with performance being generated in the default area and passed to the view in area SeatSelection:
$("#addToCartButton").click(function () {
var json = #Html.Raw(Json.Encode(performance));
$.ajax({
url: 'https://#(Request.Url.Host)/SeatSelection/Home/AddToCart',
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
And the action method for testing:
[System.Web.Http.Route("SeatSelection_AddToCart")]
[System.Web.Http.HttpPost]
public JsonResult AddToCart(PerformanceViewModel performance)
{
return Json(performance.Name);
}
I created the following route:
context.MapRoute(
"SeatSelection_AddToCart",
"SeatSelection/Home/AddToCart",
new { action = "AddToCart", controller = "Home", id = UrlParameter.Optional },
namespaces: new string[] { "myProject.Areas.SeatSelection.Controllers" }
);
But all I get is a internal server error 500. I also tried to use [FromBody] and setting a breakpoint to the method, but it is not invoked. I can't figure out what's wrong or missing, please help.
UPDATE
This is the json / performance:
PerformanceID=00000000-0000-0000-0000-000000000000&Name=Performance+15&StartDate=%2FDate(1360364400000)%2F&EndDate=%2FDate(1500328800000)%2F&LatestDateBookable=%2FDate(1450911600000)%2F&Organizer=Organizer+15&Location=Location+15&Availability=75&IsFull=false&IsBookable=true&HasPrice=true&BookableSeats=11&BookedSeats=94&Description=Description+of+Performance+15&Price=443
I found an error: "invalid json primitive: performanceid"
First of all, I would recommend you to use #Url.Action helper method instead of generating url like this: https://#(Request.Url.Host)/SeatSelection/Home/AddToCart.
Secondly, always validate params which comes from the browser. return Json(performance.Name) looks suspicious. What is performance will be null? This might be a problem of your internal server error 500.
If this is not a problem then try to send string instead of JSON to the server and validate and parse JSON on the server side.
You can use Url.Action method like this. I suppose SeatSelection is an area in your project.
$.ajax({
url: '#Url.Action("AddToCart", "Home", new { Area = "SeatSelection"})',
I'm trying to use an ajax call to get json data about my model from my controller. I know 500 error could mean lots of things but I would like to eliminate the possibility of simple error by me.
Console gives me error of: 500 Internal Service Error.
Otherwise I can access it in the url just fine but I don't get anything in the console.
Index.cshtml
function getData() {
$.ajax({
url: "#Url.Action("dataTransfer", "Data")",
type: "GET",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function() {
console.log("failed");
}
});
}
setInterval(function() {
getData();
}, 10000);
DataController
public JsonResult dataTransfer()
{
string DataProvider = "Sample";
var model = from d in db.Data
where d.Name == DataProvider
select d;
return Json(model);
}
500 internal error means your server code is failing, running into an exception because of bad code !
From your code, i can see a problem which could be the cause of your error.
When returning Json from a GET action method, you need to pass JsonRequestBehaviour.AllowGet as the second parameter of Json method.
public JsonResult dataTransfer()
{
string DataProvider = "Sample";
var model = from d in db.Data
where d.Name == DataProvider
select d;
return Json(model,JsonRequestBehavior.AllowGet);
}
Usually in an ASP.NET MVC application, the GET method's are supposed to be returning a view and typically the POST method does some processing on the posted form data/ajax data and return a response, which can be JSON. But if you really want to return Json data from your GET action method, You have to explicitly specify that using the above method we did
Ofcourse, Web API's has a different concept (And implementation behind the scene)
I have the following scenario: I have a kendo.dataSource which is populated via read request to a WebApi Controller. In addition to the read, I am sending a couple of parameters, which then I use in my controller to do some server logic. I was able to send as many simple parameters as I want via the parameterMap property of the transport function. Till now it was a simple get request. However now I need to send additional json object to the controller as a parameter. I read that I have to transform the Get request to Post and put the Json onto the body of the request but I don't know how to do it.
The code that I have so far:
var gridDataSource = new kendo.data.DataSource({
type: 'odata-v4',
transport: {
read: {
url: wave.alarmsAndEvents.api('api/alarmsAndEventsSearch/post'),
type: "POST",
data: {
SearchModel: JSON.stringify(vm.searchModel)
},
contentType: 'application/json; charset=utf-8',
},
parameterMap: function (data, operation) {
if (operation === "read") {
data.startDate = kendo.toString(vm.selectedTimeInterval.start, "G");
data.endDate = kendo.toString(vm.selectedTimeInterval.end, "G");
data.alarmsToDisplay = vm.maxRecords;
}
return kendo.stringify(data);
}
},
pageSize: vm.maxRecords,
error: function (e) {
alert(e.xhr.responseText);
}
});
The SearchModel is the thing that I want to send as JSon. The rest are simple DateTime and int parameters.
My controller:
[HttpPost]
public IQueryable<AlarmsSearchViewModel> Post(DateTime startDate, DateTime endDate, int alarmsToDisplay, [FromBody]JToken jsonbody)
{
....
return something;
}
I end up with Not Found 404, but I am pretty sure that I have messed up the parameters. And from the Network window I can see that the json object is not sent at all. Any help will be much appreciated!
I'm trying to figure out a way to pass a complex object via json with spring mvc 3.1. I am also using knockoutjs, so take the ko.toJSON to be equivalent to JSON.stringify.
DeployT
here is the ajax call:
$.ajax({
url: "/doAction",
type: "post",
data: ko.toJSON({"complexObjectA": ko.toJSON(self.complexObjectA()), "complexObjectB": ko.toJSON(self.complexObjectB()), "id": "", "text": ""}),
dataType: "json",
contentType: "application/json; charset=utf-8",
// callback handler that will be called on success
success: function (response, textStatus, jqXHR) {
//dosomething
},
// callback handler that will be called on error
error: function (jqXHR, textStatus, errorThrown) {
// log the error to the console
},
// callback handler that will be called on completion
// which means, either on success or error
complete: function () {
//dosomething
}
});
The spring controller code looks like:
#RequestMapping(value = "/doAction", method = RequestMethod.POST)
#ResponseBody
public String doAction(#RequestBody MyForm form, HttpServletRequest request, HttpServletResponse response) {
and MyForm is defined as such:
public class MyForm {
private ComplexObjectA complexObjectA;
private ComplexObjectB complexObjectA;
private String id;
private String text;
with the appropriate public getter/setters.
When I attempt to make this call, I get a error 400
The request sent by the client was syntactically incorrect ().
The complex objects are both obtained via a json get earlier and they get serialized just fine from the object to json and into js objects.
Do I need to create a special deserializer with Jackson in order to do this?
As you say that your complex objects serialized successfully before, I can guess that your Spring config files are okay and Jackson is configured properly. I think that you don't need to create a separate serializer/deserializer for MyForm class.
A 400 error "bad request" can come up for example if you make your jQuery AJAX call when a user clicks a link with a non-empty href, so the browser tries to perform the default action. In that case you can see that a request header still has the type "text/html", though you are trying to send "application/json".
I know there are other questions on the forum regarding this but found ho helpful solution up to now.
I have a controller so defined:
[HttpPost]
public ActionResult Update(int id, IList<MyObject> data)
{
return Json(new { success = false, message = "saved!" });
}
A Json Array of MyObject is inside a JsonStore and sent up on the submitData() function call. I can see everything is sent up correctly, the "data" parameter is an array of MyObject, if I manually do JSON.Deserialize<IList<MyObject>>(data) I get exactly what I need, which means that data is a valid json string... in the Headers I can see the "application/json" content-type.
I am using the JsonValueProviderFactory already, but it does not help. From my understanding it seems that the value provider should easily map arrays into IList, so I am wondering if I am doing something wrong...
Thanks!
UPDATE
As noted in one comment I have a slightly different use scenario: I am actually posting this data through a Store.submitData() call... apparently, even though the headers are similar, the store submit does not work because it actually generates a string.
Does anyone have any knowledge on how to force the store to do something similar to JSON.stringify?
You haven't shown your client code but the following should work fine:
Ext.Ajax.request({
url: '#Url.Action("update", new { id = "123" })',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
params: JSON.stringify({
data: [
{ foo: 'value 1' },
{ foo: 'value 2' },
{ foo: 'value 3' }
]
}),
success: function (response) {
alert(response.responseText);
}
});
It assumes that MyObject is defined like this:
public class MyObject
{
public string Foo { get; set; }
}
but of course it could be just any complex object.