Front end ASP.NET MVC4 as one project, and an ASP.NET Web API as another project in same solution - how to call WebAPI from front end?

Question

I have an ASP.NET MVC4 front end as one project in my solution, and a separate ASP.NET Web API as another project in the same solution. The Web API will contain all of my CRUD operations.

2 questions

1. How do I call my Web API from my front end to perform CRUD operations? I have my entity data model defined in my Web API project, and I will need to bind my front end views to it, how would I do that?
2. Once this is deployed to my web servers, the front end will reside on one server, and the Web API will reside on another server (the server that holds most of our web services). So, I guess along the same lines, how would I call the Web API from my front end once deployed? I understand Web API's are simply called with an HTTP request, but in terms of passing my models (which are defined in my Web API project) into my Views (in my front end project), how can I do this?

Answer 1

While Kevin is right, I did this the non-Ajax way. Keep in mind that I am working with JSON data, so this is centered around JSON.

In your controller page, remove anything that has to do with DbContext, Entity Framework, etc. The reason is by default, the controller will want to perform CRUD operations by calling the DbContext, and we don't want this. We want to call the WebAPI instead to do this.

First and foremost, declare some member variables in your controller. The rest of your controller will utilize these:

    HttpClient client = new HttpClient();
    HttpResponseMessage response = new HttpResponseMessage();
    Uri contactUri = null;

1. In your controller, create a constructor for your controller, as such:

   public ContactController()
   {
       // set base address of WebAPI depending on your current environment
       client.BaseAddress = new Uri("http://server/YourAPI/");
   
       // Add an Accept header for JSON format.
       client.DefaultRequestHeaders.Accept.Add(
           new MediaTypeWithQualityHeaderValue("application/json"));
   }
   

2. Replace the Index action's code with something like the following. Note that the only relevant pieces are the client.GetAsync() call and the var contacts assignment. Everything else is not necessary for the context of this problem. The value inside the client.GetAsync() should be the name of your controller, prepended by any custom routing you set up in your WebApiConfig.cs - in my case, I added the api part in my route to distinguish between API calls and normal calls:

   public ActionResult Index()
   {
       response = client.GetAsync("api/contact").Result;
       if (response.IsSuccessStatusCode)
       {
           var contacts = response.Content.ReadAsAsync<IEnumerable<Contact>>().Result;
           return View(contacts);
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

3. Replace the Create action (the HttpPost action) with something like the following. Again, the only important piece is the client.PostAsJsonAsync() part - this is what calls the WebAPI's POST action which takes care of, in my case, inserting a new record into the database:

   [HttpPost]
   [ValidateAntiForgeryToken]
   public ActionResult Create(Contact contact)
   {
       // Create a new product
       response = client.PostAsJsonAsync("api/contact", contact).Result;
       if (response.IsSuccessStatusCode)
       {
           return RedirectToAction("Index");
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

4. Replace the Edit action (the non-HttpPost action) with something like the following. This was a little tricky because in order to edit, you had to retrieve the record first, so basically, the HttpPost version of Edit will contain somewhat similar code, with an additional line of code that performs the edit POST (PUT). Below, we're getting the response from the WebAPI by passing it a specific record ID. So, just like for Index (GET), we are doing the same thing only passing in the ID so we only get back one record. Then, we cast the response to an actual object that can be operated on in the View:

   public ActionResult Edit(int id = 0)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       Contact contact = response.Content.ReadAsAsync<Contact>().Result;
       if (contact == null)
       {
           return HttpNotFound();
       }
       return View(contact);
   }
   

5. Replace the Edit action (the HttpPost action) with something like the following. Below, we're getting the record to be edited by calling client.GetAsync() and passing in the primary key as a parameter (contact_id). Then, we're getting the RequestUri from that response and saving it. Then, we're calling client.PutAsJsonAsync() and passing in the Uri.PathAndQuery (what we just saved) as well as the object to be edited.

   [HttpPost]
   [ValidateAntiForgeryToken]
   public ActionResult Edit(Contact contact)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", contact.contact_id)).Result;
       contactUri = response.RequestMessage.RequestUri;
       response = client.PutAsJsonAsync(contactUri.PathAndQuery, contact).Result;
       if (response.IsSuccessStatusCode)
       {
           return RedirectToAction("Index");
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

6. Replace the Delete action (the non-HttpPost action) with something like the following. So again, we're getting the record from the database by simply calling client.GetAsync() and casting it to an actual object my app knows of.

   public ActionResult Delete(int id = 0)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       Contact contact = response.Content.ReadAsAsync<Contact>().Result;
   
       if (contact == null)
       {
           return HttpNotFound();
       }
       return View(contact);
   }
   

7. Finally, replace the Delete action (the HttpPost action) with something like the following. Again, we're doing something similar to that of the Edit action. We are getting the record to be deleted, casting it to an object, and then passing that object into a client.DeleteAsync() call, as shown below.

   [HttpPost, ActionName("Delete")]
   [ValidateAntiForgeryToken]
   public ActionResult DeleteConfirmed(int id)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       contactUri = response.RequestMessage.RequestUri;
       response = client.DeleteAsync(contactUri).Result;
       return RedirectToAction("Index");
   }
   

Answer 2

You can call your Web API from the client using jQuery ajax method. But since you are calling from a site other than where the Web API is deployed you will have to use JSONP, instead of JSON. Take a look at this QA to see how you use JSONP with Web API. Your models will be passed as JSON which you will have to render on the client side, instead of using Razor to render it on the server side. I would use something like Knockout to create a View Model on the client that will bind your model to the HTML elements on the client.