1. Create a new Project
2. Select "ASP.NET Web Application"
3. Select the template "Web API"
4. Goto Models and a new Class file
"Product.cs"
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
5. Right Click on Controllers and Select "Add New Controller"
6. Select
"Web API 2 Empty Controller"
7. Name it as "ProductsController"
using MvcAPIDemo.Models;
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "TV", Category = "Electronics", Price = 50000M },
new Product { Id = 2, Name = "Mobile", Category = "Electronics", Price = 10000M }
};
//api/products
public IEnumerable<Product> GetAllProducts()
{
return products;
}
//api/products/1
public IHttpActionResult GetProduct(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
8. Add a new HTML page into project
"Index.html"
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div>
<h2>All Products</h2>
<ul id="products" />
</div>
<div>
<h2>Search by ID</h2>
<input type="text" id="prodId" size="5" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
<script src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery-2.0.3.min.js"></script>
<script>
var uri = 'api/products';
$(document).ready(function () {
$.getJSON(uri)
.done(function (data) {
$.each(data, function (key, item) { $('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});
function formatItem(item) {
return item.Name + '₹' + item.Price;
}
function find() {
var id = $('#prodId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
</script>
</body>
</html>
2. Select "ASP.NET Web Application"
3. Select the template "Web API"
4. Goto Models and a new Class file
"Product.cs"
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
5. Right Click on Controllers and Select "Add New Controller"
6. Select
"Web API 2 Empty Controller"
7. Name it as "ProductsController"
using MvcAPIDemo.Models;
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "TV", Category = "Electronics", Price = 50000M },
new Product { Id = 2, Name = "Mobile", Category = "Electronics", Price = 10000M }
};
//api/products
public IEnumerable<Product> GetAllProducts()
{
return products;
}
//api/products/1
public IHttpActionResult GetProduct(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
8. Add a new HTML page into project
"Index.html"
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div>
<h2>All Products</h2>
<ul id="products" />
</div>
<div>
<h2>Search by ID</h2>
<input type="text" id="prodId" size="5" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
<script src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery-2.0.3.min.js"></script>
<script>
var uri = 'api/products';
$(document).ready(function () {
$.getJSON(uri)
.done(function (data) {
$.each(data, function (key, item) { $('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});
function formatItem(item) {
return item.Name + '₹' + item.Price;
}
function find() {
var id = $('#prodId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
</script>
</body>
</html>
