Asp.net mvc web application with asp.net web apis

Question

I am new to the Asp.Net MVC. I am doing asp.net web application. I have data layer which I want to be exposed from the MVC Web api only. For web api project i used entity framework as a model and for mvc application i am using entity classes. I am calling the web api from the view with jquery and perform all the operations.

Is that right approach or need to use some jquery framework. Or is there any projects available which uses asp.net web api's only. I warm up google for so many times but didn't find essential. Please assist me here.

Answer 1

You can use jQuery or any javascript framework you please to retrieve data from your API. You could even use raw javascript if you really wanted to. However, if most of your logic is going to live on the client, you'll probably want to look into some MVC/MVVM/MVP javascript library/framework to keep things organized.

A good place to start is the Single Page Application template that is built into Visual Studio 2013 and available for 2012. It uses .NET MVC to load up the HTML markup, styles, and scripts, and then uses Knockout.js to structure the application and send & retrieve data from a Web API controller located in the same app. It's also worth noting that you can grab templates that use other popular javascript frameworks like Ember, Angular, Backbone, Durandal, and more. If you'd prefer one of those frameworks over Knockout then download one of those templates and look through the code.

Answer 2

Without seeing any code, it sounds like you have the right idea. You can use any client side framework of your choice to interact with your Api Controllers (Knockout, Angular, Ember, Backbone) or you can use straight up jQuery.

Since you are new to ASP.NET Mvc, a little clarification on the differences between the traditional Mvc Controller and the new Api Controller seems in order. In traditional MVC the controllers works to select which view (UI) to display married to data (the model):

public ActionResult Index()
{
     var theData = serviceLayer.GetData();
     return View("Index", theData);
}

You can also return pure JSON data from a controller:

public JsonResult GetMyData()
{
     var theData = serviceLayer.GetData();
     return new JsonResult()
     {
          Data = theData
     };
}

This had the problem of making it difficult to determine the names of the endpoints that retrieve UI vs the endpoints that retrieve data. The Web Api is Microsoft's implementation of a RESTful framework. Instead of a controller with many different methods (Index(), GetSingle(), GetMany(), List(), DoSomethingElse(), DoAnotherThing(), etc.), the Api controllers usually contain only methods that correspond to the HTTP Verbs: GET, POST, PUT, and DELETE. The same endpoint can then be called differing only by the verb you are using. Take the following endpoint for example:

http://mydomain.com/api/customer/1234

Calling this endpoint will do the following for Customer with id=1234:

• GET will return the data
• PUT will update the data
• DELETE will delete the data

In addition to making it clearer for your own development team, the Api also makes it easier for you to expose your data to third parties. You would need to provide a root URL and a list of your objects and any developer would be able to use it. There are other things you would need to do such as implementing security tokens but I wanted to demonstrate the benefits of using an easily understood framework.