Understanding Web API [Simple Program]

Open Web Api Project

Create a Employee class Mode

 public class EmployeeClass
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public int Age { get; set; }
    }

Create a Controller [Home Controller]

public class HomeController : ApiController
    {

        List<EmployeeClass> obj = new List<EmployeeClass>() {
        new EmployeeClass { ID = 1,Age=25,Email="[email protected]",Name="Sachin" },
           new EmployeeClass { ID = 2, Age = 25, Email = "[email protected]", Name = "Kholi" }
        };

        public IEnumerable<EmployeeClass> GetallDetails()
        {

            return obj;
        }

        // GET: api/Home/5
        public IEnumerable<EmployeeClass> Get(int id, int Age, string Email,string Name,string CmdName)
        {
            if (CmdName=="Insert")
            {
            id = obj.Count() + 1;
            obj.Add(new EmployeeClass { ID = id, Age = Age, Email = Email, Name = Name });

            }
             if(CmdName=="Delete")
            {
                 var t=(from x in obj where x.ID==id select x).FirstOrDefault();
                 obj.Remove(t);
            }
             if (CmdName == "Update")
             {

                 var t = (from x in obj where x.ID == id select x).FirstOrDefault();
                 obj.Remove(t);
                 t.Name = Name;
                 t.Age = Age;
                 t.Email = Email;
                 t.ID=id;
                 obj.Add(t);
             }
             return obj;
        }

    }

Open an HTML Page[Add boot Strap and jquery plugin]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <title></title>
    <style type="text/css">
        .textbx {
    min-width: 0;
    width: 200px;
    display: inline;
}
  .label
  {
 min-width: 0;
    width: 110px;
    height:30px;
  }
  div {
  padding-right: 10px;
  padding-left: 10px;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>
                <small>Insert Details</small>
            </h1>
        </div>
        <div class="col-sm-12 divider" >
            <span class="label label-default col-sm-4">Name</span>
            <input type="text" class="form-control textbx col-sm-8" id="Name">
        </div>
        <div class="col-sm-12">
            <span class="label label-default col-sm-4">Age</span>
            <input type="text" class="form-control textbx col-sm-8" id="Age">
        </div>
        <div class="col-sm-12">
            <span class="label label-default col-sm-4">Email</span>
            <input type="text" class="form-control textbx col-sm-8" id="Email">
        </div>
        <div class="col-sm-12">
            <span class="label label-default col-sm-4">ID</span>
            <input type="text" class="form-control textbx col-sm-8" id="ID">
        </div>
        <button type="button" class="btn btn-primary" onclick="InsertDetails();">Insert</button>

        <button type="button" class="btn btn-primary" onclick="UpdateDetails();">Update</button>

        <button type="button" class="btn btn-primary" onclick="DeleteDetails();">Delete</button>

    </div>


    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody id="getvalues">
            </tbody>
                            </table>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var Url = "api/Home";
        AjaxGet(Url)
    });

    function AjaxGet(URL) {
        var getid =$("#getvalues");
        $.getJSON(URL)
        .done(function (data) {
            $.each(data, function (key, item) {
              //  debugger;
                getidgetid = getid.append('<tr>');

                    getid.append('<td>' + item.ID + '</td>');
                    getid.append('<td>' + item.Name + '</td>');
                    getid.append('<td>' + item.Age + '</td>');
                    getid.append('<td>' + item.Email + '</td>');

                getidgetid = getid.append('</tr>');

            });
        });
    }
    function InsertDetails()
    {
        var id = 0;
        var Age = $("#Age").val();
        var Email = $("#Email").val();
        var Name = $("#Name").val();
        debugger;
        var Url = 'api/Home?'
        UrlUrl = Url + "id=" + 0 + "&Age=" + Age + "&Email=" + Email + "&Name=" + Name + "&CmdName=" + "Insert";
        SampleAjaxPost(Url);
    }
    function SampleAjaxPost(URL)
    {
        var getid = $("#getvalues");
        getid.html("");
        $.getJSON(URL)
        .done(function (data) {
            $.each(data, function (key, item) {
                debugger;
                getidgetid = getid.append('<tr>');

                    getid.append('<td>' + item.ID + '</td>');
                    getid.append('<td>' + item.Name + '</td>');
                    getid.append('<td>' + item.Age + '</td>');
                    getid.append('<td>' + item.Email + '</td>');

                getidgetid = getid.append('</tr>');
            });
        });
    }
    function UpdateDetails() {
        var id = 0;
        var Age = $("#Age").val();
        var Email = $("#Email").val();
        var Name = $("#Name").val();
        var ID = $("#ID").val();
        debugger;
        var Url = 'api/Home?'
        UrlUrl = Url + "id=" + ID + "&Age=" + Age + "&Email=" + Email + "&Name=" + Name + "&CmdName=" + "Update";
        SampleAjaxPost(Url);
    }
    function DeleteDetails()
    {
        var id = 0;
        var Age = $("#Age").val();
        var Email = $("#Email").val();
        var Name = $("#Name").val();
        var ID = $("#ID").val();
        debugger;
        var Url = 'api/Home?'
        UrlUrl = Url + "id=" +ID + "&Age=" + 0 + "&Email=" + "" + "&Name=" + "" + "&CmdName="+"Delete";
        SampleAjaxPost(Url);
    }

</script>