Call ASP.Net Web API service in a cross domain

In order to call ASP.Net Web API service, add an HTML page in your project. Add reference of JQuery. Your HTML page should look like below.

Two input buttons, one to get list of employees and one to clear the list. An unordered list to show the list of employees.

In the document ready event, write button click events as follows:

Here in this example, both the client and the Web API service are in the same project. So we can use the relative or full path for the controller in ajax call. But if client is in separate project and Web API service is in another project, then it is difficult to call the controller directly using relative or full path.

Calling ASP.Net Web API service in a cross domain using JQuery ajax:

Browsers allow web page to make ajax request only within the same domain. Browser’s security prevents making ajax calls to different domains. This is called same origin policy.

Below urls have same origin.

http://localhost:123/api/Employee

http://localhost:123/Employees.html .

Different origin, because port numbers are different:

http://localhost:123/api/Employees

http://localhost:456/Employees.html

Different origin, because protocols are different:

http://localhost:123/api/Employees

https://localhost:456/Employees.html

Different origin, because domains are different:

http://abc.com

http://abc.net.

For security reasons, browsers do not allow cross domain ajax request. There are two ways to get around with this.

·         JSONP (JSON with Padding)

·         CORS (Cros Origin Resource Sharing)

What is JSONP?

JSONP stands for JSON with Padding. All JSONP does is wraps a data in a function.

In order to allow JSONP to work, we need to install nuget Webcontrib.Formatting.JsonP.  Add below lines of code in WebApiConfig file in Register method

CORS (Cross Origin Resource Sharing):

To enable CORS, we need to install nugget Microsoft.AspNet.WebAPI.Cors package.  Add below lines of code in WebApiConfig file in Register method

FromBody and FromUri attributes in ASP.Net WebAPI

FromBody and FromUri attributes:

Take a look at the Put method we have defined already.

While executing this method from Fiddler, we pass the id parameter from the request uri and the employee parameter from request body.

When a request is issued, the data that we have in a request needs to be mapped to the parameters of the Put method in a controller. We can also pass the id parameter using query string by simply placing a question mark followed by name of the parameter, just like we do in plain ASP.Net.

Now let’s understand what Parameter Binding is. By default ASP .Net web API default parameter binding convention is:

• If the parameter is of simple type like int, Boolean, double, etc., Web API tries to get the value from uri. (either from route data or querystring).
• If the parameter is of complex type like Employee, Customer, Product, etc, Web API tries to get the value from the request body.

We can change this default convention by using FromBody and FromUri attributes.

public HttpResponseMessage Put([FromBody]int id, [FromUri]Employee employee)

• Use [FromBody] attribute to force Web API to get simple types from request body.
• Use [FromUri] attribute to force Web API to get the complex types from request uri i.e. from route data or querystring.

Look at the below image. We have specified the values for complex type Employee in the request uri.

Note that the name of the parameters should be same as that of the properties defined for the complex type. Here the parameters FirstName, LastName, Gender, Salary are same as that of the properties of the Employee type.

In the below images, we are forcing Web API to look for id parameter in the request body.

Custom method names in ASP.Net Web API

By default, the Http verb is mapped to a method in a controller that has the same name as the verb or starts with the verb. E.g. HTTP verb Get is mapped to Get(), GetEmployee() or GetSomething() methods.
If the method does not start with Get or not named Get, then ASP.Net Web API does not know which method in our controller is to be mapped to HTTP verb Get. It is going to fail with an error message “The requested resource does not support http method Get – Status code 405 Method Not Allowed”.
So in order to use custom name for a method we need to decorate the method with HttpGet attribute.

Use query string parameters in Web API:

For our example, we are considering Get method. Depending upon the value we specify for the query string parameter Gender, the Get method should return the data.

FromBody and FromUri:

If parameter is simple type like int, bool, double, etc. then Web API tried to get the values from the URI.

If parameter is of complex type like Customer, Employee, etc, then Web API tries to get the value from request body. This is the default behavior of Web API and called as parameter binding.

To change the default parameter binding process, use FromBody and FromUri attributes.

Use FromBody attribute to force Web API to read simple types from request body and use FromUri attribute to for Web API to read complex types from uri (i.e. from route data or query string).

Pass query string parameters to Web API:

Depending upon the value we provide for the querystring parameter, Get() method should return the data.

http://localhost/api/employees?gender=male

http://localhost/api/employees?gender=female

http://localhost/api/employees?gender=all

If invalid value is provided, then the service should return an error message.