Calling ASP.NET Web API Service In Same Domain Using AJAX

Introduction

This article explains how to call the ASP.NET Web API in same domain using AJAX in asimple and step by step way. We can deploy and use our Web API in the same domain as well as cross-domain.

Calling Web API in same domain

Web page and Web API should be hosted in the same domain or same origin. For example, if a web application is hosted on “http://test.com”, then, the Web API should also be hosted on “http://test.com”.

Steps for creating same domain

Steps 1

Open a new application and add Web API Solution. After opening ASP.NET Web API solution, add new Web API Controller.

Now, add a class in a Models folder for accessing data from Web API Controller to the web page. The added class and its properties look like the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebAPIsameDomain.Models
{
public class Customer
{
public int Id { set; get; }
public string CustomerName { set; get; }
public string Address { set; get; }
public string City { set; get; }
public string Pincode { set; get; }
}
}

Step 2

Assign customer details in customer list variable and add in “DemoController”.

namespace WebAPIsameDomain.Controllers
{
public class DemoController : ApiController
{
public IEnumerable<Customer> Get()
{
return new List<Customer>
{
new Customer{Id=1,CustomerName="Arun",Address="9th Street",City="Erode",Pincode="637204"},
new Customer{Id=2,CustomerName="Mohan",Address="Main Road",City="Namakkal",Pincode="637205"},
new Customer{Id=3,CustomerName="Prapbu",Address="SKV Street",City="Salem",Pincode="637206"},
new Customer{Id=4,CustomerName="Raja",Address="Raja Street",City="Chennai",Pincode="637207"},
new Customer{Id=5,CustomerName="Ravi",Address="SMV Street",City="Covai",Pincode="637208"},
new Customer{Id=6,CustomerName="Santhose",Address="SKM Street",City="Salem",Pincode="637209"},
new Customer{Id=7,CustomerName="Mugesh",Address="Main Road",City="Trichy",Pincode="637846"},
new Customer{Id=8,CustomerName="Mani",Address="Mani Street",City="Chennai",Pincode="637245"},
new Customer{Id=9,CustomerName="Sankar",Address="Sankar Street",City="Tiruchengode",Pincode="637273"},
new Customer{Id=10,CustomerName="Vignesh",Address="Main Road",City="Kondankattur",Pincode="637201"}
};
}
}
}

Step 3

Add new HTML page in your solution and add AJAX code for calling ASP.NET Web API service in HTML page. For calling Web Service in web page, add the below code in HTML page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script>
$(document).ready(function () {
var ulCustomers = $("#Customer");
$("#GetallData").click(function () {
$.ajax({
type : 'GET',
url: 'http://localhost:49352/api/Demo',
dataType: 'json',
success: function (data) {
ulCustomers.empty();
$.each(data, function (index,val) {
var name = val.CustomerName;
ulCustomers.append('<li>' + name + '</li>');
});
}
});
});
});
</script>
</head>
<body>
<input type="button" id="GetallData" value="Get All Data" />
<ul id="Customer"></ul>
</body>
</html>

Step 4

Now, build ASP.NET Web API and run the corresponding Controller. Check the Web API URL and results.

IN the same way, run the HTML page. You can see the output and URL of HTML page that looks like the below screenshot.

Now, we can see the origin of the ASP.NET API Service and web page by URL. Both start from same origin http://localhost:49352/.

http://localhost:49352/api/Demo - ASP.NET Web API service

http://localhost:49352/Customers.html - Web Page

In our Web page, we gave full URL path for calling the Web Service using AJAX.

We have no need to give full URL if both are in the same domain or origin, we can use a relative path for calling the service.

Step 5

Now, build and run the solution. When we click the button, we will see all customers' names there.

Conclusion

This article explained about calling ASP.NET Web API in the same origin using AJAX in step by step way. The next article will explain how to call ASP.NET Web API in cross-origin, using AJAX.

6 Comments

Join the conversation! Your thoughts help the community grow.

chirag bhatt9y ago
Very well documented. Thanks for sharing.
Sankar Bc9y ago
Good article Vignesh
Vishal Prajapati9y ago
Worth Reading.....
om kumar9y ago
Thanks for sharing!
Anu V9y ago
Nice article.. Thanks for sharing..
Sahil Sharma9y ago
Thanks for sharing