Hosting Web API in WPF Application and consuming the API with VUE (AJAX) PART I

This article explains a simple way to host a ASP .net WEB API in a WPF Application. Shall you find any difficulites using it, feel free to comment on this post and we will be happy to help you out.

1. Create normal WPF Application
2. Install Microsoft.AspNet.WebApi.Owin package from Nuget

3. Install Microsoft.AspNet.WebApi.OwinSelfHost package

4. Install Microsoft.Owin.Cors package

5. In package console run
Install-Package Microsoft.AspNet.WebApi.Cors

6. Configure Startup.cs file as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Owin;
using System.Web.Http;

namespace TestWinApiHostingInWPF
{
    public class Startup
    {
// This code configures Web API. The Startup class is specified as a type
        // parameter in the WebApp.Start method.
        public void Configuration(IAppBuilder appBuilder)
        {
            // Configure Web API for self-host. 
            HttpConfiguration config = new HttpConfiguration();
            config.EnableCors();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.MapHttpAttributeRoutes();
               appBuilder.UseWebApi(config);
               Owin.CorsExtensions.UseCors(appBuilder,  
               Microsoft.Owin.Cors.CorsOptions.AllowAll);

        }
        }
}

7. In API Controller class ADD class Attribute 
    [EnableCors(origins: "*", headers: "*", methods: "*")]

Like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;


namespace TestWinApiHostingInWPF
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class ValuesController: ApiController
    {
        // GET api/values 
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5 
        public string Get(int id)
        {
            return "value";
        }

        //// POST api/values 
        //public void Post([FromBody]string value)
        //{
        //}

        //// PUT api/values/5 
        //public void Put(int id, [FromBody]string value)
        //{
        //}

        //// DELETE api/values/5 
        //public void Delete(int id)
        //{
        //}

    }
} 
8. Now run the application and all types of requests will be possible. To limit the 
request origin just set the origin source in EnableCorse Attribute of the api controller


Almost the same steps can be applied to standard WEBApi Project!!!