ASP.NET MVC 4 Application Calling Remote WebAPI

I've created a couple ASP.NET MVC applications in the past, but I've never used WebAPIs before. I'm wondering how I could create a simple MVC 4 app that does simple CRUD stuff via WebAPI instead of through a normal MVC controller. The trick is that the WebAPI should be a separate solution (and, in fact, could very well be on a different server/domain).

How do I do that? What am I missing? Is it just a matter of setting up routes to point to the WebAPI's server? All the examples I've found showing how to consume WebAPIs using an MVC application seem to assume the WebAPI is "baked in" to the MVC application, or at least is on the same server.

Oh, and to clarify, I'm not talking about Ajax calls using jQuery... I mean that the MVC application's controller should use the WebAPI to get/put data.

Solution 1:

You should use new HttpClient to consume your HTTP APIs. What I can additionally advise you to make your calls fully asynchronous. As ASP.NET MVC controller actions support Task-based Asynchronous Programming model, it is pretty powerful and easy.

Here is an overly simplified example. The following code is the helper class for a sample request:

public class CarRESTService {

    readonly string uri = "http://localhost:2236/api/cars";

    public async Task<List<Car>> GetCarsAsync() {

        using (HttpClient httpClient = new HttpClient()) {

            return JsonConvert.DeserializeObject<List<Car>>(
                await httpClient.GetStringAsync(uri)    
            );
        }
    }
}

Then, I can consume that through my MVC controller asynchronously as below:

public class HomeController : Controller {

    private CarRESTService service = new CarRESTService();

    public async Task<ActionResult> Index() {

        return View("index",
            await service.GetCarsAsync()
        );
    }
}

You can have a look at the below post to see the effects of asynchronous I/O operations with ASP.NET MVC:

My Take on Task-based Asynchronous Programming in C# 5.0 and ASP.NET MVC Web Applications

Solution 2:

Thanks everyone for the responses. @tugberk led me down the right path, I think. This worked for me...

For my CarsRESTService helper:

public class CarsRESTService
{
    readonly string baseUri = "http://localhost:9661/api/cars/";

    public List<Car> GetCars()
    {
        string uri = baseUri;
        using (HttpClient httpClient = new HttpClient())
        {
            Task<String> response = httpClient.GetStringAsync(uri);
            return JsonConvert.DeserializeObjectAsync<List<Car>>(response.Result).Result;
        }
    }

    public Car GetCarById(int id)
    {
        string uri = baseUri + id;
        using (HttpClient httpClient = new HttpClient())
        {
            Task<String> response = httpClient.GetStringAsync(uri);
            return JsonConvert.DeserializeObjectAsync<Car>(response.Result).Result;
        }
    }
}

And then for CarsController.cs:

public class CarsController : Controller
{
    private CarsRESTService carsService = new CarsRESTService();

    //
    // GET: /Cars/

    public ActionResult Index()
    {
        return View(carsService.GetCars());
    }

    //
    // GET: /Cars/Details/5

    public ActionResult Details(int id = 0)
    {
        Car car = carsService.GetCarById(id);

        if (car == null)
        {
            return HttpNotFound();
        }
        return View(car);
    }
}

Solution 3:

You can use WCF to consume the service. Like so:

[ServiceContract]
public interface IDogService
{
    [OperationContract]
    [WebGet(UriTemplate = "/api/dog")]
    IEnumerable<Dog> List();
}

public class DogServiceClient : ClientBase<IDogService>, IDogService
{
    public DogServiceClient(string endpointConfigurationName) : base(endpointConfigurationName)
    {
    }

    public IEnumerable<Dog> List()
    {
        return Channel.List();
    }
}

And then you can consume it in your controller:

public class HomeController : Controller
{
    public HomeController()
    {
    }

    public ActionResult List()
    {
        var service = new DogServiceClient("YourEndpoint");
        var dogs = service.List();
        return View(dogs);
    }
}

And in your web.config you place the configuration for your endpoint:

<system.serviceModel>
  <client>
    <endpoint address="http://localhost/DogService" binding="webHttpBinding"
    bindingConfiguration="" behaviorConfiguration="DogServiceConfig" 
    contract="IDogService" name="YourEndpoint" />
  </client>
  <behaviors>
    <endpointBehaviors>
      <behavior name="DogServiceConfig">
        <webHttp/>
      </behavior>
    </endpointBehaviors>
  </behaviors>
</system.serviceModel>

Solution 4:

http://restsharp.org/ is the answer to your questions. I am currently using it in an application which has similar structure.

But more generally using WebAPI is just posting and requesting data how to process is up to you. You can even use standard WebRequest and JavascriptSerializer.

Cheers.

Solution 5:

In this case, you can use HttpClient to consume Web API from your controller.