I have an 100% javascript application inside my ASP.NET WebAPI project. This application consumes all the data from my API methods.
Now, I have been requested to create a simple portal built in Razor and HTML also inside my WebAPI project (so like a MVC project).
So I have created a folder under "Controllers" folder named "Portal" where Im placing all my portal exclusive controllers.
Here is the Controllers structure folders:

This is my Razor web application views structure:

So when I run the application I can see the Login page view (under "Account" folder). When I click my Login button, I call my CommonController (Portal) to render a Left menu but I get the error:

I guess because I have 2 CommonControllers, but 1 is for serving my javascript application and the other is for my Portal application.
The line in my Index.cshtml that calls the Common controllers is:
<div class="page-header page-header-blue">
@Html.Action("Header", "Common")
<h1><i class="icon-bar-chart"></i> Dashboard</h1>
</div>
In my WebApiConfig.cs I have the following Web Api Route:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}"
);
So I don't know how to tell it that I want to call
CommonControllerthat is under "Portal" folder.
Any clue or advice on how to do this and the best practice?
UPDATE:
I have create other route for my Portal controllers:
config.Routes.MapHttpRoute(
name: "DefaultMvc",
routeTemplate: "portal/{controller}/{action}"
);
Seems to work but in my index.cshtml calls : @Html.Action("Header", "Common") how can I tell the action to call Portal Common and not just Common ?