When you are consuming a Restful service, you usually send JSON data back and forth. Today I will explain how we are doing it with an ASP.NET WebAPI backend and Angular frontend. I assume that the projects are setup and usable.

So, first, lets create our controller class in our backend to serve some sample data.

 

You see that our class has the base class ApiController. This class has some helpful properties and methods.

I created for this example a list with some products which are objects from SampleProduct. Then i created 3 methods. One get method to receive all products and one to get a specific product regarding an id. The third method is a post method to create a new product. In our example I am just returning the received product. You usually would store that in a database or so.

I added the Route attribute and defined the route how I like. This is not necessary, but I like it this way, it gives me more control of setting up my routes. I also named the methods, so that it is clear what the method is doing. POST, GET, DELETE, UPDATE.

Now, lets consume our Restful api in our Angular Controller.

In our controller, i am getting the promise of our restful service with the angular $resource (A factory which creates a resource object that lets you interact with Restful server-side data sources).

First we create our product resource. With this in place, the $resource object gives us some default methods, which are case insensitive:

On our productResource, we can now call all of this methods. So lets

The first method gets all products, the second one just the one with id == 2. The two methods remove and delete have the same function and are working like the get method.

So, let’s see how we can create a new product.

I am calling the save method on my productResource with a JSON object and properties which my SampleProduct on the backend expects. But, since I am also sending the product back which was created, i want to show that maybe in a message on the ui. For that, we need to call the $promise.then function for our success return value, and the function(error) afterwards in case of an error.

Here we added a JSON object manually, we could also create a new js file where our DTO resides, for example this one

First we are checking that it is a instance of SampleDto, meaning that we called this function with the new keyword. Then i defined a private field, to show how you should do that in JS, because JS does not have private or public keywords to mark it correctly and then my 4 properties which my SampleProduct expects. Take care that the SampleDto file is included correctly in your project.

So, now lets refactor our save method a little bit to use our SampleDto:

With that approach you don’t have to type always the property name and in my eyes with OOP, a much cleaner way of doing it. So, now we have a DTO to reuse, would it make sense to be able to reuse also our resource object? Yes of course. For that we will create a angular factory.

I called my factory Sample. The return value is the same as in our controller, i just added here two custom methods. One for the Post and one for the Get, but the default ones are still available.

 

After including our Factory in our Controller, we can use it.

You see, my custom and the default methods work pretty the same. If you want to have more than one resource in your factory or just expose different names, a way you can do that is:

So, you can expose specific methods or the whole resource object. See also, i am exposing the $promise already, so no need to call that then in the controller. You can then just call the .then on the method.

So the last thing I will add here is, how we can customize our route a little bit with parameters:

 

Send and Receive JSON with Angular and Asp.NET Web Api 2
Tagged on:                 

Leave a Reply

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers:

Welcome Damir Kusar

Log in

Lost your password?
%d bloggers like this: