Following is my ajax call
$.ajax({
type: "GET",
url: "https://localhost/api/Client",
data: JSON.stringify({"SortExpression":"clientName","SortDirection":"desc"}),
contentType: "application/json; charset=utf-8",
async: false,
cache: false,
dataType:'json',
error: function (data) {
alert("hi error buddy")
},
success: function (response) {
if (response) {
//todo
}
}
});
And my controller
public List<Customer> Get([FromUri] SortFilter filter)
{
}
and my model
public class SortFilter
{
public string SortExpression
{
get; set;
}
public string SortDirection
{
get; set;
}
}
but my contoller always takes the parameters as NULL. where am I going wrong ?
You're supplying a value, but not a key. So while the model binder may be able to discern what a SortFilter is, it has no way of knowing what filter is.
Try wrapping the object and giving it a key name. Perhaps something like this:
JSON.stringify({"filter":{"SortExpression":"clientName","SortDirection":"desc"}})
GET requests are performed on the query string, which should not be JSON encoded. POST, and PUT data may be JSON encoded, but not GET. The reason your parameter is null is because the query string is a single string with no parameter name.
replace:
data:JSON.stringify({"SortExpression":"clientName","SortDirection":"desc"})
with
data:{"SortExpression":"clientName","SortDirection":"desc"}
You can check the WebAPI call directly by typing in the full URL to the web API method
https://localhost/api/Client?SortExpression=clientName&SortDirection=desc
This will allow you to debug your data retriever, and page separately which should make the whole process much easier.
Related
I have, until today always used POST to get response from API Controllers in .NETCore/MVC applications, but have been struggling with performance and have noted that POST cannot be cached...
So, I am trying to change things to use a GET request.
I do not like this, because I would prefer the data sent as a form, not in the URL... but if it must, it must
Anyway, I am having trouble getting .NET to serialize data posted using an object in the AJAX post (using jQuery or otherwise, I don't care)
My controller looks like this:
[HttpGet]
[Route("ProductStockHistory")]
public async Task< ChartResponse> ProductStockHistory([FromQuery] ChartQuery value)
{
//// do stuff
}
You can see I want to send a ChartQuery object, this looks like this:
public class ChartQuery
{
public string dateFrom { get; set; }
public string dateTo { get; set; }
public string groupBy { get; set; } = "month";
// more values...
}
Using a POST, I would do this: (with the [HttpGet] attribute changed to [HttpPost] and [FromQuery] changed to [FromBody])
$.ajax({
type: "POST",
url: "/Chart/" + chartAction,
contentType: "application/json",
dataType: "json",
data: JSON.stringify({
dateFrom : dateFromValue,
dateTo : dateToValue,
groupBy : groupByValue,
// more values...
}),
success: function (data) {
// do stuff
}
});
This works fine... but as per my opening statement, I cannot cache a POST request/response.
You can probably tell I am trying to get data for a chart, so it is not changing, therefore a cached response is adequate for me.
I have tried many variations of the AJAX code and the most logical to me looks like this:
$.ajax({
type: "GET",
url: "/Chart/" + chartAction,
contentType: "application/json",
dataType: "json",
data: { value: JSON.stringify({
dateFrom : dateFromValue,
dateTo : dateToValue,
groupBy : groupByValue,
// more values...
})},
processData: true,
success: function (data) {
// do stuff
}
});
This is generating a URL like: /Chart/ProductStockHistory?value=%7B"dateFrom "%3AdateFromValue%2C"dateTo"%3AdateToValue%7D, which looks about right, but .NET is not serializing the value, I'm getting a null/default object as value in my controller.
It's entirely possible that I am approaching it wrong, but how can I get a cached response when using a complex object as a value in a controller?
EDIT: note, I realise I could change the controller to receive individual values of the ChartQuery object, but that is not what I am trying to achieve
You dont need to call JSON.stringify on your ajax request. Something like this should work:
data:{
dateFrom : dateFromValue,
dateTo : dateToValue,
groupBy : groupByValue,
}
This should produce a request url like this:
/Chart/ProductStockHistory?dateFrom=dateFromValue&dateTo=dateToValue&groupBy=groupByValue
.net core binds those values then correctly to your ChartQuery model.
I have below model and Controller. I want to know how to pass value for the API from Ajax call.
Model:
Public Class Data
{
public int ID {get;set;}
public string Title {get;set;}
}
Controller:
[HTTPPOST]
public string UpsertItems(List<Data> Inputs)
{
try
{...}
catch(Exception ex)
{..}
}
From frontend i need to pass below data to API.
I tried passing data like below
var datacoll='{{"ID":1,"Title":"a"},{"ID":2,"Title":"b"}}'
If I pass variable datacoll as it is I am getting 500 internal error and if I pass JSON.Stringify(datacoll) in controller i am getting null value.
Ajax method:
$.ajax({
url: '/Test/UpsertItems',
method: 'POST',
dataType: 'text',
contentType: 'application/json; charset=utf-8',
data: datacoll,
success: function (data) {..},
error: function (jqXHR) {..},
});
Please let me know what is wrong in it.
Looks like your data needs to be a list, notice the square brackets.
var datacoll='[{"ID":1,"Title":"a"},{"ID":2,"Title":"b"}]'
I have a situation where I get data from ajax call. I want to call an action method and pass data as arguments. The data passed to action method should be mapped to object properties in parameter list.
Here is my class which is called FullQuestion.
public class FullQuestion : Question
{
public string Title { get; set; }
public string Content { get; set; }
public List<Tag> Tags { get; set; }
}
Here is my Ajax call method
var finalTagResultText = {Title: "title", Content: "content",Tag: { tagName: "tname", tagDescription: "tdesc"},Tag: { tagName: "tname1", tagDescription: "tdesc1"}};
$.ajax({
url: '#Url.Action("AskQuestion", "Dashboard")',
type: "POST",
data: JSON.stringify(finalTagResultText),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
window.location.href = "#Url.Action("Questions", "Dashboard")";
}
});
Here is my action method.
[HttpPost]
[ActionName("AskQuestion")]
public void AskQuestion_Post(FullQuestion question)
{
}
I want to get the JSON object passed as a FullQuestion object. I used json2 library to make use of stingify method.
I get the title and content text but no Tag object.
Any idea how can i accomplish that ? Thanks in advance.
Your collection property is named Tags (not Tag) and since its a collection, you need to pass an array of Tag objects, for example
var finalTagResultText = { .... , Tags: [{ tagName: "tname", tagDescription: "tdesc"}, { tagName: "tname1", tagDescription: "tdesc1"}]}`
Side note: Your ajax success callback is redirecting to another page, in which case, do not use ajax to submit your data. The whole point of ajax is to stay on the same page. You would be better off just doing a standard submit and using a RedirectToAction() in your POST method.
You are using wrong JSON format, using correct format as follows:
{"Title": "title", "Content": "content","Tag":[{ "tagName": "tname", "tagDescription": "tdesc"},{ "tagName": "tname1", "tagDescription": "tdesc1"}]}
In order to verify your JSON string, you can use the below link
https://jsonformatter.curiousconcept.com/
I have a click function that grabs rows from an grid. The return value is a list of objects which represent each row. I use JSON.stringify so I can send the data to my SaveJobs action on my Home Controller. The following properties work and my controller action recognizes the data, but it is not in valid JSON format.
contentType: 'application/json; charset=utf-8'
data: { data: JSON.stringify(editedRows) }
However, I found through research that the below method is preferred since it is a valid JSON format, but my data variable on my controller action is null (returning no data to perform my action on) and I could not debug the issue. Why does the action variable not recognize this? Thank you.
$('#SaveJobs').on('click', function () {
editedRows = getEditedRows();
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: savePlannedJobsUrl,
cache: false,
data: JSON.stringify({ data: editedRows }),
dataType: "text",
success: function (result) {
if (result === 'Success') {
alert('The records you have edited are saved');
}
else {
alert('There was an error with the server. All records may not have been saved.');
}
$("*").css("cursor", "");
},
error: function (HtmlHttpRequest, ajaxOptions, thrownError) {
var htmlObj = $.parseHTML(HtmlHttpRequest.responseText);
var savedJson = JSON.stringify(editedRows);
if (htmlObj !== null) {
var htmlBody = htmlObj[htmlObj.length-1].outerText;;
}
tryToWriteError(htmlBody, savedJson);
}
});
return false;
});
Controller
[HttpPost]
public string SaveJobs(string data)
{
// CODE HERE
}
ANSWER:
I marked #Queti's answer, and more specific to my problem see the link in my comment that will help for MVC projects. That resolution will skip creating DTOs.
The issue is that you are sending in an array of objects, but your action method is expecting a string.
It appears that your getEditedRows method is returning an array of objects.
I recommend you create a model on the server that matches what you are passing in. Something like:
public class MyDto
{
int id { get; set; }
string comments { get; set; }
}
And then update your method signature to accept that as the parameter:
public string SaveJobs(List<MyDto> data)
I have an action that I am POSTing to from jquery:
[HttpPost]
public void UpdateGroupName(int groupId, string name)
{
authorisationRepository.UpdateGroupName(groupId, name);
}
This works fine with the groupId and name. I have a few other group actions so I would like to use an authorisation attribute to make sure the person performing the change has permission to make the change.
I already have an AuthorizationAttribute that retrieves the groupId successfully on GET requests by accessing filterContext.HttpContext.Request.Params["groupId"] but when it comes to POSTs it doesn't work. The Request.Form is empty and so is Request.Params.
Here's the code I have in my authorisation attribute:
public int groupId { get; set; }
protected override bool AuthorizeCore(HttpContextBase httpContext)
{
username = httpContext.User.Identity.Name.Split('\\').Last();
// awesome permissions checking goes here...
return authorized;
}
public override void OnAuthorization(AuthorizationContext filterContext)
{
groupId = int.Parse(filterContext.HttpContext.Request.Params["groupId"]); // this line throws an exception
base.OnAuthorization(filterContext);
}
I have looked at this answer but my Form property is empty :(
Updated to show jquery post:
var serverComm = {
post: function (url, data) {
return $.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
});
},
get: function (url, data) {
return $.ajax({
url: url,
type: 'GET',
cache: false,
contentType: 'application/json; charset=utf-8',
data: data
});
}
};
// some awesome code later...
serverComm.post(editGroupNameUrl, { groupId: group.id, name: newName })
The reason your code doesn't work is because you are sending your request as a JSON string. So there are no request parameters in the POST body and you cannot fetch them in the Request.Params.
So instead of:
filterContext.HttpContext.Request.Params["groupId"]
use:
filterContext.Controller.ValueProvider.GetValue("groupId").AttemptedValue
This will query the value provider (in your case the JsonValueProvider) to obtain the corresponding value send by the client.
Try without the stringify. I guess MVC is understanding another way of binding besides the request parameter -> action parameter. I guess it's understanding the json posted. JQuery, if you pass just the data object (without stringify) will post each field as a request parameter (at least, I think so). It's easy to try :)