Understanding Web API [Simple Program]

  1. Open Web Api Project  
  2.   
  3. Create a Employee class Mode  
  4.   
  5.  public class EmployeeClass  
  6.     {  
  7.         public int ID { get; set; }  
  8.         public string Name { get; set; }  
  9.         public string Email { get; set; }  
  10.         public int Age { get; set; }  
  11.     }  
  12.   
  13. Create a Controller [Home Controller]  
  14.   
  15. public class HomeController : ApiController  
  16.     {  
  17.       
  18.         List<EmployeeClass> obj = new List<EmployeeClass>() {   
  19.         new EmployeeClass { ID = 1,Age=25,Email="[email protected]",Name="Sachin" },  
  20.            new EmployeeClass { ID = 2, Age = 25, Email = "[email protected]", Name = "Kholi" }  
  21.         };  
  22.          
  23.         public IEnumerable<EmployeeClass> GetallDetails()  
  24.         {  
  25.   
  26.             return obj;  
  27.         }  
  28.   
  29.         // GET: api/Home/5  
  30.         public IEnumerable<EmployeeClass> Get(int id, int Age, string Email,string Name,string CmdName)  
  31.         {  
  32.             if (CmdName=="Insert")  
  33.             {   
  34.             id = obj.Count() + 1;  
  35.             obj.Add(new EmployeeClass { ID = id, Age = Age, Email = Email, Name = Name });  
  36.              
  37.             }  
  38.              if(CmdName=="Delete")  
  39.             {  
  40.                  var t=(from x in obj where x.ID==id select x).FirstOrDefault();  
  41.                  obj.Remove(t);  
  42.             }  
  43.              if (CmdName == "Update")  
  44.              {  
  45.   
  46.                  var t = (from x in obj where x.ID == id select x).FirstOrDefault();  
  47.                  obj.Remove(t);  
  48.                  t.Name = Name;  
  49.                  t.Age = Age;  
  50.                  t.Email = Email;  
  51.                  t.ID=id;  
  52.                  obj.Add(t);  
  53.              }  
  54.              return obj;  
  55.         }  
  56.   
  57.     }  
  1. Open an HTML Page[Add boot Strap and jquery plugin]  
  2.   
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.     <link href="Content/bootstrap.css" rel="stylesheet" />  
  7.     <script src="Scripts/jquery-1.9.1.js"></script>  
  8.     <title></title>  
  9.     <style type="text/css">  
  10.         .textbx {  
  11.     min-width: 0;  
  12.     width: 200px;  
  13.     display: inline;  
  14. }  
  15.   .label  
  16.   {  
  17.  min-width: 0;  
  18.     width: 110px;  
  19.     height:30px;  
  20.   }  
  21.   div {  
  22.   padding-right: 10px;  
  23.   padding-left: 10px;  
  24. }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28.     <div class="container">  
  29.         <div class="page-header">  
  30.             <h1>  
  31.                 <small>Insert Details</small>  
  32.             </h1>  
  33.         </div>  
  34.         <div class="col-sm-12 divider" >  
  35.             <span class="label label-default col-sm-4">Name</span>  
  36.             <input type="text" class="form-control textbx col-sm-8" id="Name">  
  37.         </div>  
  38.         <div class="col-sm-12">  
  39.             <span class="label label-default col-sm-4">Age</span>  
  40.             <input type="text" class="form-control textbx col-sm-8" id="Age">  
  41.         </div>  
  42.         <div class="col-sm-12">  
  43.             <span class="label label-default col-sm-4">Email</span>  
  44.             <input type="text" class="form-control textbx col-sm-8" id="Email">  
  45.         </div>  
  46.         <div class="col-sm-12">  
  47.             <span class="label label-default col-sm-4">ID</span>  
  48.             <input type="text" class="form-control textbx col-sm-8" id="ID">  
  49.         </div>  
  50.         <button type="button" class="btn btn-primary" onclick="InsertDetails();">Insert</button>  
  51.   
  52.         <button type="button" class="btn btn-primary" onclick="UpdateDetails();">Update</button>  
  53.   
  54.         <button type="button" class="btn btn-primary" onclick="DeleteDetails();">Delete</button>  
  55.   
  56.     </div>  
  57.   
  58.      
  59.     <table class="table table-bordered">  
  60.         <thead>  
  61.             <tr>  
  62.                 <th>ID</th>  
  63.                 <th>Name</th>  
  64.                 <th>Age</th>  
  65.                 <th>Email</th>  
  66.             </tr>  
  67.         </thead>  
  68.         <tbody id="getvalues">  
  69.             </tbody>  
  70.                             </table>  
  71.           
  72. </body>  
  73. </html>  
  74. <script type="text/javascript">  
  75.     $(document).ready(function () {  
  76.         var Url = "api/Home";  
  77.         AjaxGet(Url)  
  78.     });  
  79.   
  80.     function AjaxGet(URL) {  
  81.         var getid =$("#getvalues");  
  82.         $.getJSON(URL)  
  83.         .done(function (data) {  
  84.             $.each(data, function (key, item) {  
  85.               //  debugger;  
  86.                 getidgetid = getid.append('<tr>');  
  87.                 
  88.                     getid.append('<td>' + item.ID + '</td>');  
  89.                     getid.append('<td>' + item.Name + '</td>');  
  90.                     getid.append('<td>' + item.Age + '</td>');  
  91.                     getid.append('<td>' + item.Email + '</td>');  
  92.                   
  93.                 getidgetid = getid.append('</tr>');  
  94.                 
  95.             });  
  96.         });  
  97.     }  
  98.     function InsertDetails()  
  99.     {  
  100.         var id = 0;  
  101.         var Age = $("#Age").val();  
  102.         var Email = $("#Email").val();  
  103.         var Name = $("#Name").val();  
  104.         debugger;  
  105.         var Url = 'api/Home?'  
  106.         UrlUrl = Url + "id=" + 0 + "&Age=" + Age + "&Email=" + Email + "&Name=" + Name + "&CmdName=" + "Insert";  
  107.         SampleAjaxPost(Url);  
  108.     }  
  109.     function SampleAjaxPost(URL)  
  110.     {  
  111.         var getid = $("#getvalues");  
  112.         getid.html("");  
  113.         $.getJSON(URL)  
  114.         .done(function (data) {  
  115.             $.each(data, function (key, item) {  
  116.                 debugger;  
  117.                 getidgetid = getid.append('<tr>');  
  118.                  
  119.                     getid.append('<td>' + item.ID + '</td>');  
  120.                     getid.append('<td>' + item.Name + '</td>');  
  121.                     getid.append('<td>' + item.Age + '</td>');  
  122.                     getid.append('<td>' + item.Email + '</td>');  
  123.                  
  124.                 getidgetid = getid.append('</tr>');  
  125.             });  
  126.         });  
  127.     }  
  128.     function UpdateDetails() {  
  129.         var id = 0;  
  130.         var Age = $("#Age").val();  
  131.         var Email = $("#Email").val();  
  132.         var Name = $("#Name").val();  
  133.         var ID = $("#ID").val();  
  134.         debugger;  
  135.         var Url = 'api/Home?'  
  136.         UrlUrl = Url + "id=" + ID + "&Age=" + Age + "&Email=" + Email + "&Name=" + Name + "&CmdName=" + "Update";  
  137.         SampleAjaxPost(Url);  
  138.     }  
  139.     function DeleteDetails()  
  140.     {  
  141.         var id = 0;  
  142.         var Age = $("#Age").val();  
  143.         var Email = $("#Email").val();  
  144.         var Name = $("#Name").val();  
  145.         var ID = $("#ID").val();  
  146.         debugger;  
  147.         var Url = 'api/Home?'  
  148.         UrlUrl = Url + "id=" +ID + "&Age=" + 0 + "&Email=" + "" + "&Name=" + "" + "&CmdName="+"Delete";  
  149.         SampleAjaxPost(Url);  
  150.     }  
  151.    
  152. </script>