Introduction
In this article we will see some important things in the Web API. It provides the output in XML or JSON format and we can also search records by ID. This articles describes the scalable architecture for building the services that build on the HTTP. Web API is the extensible framework for creating HTTP services in the ASP.NET.
Use the following procedure to start the application.
Step 1
Create application using the following:
- Start Visual Studio 2013.
- From Start Window Select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and then select "ASP.NET MVC4 Web Application".
![Select MVC4]()
- Click on the "OK" button.
- From the MVC4 project window select "Web API".
![Select Web API]()
- Click on the "OK" button.
Step 2
Now we add the model class to the application; we can say that it is the data in our application. We pass the HTTP message to the server then the HTTP server serializes the request to the model to JSON or XML.
- In the Solution Explorer.
- Right-click on the Model Folder.
- Select "Add" -> "Class".
- Select "Installed" -> "Visual C#"-> and select class.
![Add Model class]()
- Click on the "OK" button.
Add the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace APPWeb.Models
{
public class Cricketer
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public double Weight { get; set; }
public double Height { get; set; }
public int RunScored { get; set; }
}
}
Step 3
Use the following procedure to add the Controller.
- In the "Solution Explorer".
- Right-click on the "Controller folder".
- Select "Add" -> "Controller".
- Select "API Controller" from the template.
![Add API Controller]()
- Click on the "Add" button.
Add the following code:
using APPWeb.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace APPWeb.Controllers
{
public class CricketersController : ApiController
{
Cricketer[] cricketers = new Cricketer[]
{
new Cricketer {
ID=1,
FirstName = "Sachin",LastName="Tendulkar", Height=1.85,
Weight=85,RunScored=23},
new Cricketer{
ID=2,
FirstName = "Rahul",LastName="Dravid", Height=1.89,
Weight=89, RunScored=2},
new Cricketer {
ID=3,
FirstName = "Virat",LastName="Kohli", Height=1.72,
Weight=73, RunScored=27},
};
public IEnumerable<Cricketer> GetAllPlayers()
{
return cricketers;
}
public Cricketer GetCricketerById(int id)
{
var cricketer = cricketers.FirstOrDefault((f) => f.ID == id);
if (cricketer == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return cricketer;
}
}
}
All the data is stored in an array and we have declared two methods in the controller class, one is GetPlayers() that fetches all the player's names from the controller. And another is GetCricketerById(int Id) that fetches a single cricketer by the ID.
Step 4
Now we will create a small JavaScript client application, a JavaScript client that consumes the client order. And we will modify it in the index.cshtml code.
![index page]()
Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ASP.NET Web API</title>
<link href="Content/Site.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("api/cricketers/",
function (Data)
$.each(Data, function (key, val) {
var str = val.FirstName + ': $' + val.LastName;
$('<li/>', { text: str })
.appendTo($('#cricketers'));
});
});
});
function show() {
var Id = $('#itId').val();
$.getJSON("api/cricketers/" + Id,
function (Data) {
var str = Data.FirstName + ': $' + Data.LastName;
$('#cricketers').text(str);
})
.fail(
function (jqXHR, textStatus, err) {
$('#cricketers').text('Error: ' + err);
});
}
</script>
</head>
<body id="body">
<div class="main">
<div>
<h1>All cricketers</h1>
<ul id="cricketers" />
</div>
<div>
<label for="itId">ID:</label>
<input type="text" id="itId" size="5" />
<input type="button" value="Search" onclick="show();" />
<p id="cricketer" />
</div>
</div>
</body>
</html>
Find the record by ID.
![find record by ID]()
Step 5
Now we will execute the application using Fiddler. It displays the record in JSON format.
![JSON format Result]()
We can also see the results in XML format.
![XML Output]()