Using AJAX object with ASP.NET WEB API

2

Index

Stats

12,178 visits, 29,068 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 8 Dec, 2014. Last updated 12 Oct, 2020

Getting things ready... step 1of 4

Before we start we must make some adjusts, it will make things easier in the next steps ;)

Tip: You can download a template project at Tutorial Downloads with all code and packages you'll need to start coding ;) If you like to download it, jump to Step 6.

Preparing the project for cross-origin requests (CORS)

When we try to send data from Construct (that use the "localhost:5000" address) to our ASP.NET project (that is using a different address like "localhost:12345") the web browser will block our communication because of possible security risks.

Solution: Install the CORS package in our ASP.NET project for unlock the browsers blocking.

Installing CORS from NuGet Package Manager

1. Right click the project's name

2. Click Manage NuGet Packages...

3. Select Online at the left side of the screen and type "CORS" in the Search field at the right side of the screen

4. Select Microsoft ASP.NET Web API X.X Cross-Origin Support and click Install

Setting up CORS

Now, in the Solution Explorer panel, at the right side of the screen, open the App_Start folder and double click WebAPIConfig.cs

Open the WebAPIConfig.cs file and add the new code below in any place inside the "Register" method :

    // New code
    // Setting up the CORS
    var cors = new EnableCorsAttribute("[i]", "[/i]", "*");
    config.EnableCors(cors);

After that, add the using statement at the top of the file:

    using System.Web.Http.Cors;

Right here:

Your complete WebAPIConfig.cs file will looks like this:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net.Http;
    using System.Web.Http;
    using Microsoft.Owin.Security.OAuth;
    using Newtonsoft.Json.Serialization;
    using System.Web.Http.Cors;

    namespace MyGameName
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                // New code
                // Add it in any place inside the "Register" method
                var cors = new EnableCorsAttribute("[i]", "[/i]", "*");
                config.EnableCors(cors);

                // Web API configuration and services
                // Configure Web API to use only bearer token authentication.
                config.SuppressDefaultHostAuthentication();
                config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

                // Web API routes
                config.MapHttpAttributeRoutes();

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

Click Save in the toolbar or press Ctrl + Shift + S to save all.

Before continue...

Now, try to build the project by clicking BUID > Build Solution. If it fails, go back and revise your code.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!