I'm posting a very simple JSON object. The WebApi endpoint is successfully hit, but the JSON data I'm passing doesn't seem to get mapped to my Dto object, I'm always getting null. This used to work fine in previous MVC versions. I've tried a couple of things, even adding [FromBody], as suggested in a similar post. Any idea why this is not working? Thanks
Angular Service:
app.service('Issue', [ '$resource',
function($resource) {
return $resource('api/issue', {}, {
save : { method: 'POST', url: 'api/issue/save' }
});
}]);
Angular call:
Issue.save({ id: 1, test: "test_string" });
Issue.save({ Id: 1, Test: "test_string" }); //this call works if I remove the camel case settings from the startup
Dto object:
public class IssueMinDto {
public int Id { get; set; }
public string Test { get; set; }
}
WebAPI method:
[HttpPost("save")]
public void SaveIssue([FromBody]IssueMinDto issue) { //issue is null here
//process data
}
Later Edit: If I remove the camel case settings from the startup (settings below) and I use capital first letters on the call, then it works, but this is not acceptable as all my data across the app was based on that initial setting (lowercase first letter). Is there anything I can improve in my current settings to get this working?
Startup settings - problem should be tackled here:
services.AddMvc().Configure<MvcOptions>(options => {
options.InputFormatters.Clear();
var jsonOutputFormatter = new JsonOutputFormatter();
jsonOutputFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
options.OutputFormatters.Insert(0, jsonOutputFormatter);
});
Later Later Edit
Turns out the following line of code in my startup settings caused this issue:
options.InputFormatters.Clear();
I replaced the settings with the following line and everything works fine now:
options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
Turns out the following line of code in my startup settings caused this issue:
options.InputFormatters.Clear();
I replaced the settings with the following line and everything works fine now:
options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
Almost, the Json parameters must be equals to the C# parameters
Issue.save({ Id: 1, Test: "test_string"});
Update 1
Try to change $resource with $http
app.service('Issue', ['$http', function ($http) {
this.save = function (data) {
return $http.post('api/issue/save', data );
}
}]);
Related
I checked in different existing questions that was asked for similar problem but I didn't get any help for my problem.
In fact I can't use #RequestBody like in this question or this one.
I'm trying to pas some parameters from Angular controller to a Spring MVC controller, but I'm getting this error message
errorCode:500
message:"Required String parameter 'licenceplate' is not present"
here is my Angular Service:
myApp.httpEnterVehicle = function(levelNumber, placeNumber, licenceplate, placeType) {
return $http.put("/myApp/rest/vehicle/entervehicle", {
params : {
'licenceplate' : licenceplate,
'placeType' : placeType,
'placeNumber' : placeNumber,
'levelNumber' : levelNumber
},
});
};
and nothing was detected on my backend side wich seems to be strange
#RequestMapping(value = "/entervehicle", method = RequestMethod.PUT)
public ResponseEntity<Void> enterNewVehicle(#RequestParam("licenceplate") String licenceplate, #RequestParam("placeType") String placeType, #RequestParam("levelNumber") int levelNumber, #RequestParam("placeNumber") int placeNumber){
....
}
do you have any idea what's going on? I already tried toc check the content of my Angular service param and they are correct :(
You have incorrect put request call, it should look like below
$http.put('url', //1st parameter
{}, //request body
{} //request configuration here
);
If you compare you current put call you can see what wrong thing you were doing. You just need to pass {}(empty object) in request body the pass your config object in place of request body
myApp.httpEnterVehicle = function(levelNumber, placeNumber, licenceplate, placeType) {
return $http.put("/myApp/rest/vehicle/entervehicle",
{}, //added blank object as request body
{
params : {
'licenceplate' : licenceplate,
'placeType' : placeType,
'placeNumber' : placeNumber,
'levelNumber' : levelNumber
},
});
};
Here is my ApiController:
[RoutePrefix("api/Campaign")]
public class CampaignController : ApiController
{
private readonly ICampaignLogic _campaignLogic;
public CampaignController(ICampaignLogic campaignLogic)
{
_campaignLogic = campaignLogic;
}
[HttpGet]
[Route("GetCampaignsByYearCompanyAndContactIds/{companyId:int}/{contactId:int}/{year:int}")]
public List<Campaign> GetCampaignsByYearCompanyAndContactIds(int companyId, int contactId, int year)
{
return _campaignLogic.GetByYearCompanyAndContactIds(year, companyId, contactId);
}
}
And here is where I make the call in AngularJS:
$http.get(ApiUrl + "/api/Campaign/GetCampaignsByYearCompanyAndContactIds",
{ params: { year: $scope.year, companyId: $scope.client, contactId: $scope.contactId } })
.then(function (responses) {
})
This is what is being called when I debug it in Chrome:
http://localhost/MyApi/api/Campaign/GetCampaignsByYearCompanyAndContactIds?companyId=12046&contactId=13662&year=2016
Everything is set up correctly in terms of my localhost as I am calling other API actions without any problem. However, when I call this one I am getting a 404 Not Found error.
What am I missing here?
Based on your route the url needs to have the parameters included in the route and not a part of the query string. if you want to make them available only in the query string then remove them from the route attribute.
What you should be passing in AngularJS
http://localhost/MyApi/api/Campaign/GetCampaignsByYearCompanyAndContactIds/12046/13662/2016
So you will need to build the URL using the parameters, you cannot use params with this url.
If you want to use params in AngularJS change the Route attribute to the following.
[Route("GetCampaignsByYearCompanyAndContactIds")]
I am just learning on how to use Web API with angular but I am having a few issues on retrieving data and I would appreciate it if someone could help me.
I have a controller called GetUserController with the following methods.
public class GetUserController : ApiController
{
[HttpGet]
public string GetUserName()
{
var user = "John Doe"
return user;
}
[HttpGet]
public string GetUserName2()
{
string user = "Jane Doe";
return user;
}
}
//Angular side of things
function getUser() {
return $http.get('/api/GetUser').then(function (data) {
return data;
});
}
The above code works fine and and returns the first user from the controller . however when I try to get the second by using the below angular code:
function getUser() {
return $http.get('/api/GetUser/GetUserName2').then(function (data) {
return data;
});
}
This does not work for some reason it says it can't find the GetUserName2 method. Am I missing something ? Please help?
EDIT: The error i'm getting is : Multiple actions were found that match the request
As #shammelburg has pointed out, this is as a result of Web.API not being able to match your request to a controller/method.
It's not so much that it's not RESTful, and has nothing to do with the verb you are using... it's just that an appropriate route map was not found.
Per the accepted answer, you can add another generic route map to enable the method of access you are attempting, however a more specific option exists using attribute routing:-
public class GetUserController : ApiController
{
[Route("api/getuser")]
[HttpGet]
public string GetUserName()
{
var user = "John Doe"
return user;
}
[Route("api/getuser/getusername2")]
[HttpGet]
public string GetUserName2()
{
string user = "Jane Doe";
return user;
}
}
And to enable the use of attribute routes, add this to your WebApiConfig class:-
config.MapHttpAttributeRoutes();
This method allows you to setup specific custom mappings of URLs to controllers/methods at the individual method level, without having to make a global route map that may conflict with something else in your application at a later date.
You can find more info on attribute routing here
Whilst the above will resolve the specific issue you are having, there would in practice be a different way to implement the example you gave:-
public class GetUserController : ApiController
{
[Route("api/user/{id}")]
[HttpGet]
public string GetUserName(int id)
{
// this would be replaced with some sort of data lookup...
var user = "unknown";
if (id == 1) {
user = "John Doe";
} else if (id == 2) {
user = "Jane Doe";
} // and so on...
return user;
}
}
In the above, the URL api/user/x where x is a number, e.g. api/user/1 will match the GetUserName method of the GetUserController and pass the number as an argument to the method.
This would be accessed using something like this in Angular:-
function getUser(id) {
return $http.get('/api/user/' + id).then(function (data) {
return data;
});
}
This is caused because it is not a true RESTful call which use HTTP verbs, GET, POST, PUT, DELETE.
The way to get your code to work is by altering your WebApiConfig.cs file.
From:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
To:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
As you can see we've added the {action} to the routeTemplate which makes this very much like a MVC Controller.
This allows you to call your API methods (GetUserName & GetUserName2) name like you are trying to do in your angular $http function.
Example:
return $http.get('/api/GetUser/GetUserName')
return $http.get('/api/GetUser/GetUserName2')
I am using AngularJs and Resources module. I want to do a GET to obtain an object.. to do this GET I do not have to pass simply the ID to the server, but I should pass a complex object with different properties and values..
Here the code I am using:
$scope.getActivationStatus = function (event) {
event.preventDefault();
if ($scope.segui_attivazione_form.$valid) {
$scope.activationStatus =
new SeguiAttivazioneService
.seguiAttivazione()
.$get(
{
request: $scope.activationStatus
}, function () { });
}
};
On server side I have:
[HttpGet]
public IHttpActionResult GetActivationStatus(MyComplexObject request)
{
//I will do something here later...
return Ok();
}
The problem is that "request" arrive on server equals to NULL...
I have solved the problem passing two strings to the server... in this way:
$scope.getActivationStatus = function (event) {
event.preventDefault();
if ($scope.segui_attivazione_form.$valid) {
$scope.activationStatus =
new SeguiAttivazioneService
.seguiAttivazione()
.$get(
{
codiceFiscale: $scope.activationStatus.CodiceFiscale,
codiceRichiesta: $scope.activationStatus.CodiceRichiesta
}, function () { });
}
};
And server side:
[HttpGet]
public IHttpActionResult GetActivationStatus(string codiceFiscale, string codiceRichiesta)
{
return Ok();
}
In this way everything works... but I don't like this solution because I will have more than two input...
And this is a get, not a post (not a save, an update)...
How can I pass a complex object doing a GET?
Thank you...
It's best to use the POST method if you want to send data in the body of the request. While it's possible with Angular, some servers might ignore the body of GET requests.
This approach allows to send complex objects with arrays and sub objects:
Angular:
$http({
url: '/myApiUrl',
method: 'GET',
params: { param1: angular.toJson(myComplexObject, false) }
})
C#:
[HttpGet]
public string Get(string param1)
{
Type1 obj = new JavaScriptSerializer().Deserialize<Type1>(param1);
...
}
This is not an elegant solution but it works using HTTP GET:
$http.get(url + "?" + $.param(obj).replace(/%5b([^0-9].*?)%5d/gi, '.$1'))
It converts the complex object into a string with dot notation to define levels. Most of the server side frameworks like ASP.NET Core can bind it to complex objects.
This is an example of the string I send for a complex object:
StartDate=2021-06-11&EndDate=2021-06-11&TimeRange.TimeFrom.Time=07%3A00&TimeRange.TimeFrom.TimeFrame=AM&TimeRange.TimeTo.Time=10%3A00&TimeRange.TimeTo.TimeFrame=AM
Request body can only be sent by POST. With get you could at best URL Encode the OBJECT and then send it as query string params. But thats not the best solution to post some data to the server
I need to take in a collection of MyObject on my webApi controller:
[RoutePrefix("api/DoStuffApi")]
public class DoStuffApiController : ApiController
{
[Route("Update/")]
public HttpStatusCode Update(IEnumerable<MyObject> requests)
{
//DO STUFF
}
}
I would need to use the FromBody parameter attribute to get the list normally:
[Route("Update/")]
public HttpStatusCode Update([FromBody] IEnumerable<MyObject> requests)
{
//DO STUFF
}
Is this better than taking in an object with a collection on it?
[Route("Update/")]
public HttpStatusCode Update(MyRequestObject request)
{
//DO STUFF
}
public class MyRequestObject
{
public IEnumerable<MyObject> requests {get;set;}
}
On the second example I can create a JavaScript object or an Angular module that matches the parameter and pass it into the post call on angular.
.factory('setSomething', [
'$http',
function($http) {
return {
var data = new objectsToUpdate(); //my custom object with an array in it
set: function (customerId) {
return $http.post('api/DoStuffApi/Update/', data);
}
}
}
]);
I cannot find any information on how to do this type of thing. The route attributes follow this article.
This just really depends on what your object you want to post looks like. Do you need to send any other data than the array in the POST? If not then using the former solution would be better since otherwise you are just writing useless additional code for you to maintain. So using the former example would be cleaner.
If however you have more data in your post along with the array you should put it all in a special model class in the controller like you do in your second example..
To have angular POST it correctly so the API model binds to the IEnumerable in the first example, you would simply post the array itself instead of having it inside an object.
function($http) {
return {
var data = new objectsToUpdate(); //my custom object with an array in it
set: function (customerId) {
return $http.post('api/DoStuffApi/Update/', data.nameOfArray); // Don't post the object, just the array
}
}
}
This should bind to the IEnumerable just fine if the fields in the model and the array have the same names.