Using $http call to pass attributes to controller in Web Api 2 using attribute routing

Question

Using $http call to pass attributes to controller in Web Api 2 using attribute routing

I am currently working on an $http call in my project:

$http({
        method: 'GET',
        url: '/api/PhotoSubmit/GetCategories',
        accept: 'application/json'
    })
        .success(function (result) {
            $scope.categories = result;
        });

... that requires sending a parameter to this HTTPGET method :

[Route("api/PhotoSubmit/GetCategories/{id}")]
    [HttpGet]
    public object GetCategories(int id)
    {
        return FileServices.GetCategoriesForUser().Select(c => new { Id = c.Id, Name = c.Name });
    }

The routing is set up correctly but I'm unsure of how to access it using Angular/JavaScript to send data to the controller (OR... how the route-call should be formatted in the $http call)

The URL for reference is:

http://localhost:63203/Index.html#/photosubmit/1

c#javascript angularjs url-routing asp.net-web-api2

Answer 1

Answer №1

For my web api endpoint, I'm utilizing $resource within a factory instead of $http.

Within services.js, the setup looks like this:

var app = angular.module('app.service', ['ngResource']);

app.factory('api', ['$resource', function ($resource) {
'use strict';
return {
    Categories: $resource('/api/PhotoSubmit/GetCategories/:id', {id: '@id'})
    };
}]);

When calling it in the controller, I use:

$scope.categories = api.Categories.get({id:"1"});

If you're interested in dynamically handling data once it's returned, you can wait for results using $promise.

api.Categories.get({id:"1"}) .$promise .then(function (results){ $scope.categories = results; });

Update: To pass a variable to $routeParams, here's how I achieved it:

Inside app.config, the following was added to set up an id parameter:

$routeProvider
    ...
    .when('photosubmit/:id', {
        templateUrl: "photo.html",
        controller: "PhotoController"
    })
    .otherwise({ redirectTo: '/' });

In the controller, get the param using

$scope.$routeParams = $routeParams;

Ensuring this is placed at the beginning to prevent it from being lost or undefined.

Now, access the route-defined variable with $scope.$routeParams.id

Answer 2

For my web api endpoint, I'm utilizing $resource within a factory instead of $http.

Within services.js, the setup looks like this:

var app = angular.module('app.service', ['ngResource']);

app.factory('api', ['$resource', function ($resource) {
'use strict';
return {
    Categories: $resource('/api/PhotoSubmit/GetCategories/:id', {id: '@id'})
    };
}]);

When calling it in the controller, I use:

$scope.categories = api.Categories.get({id:"1"});

If you're interested in dynamically handling data once it's returned, you can wait for results using $promise.

api.Categories.get({id:"1"}) .$promise .then(function (results){ $scope.categories = results; });

Update: To pass a variable to $routeParams, here's how I achieved it:

Inside app.config, the following was added to set up an id parameter:

$routeProvider
    ...
    .when('photosubmit/:id', {
        templateUrl: "photo.html",
        controller: "PhotoController"
    })
    .otherwise({ redirectTo: '/' });

In the controller, get the param using

$scope.$routeParams = $routeParams;

Ensuring this is placed at the beginning to prevent it from being lost or undefined.

Now, access the route-defined variable with $scope.$routeParams.id

Answer 3

Answer №2

The identifier can be transmitted via the URL itself.

url: '/api/PhotoSubmit/GetCategories/1',

Alternatively, you can also include it in the parameters.

$http({
    url: '/api/PhotoSubmit/GetCategories', 
    method: "GET",
    params: {id: 1}
 });

Answer 4

The identifier can be transmitted via the URL itself.

url: '/api/PhotoSubmit/GetCategories/1',

Alternatively, you can also include it in the parameters.

$http({
    url: '/api/PhotoSubmit/GetCategories', 
    method: "GET",
    params: {id: 1}
 });

Using $http call to pass attributes to controller in Web Api 2 using attribute routing

Answer №1

Answer №2

Similar questions

Tips for streaming AWS Lambda response in nodeJS

Accessing a property's value from a different property within a Class' initialization function

How can I close the menu when a menu item is clicked in a React.js application?

Using jQuery, identify when a key has been pressed within a three.js environment

Temporarily withhold the execution of useEffect until useSelector successfully fetches data from the Redux store within a React

AngularJS and the Angular UI Router were combined for the first time in

Utilize the power of RxJS to send numerous post requests within an Angular application

Ordering BufferGeometries in Three.js for Accurate Rendering

Ajax request unable to load Image Slider

The iPad scroll did not meet the condition for reaching the bottom

Assign a value of null to SynchronizationContext rather than utilizing ConfigureAwait(false)

Angular Bootstrap-Select: Displaying options even after selection

The functionality of the JQuery $.post method may be compatible with Firefox but may encounter issues when

Ways to customize the hover effect for react-bootstrap navbar link

Dynamic Positioning in Javascript Application

Mysterious data organization - transform into an object

What is the proper way to utilize a function in C# that integrates with a window form using TypeScript?

Displaying values dynamically as they transition between states in Reactjs

Facing some unexpected issues with integrating Django and AngularJS, unclear on the cause

In Vue.js, the 'select' option is consistently set as the default choice