WebApi Get Using jQuery.

There are many times when building web applications that we need to return data via a web API in asp.net. I have seen many posts on StackOverflow and ASP.NET with numerous different ways to achieve this, and developers still having problems.

So in this blog, I will show how you can make a web API request to an asp.net web API and return a 200 status with data.

WebApiConfig

To start, ensure that you have the WebApiConfig file added to your project.

using System.Web.Http;
namespace KendoDemo
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.MapHttpAttributeRoutes();

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

Application_Start()

Now ensure that the code below is in your Global.asax file as below.

using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace KendoDemo
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {  
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            
        }
    }
}

API Controller

Next for the web API, we need to create the API controller, and the code for this is below.

using System.Web.Http;

namespace KendoDemo.Controllers
{
    [RoutePrefix("api/web")]
    public class DemoController : ApiController
    {
        [Route("returnvalue")]
        [HttpGet]
        public IHttpActionResult Get()
        {
            return Ok(new {Name = "I'm the return value"});
        }
    }
}

As you can see, it's a straightforward web API controller with a RoutePrefix named 'api/web' and the route called 'returnvalue'.

If you have PostMan installed on your machine, then fire it up and enter the following: https://localhost:YourPortNUmber/api/web/returnvalue replacing YourPortNumber with the port on your computer. If all goes to plan, then it should make a GET request to your web API, and you will see something similar to the image below.

WebApi Get Using jQueryNow that we know it works in PostMan, we can create a simple jQuery file that does an ajax GET request to the web API and the code for that is below.
$(function() {
    $.ajax({
        contentType: "application/json",
        type: "GET",
        url: "/api/web/returnvalue/",
        success: function (data) {
            alert(data.Name);
            $("#getMessageResult").html(data.Name);
        }
        //Error logging would go here
    });
});

JQuery

Running all the code and viewing the jQuery in Chrome developer, you will see the data returned via the ajax call as the image below shows.

JQuery

Hopefully, if you followed along, then everything should have worked OK for you.