How to add Web API to an existing ASP.NET MVC 4 Web Application project?

UPDATE 11/22/2013 - this is the latest WebApi package:

Install-Package Microsoft.AspNet.WebApi

Original answer (this is an older WebApi package)

Install-Package AspNetWebApi

More details.


The steps I needed to perform were:

  1. Add reference to System.Web.Http.WebHost.
  2. Add App_Start\WebApiConfig.cs (see code snippet below).
  3. Import namespace System.Web.Http in Global.asax.cs.
  4. Call WebApiConfig.Register(GlobalConfiguration.Configuration) in MvcApplication.Application_Start() (in file Global.asax.cs), before registering the default Web Application route as that would otherwise take precedence.
  5. Add a controller deriving from System.Web.Http.ApiController.

I could then learn enough from the tutorial (Your First ASP.NET Web API) to define my API controller.

App_Start\WebApiConfig.cs:

using System.Web.Http;

class WebApiConfig
{
    public static void Register(HttpConfiguration configuration)
    {
        configuration.Routes.MapHttpRoute("API Default", "api/{controller}/{id}",
            new { id = RouteParameter.Optional });
    }
}

Global.asax.cs:

using System.Web.Http;

...

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();

    RegisterGlobalFilters(GlobalFilters.Filters);
    WebApiConfig.Register(GlobalConfiguration.Configuration);
    RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Update 10.16.2015:

Word has it, the NuGet package Microsoft.AspNet.WebApi must be installed for the above to work.


As soon as you add a "WebApi Controller" under controllers folder, Visual Studio takes care of dependencies automatically;

Visual Studio has added the full set of dependencies for ASP.NET Web API 2 to project 'MyTestProject'.

The Global.asax.cs file in the project may require additional changes to enable ASP.NET Web API.

  1. Add the following namespace references:

    using System.Web.Http; using System.Web.Routing;

  2. If the code does not already define an Application_Start method, add the following method:

    protected void Application_Start() { }

  3. Add the following lines to the beginning of the Application_Start method:

    GlobalConfiguration.Configure(WebApiConfig.Register);


To add WebAPI in my MVC 5 project.

  1. Open NuGet Package manager console and run

    PM> Install-Package Microsoft.AspNet.WebApi

  2. Add references to System.Web.Routing, System.Web.Net and System.Net.Http dlls if not there already

  3. Right click controllers folder > add new item > web > Add Web API controller

  4. Web.config will be modified accordingly by VS

  5. Add Application_Start method if not there already

    protected void Application_Start()
{
    //this should be line #1 in this method
    GlobalConfiguration.Configure(WebApiConfig.Register);
}

  6. Add the following class (I added in global.asax.cs file)

    public static class WebApiConfig
{
     public static void Register(HttpConfiguration config)
     {
         // Web API routes
         config.MapHttpAttributeRoutes();

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

  7. Modify web api method accordingly

    namespace <Your.NameSpace.Here>
{
    public class VSController : ApiController
    {
        // GET api/<controller>   : url to use => api/vs
        public string Get()
        {
            return "Hi from web api controller";
        }

        // GET api/<controller>/5   : url to use => api/vs/5
        public string Get(int id)
        {
            return (id + 1).ToString();
        }
    }
}

  8. Rebuild and test

  9. Build a simple html page

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <script src="../<path_to_jquery>/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        var uri = '/api/vs';
        $(document).ready(function () {
            $.getJSON(uri)
            .done(function (data) {
                alert('got: ' + data);
            });

            $.ajax({
                url: '/api/vs/5',
                async: true,
                success: function (data) {
                    alert('seccess1');
                    var res = parseInt(data);
                    alert('got res=' + res);
                }
            });
        });
    </script>
</head>
<body>
....
</body>
</html>

Tags:

Asp.Net Mvc

Asp.Net Web Api

Visual Studio 2012

Asp.Net Mvc 4

Recent Posts