Pages

Thursday, August 28, 2014

In this post let’s see how we can directly upload files to Amazon S3 which are sent through ASP.NET Web API service via a form object by client side. The nice thing here is we are not going to save the files locally while the upload is happening. File will be directly uploaded to Amazon S3.

If you are not familiar with AngularJS, you can just ignore the above part. Here basically what I have done is sending a POST request to my ASP.NET Web API service including the file I need to upload and some additional data.

Now let’s move into my ASP.NET Web API project. There I have a API Controller named “EmployeesController” and there I have a action named “Upload”.

After getting the stream of the file, I have a helper class named “StorageService”, which is used to upload the file into Amazon S3. Amazon S3 SDK for .NET can upload files via a stream. After uploading is completed, I am returning the uploaded files’ Url.

Sunday, August 10, 2014

In this post let’s see how we can use AngularJS to consume RESTful ASP.NET Web API services. Please note that I am not going to go deeper in ASP.NET Web API here. Even though ASP.NET Web API is related to our subject today, it should be discussed under it’s own separate topic. Today I assume that you have some knowledge in working with ASP.NET Web API. (If you are not, go and have some quick lessons on Learn About ASP.NET Web API)

So now I have a ASP.NET Empty project all configured with AngularJS. Let’s add a new project to the solution. I am right clicking on the solution and clicking on Add –> New Project.

New Project

I am giving a name and clicking on OK. From the next dialog window, I am selecting Web API and clicking on OK.

Web API

Once the project is created, I am going to do some configuration changes in the project.

First right click on the AngularJSSample project and click on Properties. There under Web tab, copy the Project Url.

Project URL

Now right click on the Web API project and click on Properties. There on the Web tab change the Project Url as follows.

Project URL

If you are prompted for creating a Virtual Directory, Click on OK. Basically what I have done here is making our ASP.NET Web API run on the same host under a different virtual directory. For example, if the AngularJSSample project Url is “http://localhost:2222”, the Web API project Url will be “http://localhost:2222/api”.

Now let’s start modifying the Web API project. First Let’s add a my favorite “Employee” model to the project. Right click on the “Model” folder and add a new class named “Employee”.

using System.Collections.Generic;

namespace WebAPI.Models

{

publicclass Employee

{

publicint EmployeeId { get; set; }

publicstring FirstName { get; set; }

publicstring LastName { get; set; }

publicstatic List<Employee> GetEmployees()

{

returnnew List<Employee>()

{

new Employee()

{

EmployeeId=1,

FirstName="Jaliya",

LastName="Udagedara"

},

new Employee()

{

EmployeeId=2,

FirstName="John",

LastName="Smith"

},

new Employee()

{

EmployeeId=3,

FirstName="Jane",

LastName="Smith"

}

};

}

}

}

Now in the Web API project, I am clicking on the Controllers folder and Add –> Controller. There I am selecting Web API 2 Controller – Empty.

Web API 2 Controller - Empty

I am giving the Controller names as “EmployeesController”.

EmployeesController

Here for demonstration purposes, my “EmployeesController” would be exposing data which is returned by “Employee.GetEmployees()” method. In real implementations, you can be retrieving data from databases etc.

I am writing the following method to return all employees.

using System.Collections.Generic;

using System.Linq;

using System.Web.Http;

using WebAPI.Models;

namespace WebAPI.Controllers

{

publicclass EmployeesController : ApiController

{

[HttpGet]

[Route("employees")]

public IEnumerable<Employee> GetEmployees()

{

return Employee.GetEmployees().AsEnumerable();

}

}

}

Here I have decorated my Action with HttpGet and Route attributes. These attributes are for saying when you request a HttpGet on "http://localhost:2222/api/employees", call the GetEmployees() method. Here you don't actually have to decorate the method with Route attribute unless you want to mention a custom route. Default route would be Controllers name without the Controller part of it (EmployeesController -> Route would be "http://localhost:2222/api/employees"). These of course, comes with ASP.NET Web API theories and practices.

Now run the Web API project, and navigate to Employees controller through the url. If all is good, you should be able to see the following.

Result

Now our task for today is consuming the above ASP.NET Web API REST service using AngularJS. In my Web API project, I will have a service with a HttpGet which will return me all the employees.

Let’s move into the AngularJSSample project. I am going to show all the employees in my home page. So let’s go to “App –> controllers” and start modifying the “homeController.js”.

Here I have used AngularJS Service named “employeeService” to call ASP.NET Web API. There I have a method named getEmployees() which is responsible for calling the Web API and setting the values in $scope object which was passed in as a parameter.

In my “homeController”, I am injecting the “employeeService” and making use of it. Then let’s modify the home template which was located in “App/views”, to show the values retrieved from the service.

<divng-controller="homeController">

<h1>{{message}}</h1>

<divng-repeat="employee in employees">

<label>{{employee.EmployeeId}}</label>

<label>{{employee.FirstName}}</label>

<label>{{employee.LastName}}</label>

</div>

</div>

Here I have used the ng-repeat directive which kind of acts as a foreach in C#. Now when I run the "AngularJSSample" project, I can see the following.

Result

Here I have only wrote about AngularJS querying values from ASP.NET Web API through HttpGet. It’s up for you to discover how AngularJS makes other operations such as HttpPost etc. on RESTful services.