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>