How does web API and MVC work together?

asp.net-mvc, asp.net-web-api

Solution

This picture below from the link explains clearly how MVC and Web Api work together:

Technically, you can call from MVC to Web API, but it is not really the best practice since:

Calling from MVC to Web API will across the network (distribution), this makes your application more complex.

Web Api is REST Api, it is not like WCF which is heavily SOAP Api (although WCF support REST Api). So, from JavaScript you can call the Web Api easier using ajax.

Problem

How does MVC and web API work together in an application? Are you supposed to use javascript binding (with knockout.js and ajax calls) and just use MVC for the actual container page? Or do you call web API from the MVC controller (like a WCF service layer)? The integration of MVC and web API just isn't clear to me. Should I use Web API if I regulary require HTML to be returned (i.e. I want to work with Partials)? I'd like to use web API so I can scale my app though (return HTML from one side, but remain with an API that can return/process XML)! Thanks for clearing it up :)

Original source