MVC AngularJs Handling query string

Question

I have CourseAPi Controller that containing follwing method :

 public IEnumerable<CoursesDTO> Get(int id)
    {
        var x = _uniManager.GetCourses(id);
        return x;
    }

i want to send id from URl to this method using Angualr js the AngularJs controller :

app.controller('CRUD_OperController', function ($scope, $filter, CRUD_OperService, $location) {



GetAllRecords1();
function GetAllRecords1() {
    var id = 12;
    var promiseGetSingle = CRUD_OperService.get(id);
    promiseGetSingle.then(function (pl)
    { $scope.Courses = pl.data },
          function (errorPl) {
             // $log.error('Some Error in Getting Records.', errorPl);
          });
}

});

My angular service :

app.service('CRUD_OperService', function ($http) {



//Get All Student  
this.getAllStudent = function () {

    return $http.get("/api/CourseApi/" );
}

//Get Single Records

this.get = function (id) {
    return $http.get("/api/CourseApi/" + id);
}

});

my webapi config

 public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();



        config.Routes.MapHttpRoute(
           name: "DefaultApi1",
           routeTemplate: "api/{controller}/{action}/{id}",
           defaults: new { id = RouteParameter.Optional }
       );

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }

        );

        config.EnableSystemDiagnosticsTracing();
    }

Update : it return me error GET http://localhost:54070/api/CourseApi/12 404 (Not Found)

how to user angualr to get the id in URL (localhost:54070/Course/index/15) to sned to the api controller — salah
– salah, Commented Aug 20, 2015 at 12:36

Rob10e · Accepted Answer · 2015-08-20 13:15:26Z

0

This is the format I have used for such a task:

   this.$http({
        method: 'GET',
        url: 'api/courseapi/' + id
    }).then(function (pl) { 
        $scope.Courses = pl.data
    }, function (errorPl) {
          $log.error('Some Error in Getting Records.', errorPl);
    });

Is this what you are asking?

edited Aug 20, 2015 at 13:15

answered Aug 20, 2015 at 12:29

Rob10e

3192 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

salah Over a year ago

not working for me return this error : ReferenceError: id is not defined

Rob10e Over a year ago

What's the error? There are many other things that could cause an error. What's the name of your controller class? How is the routing set up?

salah Over a year ago

check edit for web api confic and my api controller name (CourseApi)

Rob10e Over a year ago

The name of your controller class needs to end in Controller and be in the Controllers folder. Controllers\CourseApiController.cs with class name: public class CourseApiController. Also, I am updating the url in the example I gave to reflect your class name.

Rob10e Over a year ago

1) Did you rename / relocate your webapi controller? 2) Does record with Id #12 exist?

|

Community · Accepted Answer · 2017-05-23 12:29:43Z

0

I can suggest two options:

The first one: configure routes in your angular controller using ng-route, inject $routeParams module and then retrieve the parameters using it. See this link and the Angular doc for more info.

The second option is to get url location and manipulate string in order to get the parameter:

var tokens = $location.absUrl().split("/");
var id = tokens[5]

I prefer the first option, it's "cleaner" than the second. Hope it can help you!

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Aug 20, 2015 at 13:56

Hernan Guzman

1,2458 silver badges14 bronze badges

2 Comments

salah Over a year ago

thank you the second solution working fine but i still have error

salah Over a year ago

error : Failed to load resource: the server responded with a status of 404 (Not Found)

Collectives™ on Stack Overflow

MVC AngularJs Handling query string

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related