It is a framework that can serve on Http and broad range of clients like Mobile, Tablet and browsers.It is ideal platform to create REST full services on .NET framework.
Web API output can be in XML or in JSON format.
Example:
Step 1. Create Project with WEBAPI template.
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace WEBAPI.Controllers { public class ValuesController : ApiController { // GET api/values private static List items = new List { "item1", "item2", "item3", "item4" }; public IEnumerable GetList() { return items; } // GET api/values/5 public string GetItem(int id) { return items[id]; } // POST api/values public List Post(string value) { items.Add(value); return items; } // PUT api/values/5 public void Put(int id, [FromBody]string value) { } // DELETE api/values/5 public List Delete(int id) { items.Remove(items.Find((i=>i.ToString().Contains(id.ToString())))); return items; } } } Step 2: Create Action in Home Controller public ActionResult WebApiDemo() { return View(); }
Step 3: Attach View with above controller
@{ ViewBag.Title = "WebApiDemo"; }
WebApiDemo
Itenms
@section scripts { @*@Scripts.Render(“~/bundles/jquery”);*@
$(document).ready(function () {
$.getJSON("/api/Values", function (data) {
$.each(data,function(key,val){
var str=val;
$('
});
})
});
function find() {
var ind = $('#indItem').val();
// alert(ind);
$.getJSON("/api/Values/" + ind, function (data) {
var str = data;
$('#item').text(str);
})
}
function deletevalue() {
var ind = $('#indItem').val();
// alert(ind);
$.ajax("/api/Values/" + ind,
{
type:"DELETE",
contentType:"application/json",
dataType:"JSON",
success: function (data) {
alert('Deleted');
}
});
} }
Step 5: Run and See Out put
http://localhost:49371/Home/WebApiDemo/
How to perform CRUD in EF using Web API:
Example:
Step 1: First create two table employee and department table in database.
Step 2: Install Entity framework.
Step 3: Create edmx file and take department and employee table.
Step 4. Create Web API controller with read write scaffolding option.
Step 5: Now run and see output of API Controller(Employee)
Step 6: Add a action in previously created home controller and attach a view.
public ActionResult EmpDemo() { return View(); } Step: 7 Write following code at EmpDemo.cshtml @{ ViewBag.Title = "EmpDemo"; }
EmpDemo
All Employees
Add Employee
Name :
Salary:
Dateof Join
@section scripts {
$(document).ready(function () {
getAllEmployees();
});
function getAllEmployees() {
$.getJSON("/api/Employee/",
function (data) {
$("#items").text("");
$.each(data, function (key, val) {
var str = val.empid + " ," + val.empname + " ," + val.salary + " ," + val.isactive;
$('
})
})
}
function getemployee() {
var id = $("#empid").val();
$.getJSON("/api/Employee/" + id, function (val) {
var str = val.empid + " ," + val.empname + " ," + val.salary + " ," + val.isactive;
$("#item").text(str);
})
}
function DeleteEmployee() {
var ind = $('#empid').val();
// alert(ind);
$.ajax("/api/Employee/" + ind,
{
type: "DELETE",
contentType: "application/json",
dataType: "JSON",
success: function (data) {
//alert('Deleted');
getAllEmployees();
}
});
}
function AddEmployee() {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/api/Employee/",
data: JSON.stringify({
empid: 0,
empname: $("#emp_name").val(),
salary: $("#emp_salary").val(),
dateofjoin: $("#emp_doj").val(),
isactive: true,
deptid:1
}),
dataType: "JSON",
success: function (data) {
getAllEmployees();
}
});
}