How to Implement Separate Projects for ASP.NET MVC 4 and ASP.NET Web API

Question

I'm working on a large ASP.NET MVC/Web API project and wanted to separate out the controllers into their own project (as described in this article http://msdn.microsoft.com/en-us/magazine/jj190803.aspx). The difference is that I'm needing to separate out the ASP.NET Web API controllers, not “normal” MVC controllers.

In my solution, I have two separate projects:

• One ASP.NET MVC 4 project for serving up HTML/CSS/JavaScript (note I'm not using any standard MVC controllers, this project is all client/browser-side code that makes jQuery/Ajax calls to the Web API)
• One ASP.NET Web API project (this project is only the ApiController(s), no views, HTML, etc., I'm still wanting the Web API project to be hosted in IIS, not self-hosted)

Anyway, I’ve seen other posts and such that haven’t really explained my exact situation, and I'm having trouble getting this solution working.

How can I break out my Web API controllers into their own separate project and use them from my HTML/JavaScript code in my separate MVC project? And, how do I call the API’s endpoints from my JavaScript/jQuery code in the separate MVC project?

Thanks.

Answer 1

Since your Web Api and MVC are in different projects and probably they will run in different domains making the communication little difficult from client-side beause of cross-domain issue.

Though you can try JSONP or CORS but they are not going to be much useful (one is a hack and the other is not widely supported in browsers) and so you have to create wrapper MVC controllers in your MVC project that will talk to the Web Api through HttpClient class.

Your javascript will make calls to your MVC controllers and this way you can avoid the cross domain issues.