Add Web Api controllers to an existing ASP.NET 4 web application

Following the steps from this question How to add Web API to an existing ASP.NET MVC 4 Web Application project? , I have added web api support to my application.

In my original scenario I have the following web mvc controller:

public class FranchiseController : Controller
    {


        public ActionResult List()
        {
            return View();
        }



        [DataContext]
        public ActionResult GetAllFranchises()
        {
            var franchiseInfoViewModelList = new List<FranchiseInfoViewModel>();

            var franchiseInfoList = _franchiseService.GetAll();

            foreach (var franchiseInfo in franchiseInfoList)
            {
                franchiseInfoViewModelList.Add(new FranchiseInfoViewModel(franchiseInfo, p => p.IsImportant));
            }

            var jsonNetResult = new JsonNetResult
            {
                Formatting = Formatting.Indented, 
                Data = franchiseInfoViewModelList
            };

            return jsonNetResult;
        }
    }

When the user navigates to the List view, I am calling

 $.getJSON("/franchise/GetAllFranchises")
                .done(function (data) {

                });

to go to the GetAllFranchises action method and return the json data. So far so good.

I have created the following web api controller:

public class FranchiseController : ApiController
    {
        public IEnumerable<FranchiseInfoViewModel> GetAllFranchises()
        {
            var allFranchises = new List<FranchiseInfoViewModel>();

            var franchiseInfoList = _franchiseService.GetAll();

            foreach (var franchiseInfo in franchiseInfoList)
            {
                allFranchises.Add(new FranchiseInfoViewModel(franchiseInfo, p => p.IsImportant));
            }

            return allFranchises;
        }
    }

and I am trying to get to its action method like this:

$.getJSON("api/franchise")
                .done(function (data) {

                });

I am getting 404 error and the app is trying to reach the following url:

/Franchise/api/franchise

instead of api/franchise.

Global Asax:

protected void Application_Start()
        {
            Log.StartSession();
            ElmahExtension.SetCurrentApplication(this);

            ViewEngines.Engines.Add(new OmegaViewEngine());
            AreaRegistration.RegisterAllAreas();

            SerializerConfig.Register(GlobalConfiguration.Configuration);
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            AuthConfig.RegisterAuth();
            Bootstrapper.Initialise();
            FluentValidationModelValidatorProvider.Configure();

        }

Default route:

public static void Register(HttpConfiguration config)
        {
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

In my Controllers folder I have my web mvc controller:

Controller\FranchiseController

and I have made a new folder WebAPI to hold my web api controller

Controller\WebAPI\FranchiseController

What am I doing wrong ? Thanks!