Angular and Web Api 2 handling List parameters - angularjs

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.

Related

Adding a claim using a custom endpoint with AddLocalApiAuthentication

I'm attempting to employ a custom endpoint that adds a specific claim based on a parameter passed to LocalApiController.
I'm following help at:
http://docs.identityserver.io/en/latest/topics/add_apis.html
I configured startup.cs:
services.AddLocalApiAuthentication(principal =>
{
principal.Identities.First().AddClaim(new Claim("additional_claim", "additional_value"));
return Task.FromResult(principal);
});
and my receiving controller:
[Route("localApi")]
[Authorize(LocalApi.PolicyName)]
public class LocalApiController : ControllerBase
{
public IActionResult Get()
{
var claims = from c in User.Claims select new { c.Type, c.Value };
return new JsonResult(claims);
}
}
[Authorize(LocalApi.PolicyName)] works and fires the helper configured in startup.cs which logically fires before the controllers get method.
I don't see how I can pass the controller's {id} parameter to the helper method (that will become the value of the claim I'm to add, replacing the "additional_value" constant).
Any suggestions?

ASP.Net Web Api, POST multiple objects

I have this AngularJS Http Call
$http({
method: "POST",
url: Helper.ApiUrl() + '/Api/Case/SendCase',
data: { obecttype1, obj2, obj3},
}).then(function mySuccess(response) {});
Ant this ASP.net Web Api method
[HttpPost]
[Route("Api/Path/SendCase")]
public int SendCase(object application)
{
string applicantName = ((Newtonsoft.Json.Linq.JObject)application)["applicant"].ToString();
obecttype1 obj = JsonConvert.DeserializeObject<obecttype1>(((Newtonsoft.Json.Linq.JObject)application)["obecttype1"].ToString());
.........................
return ID;
}
This works pretty well, but I feel it is a bit dirty because I am parsing my objects in my method, so my question is
Is the are way to send multiple objects as params in a POST method, I would prefer to avoid modifying my model, avoid creating a class for this
So my Api Method would look like this
public int SendCase(class1 obecttype1, class2 obj2, class3 obj3)
"Is the are way to send multiple objects as params in a POST method, I would prefer to avoid modifying my model, avoid creating a class for this"
By design HTTP Post can only have one body and web api will try to cast the body to the parameter defined in the method signature. So sending multiple objects in the body and trying to match these against multiple params in the method signature will not work. For that you need to define a class which holds the other classes and match the body signature.
public class postDTO
{
public class1 class1Data { get; set; }
public class2 class2Data { get; set; }
public class3 class3Data { get; set; }
}
//The api signature
public int SendCase(postDTO application)
If you still don't want to add the new class then I would use the JObject directly as the parameter as this
[HttpPost]
public int SendCase(JObject jsonData)
{
dynamic json = jsonData;
JObject class1DataJson = json.class1Data;
JObject class2DataJson = json.class2Data;
JObject class3DataJson = json.class3Data;
var class1Data = class1DataJson.ToObject<class1>();
var class2Data = class2DataJson.ToObject<class2>();
var class3Data = class3DataJson.ToObject<class3>();
}
1. Define models for the parameters
public class ClassType1
{
public int Num1 { get; set; }
public string Str1 { get; set; }
}
public class ClassType2
{
public double Test2 { get; set; }
}
2. Use the models as the parameters on the API controller method
// Sorry this example is setup on .Net Core 2.0 but I think the previous
// versions of Web Api would have similar/same behavior
[Route("api/[controller]")]
public class ValuesController : Controller
{
[HttpPost]
public void Post(ClassType1 ct1, ClassType2 ct2)
{}
}
3. When posting, your objects inside the data {} have to have the keys that match the parameter name you defined on the Controller method
jQuery ajax
$.ajax({
method: 'post',
url: 'http://localhost:53101/api/values',
dataType: 'json',
data: {
// It takes key value pairs
ct1: {
num1: 1,
str1: 'some random string'
},
ct2: {
test2: 0.34
}
}
});
To summarize, yes you can post multiple objects back to the server, as long as
You define a key for each object and the key has to match the parameter name you define on the server method.
The object structure has to match.
-- update --
Just as a proof, here is the screenshot:
We have an app that uses DefaultHttpBatchHandler to accept multi-part POST requests. I believe it to be a bit clunky for many reasons but it is the built-in way to accept multiple objects on a single request in a structured fashion.
https://msdn.microsoft.com/en-us/library/system.web.http.batch.defaulthttpbatchhandler(v=vs.118).aspx
As for the script to create something, that I don't know about. Our callers that use this API are C# services that can create the multi-part requests using a simple client library we provide to help them do just that.

unable to pass complex objects to webapi from angularjs

I'm using below code to post data to webapi controller but complex data objects are coming as null in the API controller.However, if i pass object at a time i'm seeing results meaning it is sending over the flat objects but not complex objects.Can anyone please guide me what wrong i'm doing here or is there any other way to do this??
below are the data objects and code snippet that i'm using:
Models:
var portfolio={
Accounts:{accountnumber:'',
SSN:'',
..almost 15 fields in this object},
Investments:{ID:'',
totalamount:'',
etc..here also we have more than 10 objects}
Foo: {F1:'',F2:'',F3:''...}
Foo1: {F11:'',F12:'',F13:''...}
}
Angular service:
var get=funtion(portfolio){
return $http.post('/api/values',
JSON.stringify(portfolio),
{
headers: {
'Content-Type': 'application/json'
}
}
)
}
webapi controller:
public class ValuesController : ApiController
{
[HttpPost]
public User Post([Frombody]portfolio model)
{
//logic here
}
}
Json is the http.post() default content type, so there is no need to neither specify that, nor stringify you object.
Assuming you are posting a valid json object, this should suffice:
var get = funtion(portfolio){
return $http.post('/api/values', portfolio);
}

How to pass parameters from class to angular $scope

if i have this class:
public class MainMenuModel
{
public MainMenuModel(string transKey, string stateName, string displayUrl, bool hasSubMenu= false,List<SubMenuModel>subMenu=null)
{
TransKey = transKey;
StateName = stateName;
DisplayUrl = displayUrl;
HasSubMenu = hasSubMenu;
SubMenu = subMenu;
}
public string TransKey { get; set; }
public string StateName { get; set; }
public string DisplayUrl { get; set; }
public bool HasSubMenu { get; set; }
public List<SubMenuModel>SubMenu { get; set; }
}
And if i populate that class like this:
MainMenu.Add(new MainMenuModel("MY_TICKETS", "account.tickets", "/account/tickets/"));
MainMenu.Add(new MainMenuModel("TRANSACTION_HISTORY", "account.transactionhistory", "/account/transactions"));
MainMenu.Add(new MainMenuModel("PAYIN","account.payin","/account/payin"));
MainMenu.Add(new MainMenuModel("PAYOUT", "account.payout", "/account/payout"));
MainMenu.Add(new MainMenuModel("TICKET_PAYOUT", "account.ticketpayout", "/account/ticketpayout"));
MainMenu.Add(new MainMenuModel("SETTINGS","default","default",true,
new List<SubMenuModel>(){
new SubMenuModel("PERSONAL_INFORMATION","account.personalinformation","/account/personalinformation"),
new SubMenuModel("NOTIFICATIONS","account.notificationsettings","/account/notifications"),
new SubMenuModel("CHANGE_PASSWORD","account.changepassword","/account/passwordchange"),
new SubMenuModel("GAME_SETTINGS","default","default"),
}));
MainMenu.Add(new MainMenuModel("PROMOTIONS", "default", "default", true,
new List<SubMenuModel>(){
new SubMenuModel("BONUSES","default","default"),
new SubMenuModel("COMPETITIONS","default","default"),
new SubMenuModel("VOUCHER_REDEEM","default","default"),
}));
How can i call this in angular ..and pass it to $scope.something?Any suggestion?
If you need forming page on server - try to serialize this collection and put in on angular controller init
<div ng-controller="SomeController" ng-init="initialize('#Model.ToJson()')">
My recommendation is that you setup WebApi along with your existing ASP.NET MVC layer.
With that being said all you need to do is to implement the Rest services as GETs or POSTs and from your angular a simple invoke with $http :
Server Side
Using Microsoft Web Api Controller class "ValuesController" but it can be any class name which looks like this:
public class ValuesController : ApiController
{
public string Get(int id){ return "value"; }
...
Client Side
In my AngularJS Controller function it gets the value using $http service:
$http({method:'GET',url: '/api/values/1'}).success(function(data){
$scope.value =data;
})
First, you'll need to setup a server endpoint you can reach through ajax, that'll return the MainMenu structure as a JSON response.
Once you have that endpoint setup, there are several ways to get this data into angular, although I think the best way is to create an Angular service to manage this data. Something like this (bear with me, since I don't know the particulars of your project):
angular.module('application').factory('mainMenuService', ['$http', function($http) {
var ServiceInstance = {
_menuItems: [],
_fetchMenuItems: function() {
var self = this;
$http.post('your/server/endpoint').success(function(data, status, headers, config) {
// Clear exisiting items
self._menuItems.length = 0;
// Assuming menu items have been returned as JSON structure
// Add them all into the Service's mainMenu cache
self._menuItems.push.apply( self._menuItems, data.menuItems );
});
},
getMenuItems: function() {
if (!this._menuItems.length) {
this._fetchMenuItems();
}
// No need to wait on async operation because we're using the same array instance,
// and angular will observe this instance and detect when new items are added.
return this._menuItems;
}
};
return ServiceInstance;
}]);
Then, in your Angular controllers use the service:
// Notice how we reference the 'mainMenuService' here, and angular will inject it automatically
angular.module('application').controller('mainMenuController', ['mainMenuService', function (mainMenuService) {
$scope.mainMenuItems = mainMenuSevice.getMenuItems();
}]);
That way you'll decouple the data from the controller, and you can reuse the service in any controller where it's needed.

Web Api 2 with two method with the same HTTP verb an angularjs resources

I have this controller:
public class SeguiAttivazioneController : ApiController
{
[HttpGet]
public IHttpActionResult DoWork1()
{
...
return Ok();
}
[HttpGet]
public IHttpActionResult DoWork2()
{
...
return Ok();
}
[HttpGet] //I would like to have a search with GET verb, but I cannot validate my ModelState with dataAnnotation
public IHttpActionResult AnotherSearch(string filter1, string filter2, ...)
{
if (ModelState.IsValid)
{
...
return Ok();
}
return BadRequest(ModelState);
}
[HttpPost]
public IHttpActionResult DoSearch(SearchFilter filters)
{
if (ModelState.IsValid)
{
...
return Ok();
}
return BadRequest(ModelState);
}
[HttpPost]
public IHttpActionResult SubmitForm(FormData data)
{
...
return Ok();
}
}
As you can see I have two methods with same HttpVerbs (2 for GET and 2 for POST)... I don't know if I am violating REST principles... If so, I would like to avoid...
In this moment I am using AngularJs + NgResources to call my Controller..
public_area
.factory("SeguiAttivazioneService", function ($resource) {
//return {
// seguiAttivazione: $resource("/api/SeguiAttivazione/", null,
// {
// 'get2': { method: 'GET', url: '/api/SeguiAttivazione/GetActivationStatus2' }
// })
//};
return {
seguiAttivazione: $resource("/api/SeguiAttivazione/")
};
});
I am trying to do a GET:
$scope.getActivationStatus = function (event) {
event.preventDefault();
if ($scope.segui_attivazione_form.$valid) {
var request =
new SeguiAttivazioneService
.seguiAttivazione()
.$get({ }, getActivationStatusSuccess, getActivationStatusError);
}
};
But (correctly) I obtain an "Internal Server Error 500", because I have to GET method. How Can I solve this problem? (I suppose I will have same problem with POST too)
Thank you
UPDATE
Here the class of the filters
public class SearchFilter
{
[Required(ErrorMessage="")]
public string CodiceFiscale { get; set; }
[Required(ErrorMessage = "")]
[RegularExpression(#"^(?:\d{11,16})|(?:[a-zA-Z]{6}[a-zA-Z0-9]{2}[a-zA-Z][a-zA-Z0-9]{2}[a-zA-Z][a-zA-Z0-9]{3}[a-zA-Z])$", ErrorMessage = "Codice Fiscale o Partita IVA non validi")]
public string CodiceRichiesta { get; set; }
}
With this class I can use data Annotation to validate my model... If I do a GET Method I cannot use data annotation validation anymore...
Here is some explanation about a the REST Endpoints.
In REST we are manipulating ressources. As collections or individual.
Classics endpoint would be :
GET /rest/houses DATA : none -> will return a collection of houses
GET /rest/houses/{id} DATA : none -> will return the house find by its {id}
POST /rest/houses DATA : {"street":"3 bdv NY-city"} -> will create a new house object with the given data
PUT /rest/houses/{id} DATA : { "id":"{id}", "street":"4 bvd NY-city"} -> will update the whole house ressource find by its {id}
PATCH /rest/houses/{id} DATA : { "street":"4bvd NY-city" } -> will update the given fields of the house ressource find by its {id}
DELETE /rest/houses/{id} DATA : none -> will delete the house ressource find by its id.
There is too much things to know about restfull API that i can't give you all the keys. But try to find some good articles on the subjects such as :
http://www.restapitutorial.com/index.html
Not sure if this answer your question, but i hope it'll help you.
EDIT 1 :
Since i have to add some point about a restfull way to give some complicated action i'll give you the restfull url way to go.
In a restful world (extremely rare) you know only one entry point of your rest API let say this :
GET /rest/
This uri will respond you will all the services that the api can provide
Exemple :
{
"resources":"/rest/ressources",
"apiInfo" : "/rest/api/info"
}
To get your ressources informations you'll follow the link
GET response.resources
I may respond something like :
{
"houses":"/rest/ressources/houses/",
"cars" :"/rest/ressources/cars"
}
Now we want the houses
GET response.houses
Response :
{
"fields":[{
"constructionYear","street"
}],
"search":"/rest/houses"
"create":"/rest/houses"
}
etc... And at this place you can add some non restful endpoints. In a restful way. This action will be hold by a restful resource. Somes API that are using this kind of great Restful.
Standard Rest API :
https://developers.soundcloud.com/docs/api/reference#users
Restful API :
https://www.salesforce.com/us/developer/docs/api_rest/
The question is that the Web API infrastructure must have a way to choose one of the possible methods.
One way is changing the Web API route configuration, including an /{action}/ segment. If you do so it will work exactly like MVC, and you have to always include the action name.
The other way is making the received parameters different in each method, so that the Web API infrastructure can discover which method you're trying to invoke. You can read this answer I've written today for a similar question: How can I add multiple Get actions with different input params when working RESTFUL?.
As a final comment in that answer I say that the parameters can be also discerned by using route contraints.
The first solution of having to include the action name in all invocation is not RESTful, but do you need or prefer it to be RESTful for any particular reason?

Resources