This Tutorial will explain how to implement crud operations using ASP.NET Web API.

Open Visual Studio 2012. Go to create new project tab. Select “Asp.Net MVC 4 Web Application.” Then select Web API from Project Template.

using ASP.NET Web API Crud operation are performed by

GET – To Get data from database
POST – To Insert data into database
PUT – To Update data into database
DELETE – To delete data in database

Create an Employee class in Model folder. And write the below code in the file.

public class Employee
{
    [Display(Name = "Employee ID")]
    public string EmployeeID { get; set; }
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [Display(Name = "Date of Birth")]
    public string DOB { get; set; }

    public string Gender { get; set; }
    public string Nationality { get; set; }
    public string Language { get; set; }
    public string Address { get; set; }
}

Create an EmployeeController Controller file in Controller folder. And write the below code in the file.

public class EmployeeController : ApiController
{
    public List<Employee> Get()
    {
        return EmployeeDAL.GetAllEmployees();
    }
    public Employee Get(string id)
    {
        return EmployeeDAL.GetEmployee(id);
    }
    public void Post(Employee Employee)
    {
        EmployeeDAL.AddEmployee(Employee);
    }
    public void Put(Employee Employee, string id)
    {
        EmployeeDAL.UpdateEmployee(Employee, id);
    }
    public void Delete(string id)
    {
        EmployeeDAL.RemoveEmployee(id);
    }
}

Create a EmployeeDAL file in Model folder for DataBase Operations.

 public class EmployeeDAL
    {
        private static List<Employee> employees;

        public static List<Employee> GetAllEmployees()
        {            
            try
            {
               // Code to fetch data from database
               // create employee list and return
               // return employees;
            }
            catch (Exception ex)
            {
                throw ex;
            }

        }
        public static Employee GetEmployee(string employeeID)
        {           
            try
            {
                // Code to fetch data from database based on employeeID
                // create list and return                           
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
        public static void RemoveEmployee(string employeeID)
        {           
            try
            {
                // Code to delete record from database based on employeeID                              
            }
            catch (SqlException ex)
            {
                throw ex;
            }           
        }
        public static void AddEmployee(Employee employee)
        {            
            try
            {    
                 // Code to Insert employee data into database         
            }
            catch (SqlException ex)
            {
                throw ex;
            }            
        }
        public static void UpdateEmployee(Employee employee, string id)
        {           
            try
            {
                 // Code to update employee data into database             
            }
            catch (SqlException ex)
            {
                throw ex;
            }            
        }
    }

Open Index.cshtml file in View folder. And replace body code with the code below.

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
        </div>
        <div class="content-wrapper main-content clear-fix">
            <h2>Search</h2>
            @model WebApiPart1.Models.Employee
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)
                <fieldset>
                    <legend>Employee Search</legend>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.EmployeeID)
                    </div>
                    <div class="editor-field">
                        @Html.TextBox("SearchEmployee")
                        @Html.ValidationMessageFor(model => model.EmployeeID)
                    </div>
                    <p>
                        <input type="submit" value="Search" onclick="SearchEmployeeById(); return false;" />
                        <input type="submit" value="Get ALL" onclick="GelAllEmployees(); return false;" />
                    </p>
                </fieldset>
                <h2>Employee List</h2>
                <table border="1" id="employees">
                    <thead>
                        <tr>
                            <th><b>Employee ID</b></th>
                            <th><b>First Name</b></th>
                            <th><b>Last Name</b></th>
                            <th><b>DOB</b></th>
                            <th><b>Gender</b></th>
                            <th><b>Nationality</b></th>
                            <th><b>Language</b></th>
                            <th><b>Address</b></th>
                            <th><b>Edit</b></th>
                            <th><b>Delete</b></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <h2>Create</h2>
                <fieldset>
                    <legend>Employee</legend>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.EmployeeID)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.EmployeeID)
                        @Html.ValidationMessageFor(model => model.EmployeeID)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.FirstName)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.FirstName)
                        @Html.ValidationMessageFor(model => model.FirstName)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.LastName)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.LastName)
                        @Html.ValidationMessageFor(model => model.LastName)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.DOB)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.DOB)
                        @Html.ValidationMessageFor(model => model.DOB)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Gender)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Gender)
                        @Html.ValidationMessageFor(model => model.Gender)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Nationality)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Nationality)
                        @Html.ValidationMessageFor(model => model.Nationality)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Language)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Language)
                        @Html.ValidationMessageFor(model => model.Language)
                    </div>

                    <div class="editor-label">
                        @Html.LabelFor(model => model.Address)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Address)
                        @Html.ValidationMessageFor(model => model.Address)
                    </div>
                    <p>
                        <input type="submit" id="AddUpdate" name="AddUpdate" value="Create" onclick="ADDUpdate(); return false;" />
                        <input type="submit" id="Clear" name="Clear" value="Clear" onclick="ClearForm(); return false;" />
                    </p>
                </fieldset>
            }
        </div>
    </section>
</div>

Get ALL Employee List using GET method.

 function GelAllEmployees() {
 $.ajax({
 type: "GET",
 url: "api/Employee",
 contentType: "json",
 dataType: "json",
 success: function (data) {
 $('#employees tbody tr').empty();
 $.each(data, function (key, value) {
 //stringify
 var jsonData = JSON.stringify(value);
 //Parse JSON
 var objData = $.parseJSON(jsonData);
 var id = objData.EmployeeID;
 var fname = objData.FirstName;
 var lname = objData.LastName;
 var dob = objData.DOB;
 var Gender = objData.Gender;
 var Nationality = objData.Nationality;
 var Language = objData.Language;
 var Address = objData.Address;
 $('
<tr>
<td>' + id + '</td>
<td>' + fname +
 '</td>
<td>' + lname + '</td>
<td>' + dob + '</td>
<td>' + Gender + '</td>
<td>' + Nationality + '</td>
<td>' + Language +
 '</td>
<td>' + Address + '</td>
<td><a onclick="GetEmployeeById(id); return false;" id="' + id + '" >Edit</a></td>
<td><a onclick="DeleteEmployee(id);" id="' + id + '" >Delete</a></td>
</tr>

').appendTo('#employees tbody');
 });
 },
 error: function (xhr) {
 alert(xhr.responseText);
 }
 });
 };

Get Employee by ID

 function GetEmployeeById(EmployeeID) {
    var employeeData = {
        "EmployeeID": EmployeeID
    };
    $.ajax({
        type: "GET",
        url: "api/Employee/" + employeeData.EmployeeID,
        contentType: "json",
        dataType: "json",
        success: function (data) {
            //stringify
            var jsonData = JSON.stringify(data);
            //Parse JSON
            var objData = $.parseJSON(jsonData);
            if (objData == null) {
                return;
            }
            $('#AddUpdate').val("Update");            
            $('#EmployeeID').val(objData.EmployeeID);
            $('#FirstName').val(objData.FirstName);
            $('#LastName').val(objData.LastName);
            $('#DOB').val(objData.DOB);
            $('#Gender').val(objData.Gender);
            $('#Nationality').val(objData.Nationality);
            $('#Language').val(objData.Language);
            $('#Address').val(objData.Address);
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
}       

Search Employee by Employee ID

 function SearchEmployeeById() {
            var employeeData = {
                "EmployeeID": $('#SearchEmployee').val()
            };
            if (employeeData.EmployeeID == "") {
                return false;
            }
            $.ajax({
                type: "GET",
                url: "api/Employee/" + employeeData.EmployeeID,
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    //stringify
                    $('#employees tbody tr').empty();
                    var jsonData = JSON.stringify(data);
                    //Parse JSON
                    var objData = $.parseJSON(jsonData);
                    if (objData == null) {
                        return;
                    }
                    var id = objData.EmployeeID;
                    var fname = objData.FirstName;
                    var lname = objData.LastName;
                    var dob = objData.DOB;
                    var Gender = objData.Gender;
                    var Nationality = objData.Nationality;
                    var Language = objData.Language;
                    var Address = objData.Address;
                    $('
<tr>
<td>' + id + '</td>
<td>' + fname +
                    '</td>
<td>' + lname + '</td>
<td>' + dob + '</td>
<td>' + Gender + '</td>
<td>' + Nationality + '</td>
<td>' + Language +
                    '</td>
<td>' + Address + '</td>
<td><a onclick="GetEmployeeById(id); return false;" id="' + id + '" >Edit</a></td>
<td><a onclick="DeleteEmployee(id); return false;" id="' + id + '" >Delete</a></td>
</tr>

').appendTo('#employees tbody');

                },
                error: function (xhr) {
                    alert(xhr.responseText);

                }
            });
        }

Add New Employee

 function AddNewEmployee() {
            var employeeData = {
                "EmployeeID": $('#EmployeeID').val(),
                "FirstName": $('#FirstName').val(),
                "LastName": $('#LastName').val(),
                "DOB": $('#DOB').val(),
                "Gender": $('#Gender').val(),
                "Nationality": $('#Nationality').val(),
                "Language": $('#Language').val(),
                "Address": $('#Address').val()
            };

            $.ajax({
                type: "POST",
                url: "api/Employee",
                data: JSON.stringify(employeeData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                    alert("Successsfully added…. " + employeeData.EmployeeID);
                    GelAllEmployees();
                    ClearForm();
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

Update Employee

function UpdateEmployee() {
            var employeeData = {
                "EmployeeID": $('#EmployeeID').val(),
                "FirstName": $('#FirstName').val(),
                "LastName": $('#LastName').val(),
                "DOB": $('#DOB').val(),
                "Gender": $('#Gender').val(),
                "Nationality": $('#Nationality').val(),
                "Language": $('#Language').val(),
                "Address": $('#Address').val()
            };
            $.ajax({
                type: "PUT",
                url: "api/Employee/" + employeeData.EmployeeID,
                data: JSON.stringify(employeeData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                    alert("Successfully updated…" + employeeData.EmployeeID);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

Delete Employee

function DeleteEmployee(EmployeeID) {
            var txt;
            var r = confirm("Are you sure you want to delete this recored?");
            if (r == true) {
                $.ajax({
                    type: "DELETE",
                    url: "api/Employee/" + EmployeeID,
                    contentType: "json",
                    dataType: "json",
                    success: function (data) {
                        alert("Successsfully deleted…. " + EmployeeID);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
                GelAllEmployees();
            } else {
            }
        }

Clear form

  function ClearForm() {
            $('#EmployeeID').val("");
            $('#FirstName').val("");
            $('#LastName').val("");
            $('#DOB').val("");
            $('#Gender').val("");
            $('#Nationality').val("");
            $('#Language').val("");
            $('#Address').val("");
            $('#AddUpdate').val("Create");
        }

Create or Update decider function

  function ADDUpdate() {
            var btn = $('#AddUpdate').val();
            if (btn == "Create") {
                AddNewEmployee();
            }
            if (btn == "Update") {
                UpdateEmployee();
            }
        }

Add this script to get reference of JQuery.

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>