How to Create CRUD Operation in ASP.NET MVC using WEB API

In this blog we will learn about how to Create CRUD operation in ASP.NET MVC using WEB API.

Step 1: Open visual studio-2012 select MVC template and select WEB API tab.

Step 2: Create database.

Step 3: Create Model class through Entity Framework and Build that class.

Step 4: Generate bydefault HomeController and ValueController.

 

ValueController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebAPIExample.Models;
using System.Data.Entity;
namespace WebAPIExample.Controllers
{
    public class ValuesController: ApiController
    {
        BMGEntities1 db = new BMGEntities1();
        // GET api/values
        public IEnumerable < string > Get()
        {
            return new string[] {
                "value1", "value2"
            };
        }
        // GET api/values/5
        [HttpGet]
        public EmpRecord GetEmp(int id)
        {
            EmpRecord obj = db.EmpRecords.Find(id);
            return obj;
        }
        // POST api/values
        [HttpPost]
        public string AddEmp(EmpRecord obj)
        {
            db.EmpRecords.Add(obj);
            db.SaveChanges();
            return "record inserted successfully....";
        }
        // PUT api/values/5
        [HttpPut]
        public string EditEmp(EmpRecord obj)
        {
            EmpRecord obj2 = db.EmpRecords.SingleOrDefault(e1 = > e1.EId == obj.EId);
            obj2.Ename = obj.Ename;
            obj2.Sal = obj.Sal;
            db.SaveChanges();
            return "record updated successfully.......";
        }
        // DELETE api/values/5
        [HttpDelete]
        public string DeleteEmp(int id)
        {
            EmpRecord obj = db.EmpRecords.Find(id);
            db.EmpRecords.Remove(obj);
            db.SaveChanges();
            return "record deleted successfully......";
        }
    }
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebAPIExample.Controllers
{
    public class HomeController: Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 5: Create view for index actionmethod.

 

Index.cshtml

@{
ViewBag.Title = "Index";
}

<h2>Web API</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
function fn_GetEmp() {
var eno = $("#Eid").val();
$.ajax({
url: "http://localhost:1533/api/Values/" + eno,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function (response) {
$("#Ename").val(response.Ename);
$("#Sal").val(response.Sal);
}
});
}
function fn_AddEmp() {
var empData =
{
"Eid": $("#Eid").val(),
"Ename": $("#Ename").val(),
"Sal": $("#Sal").val(),
};
$.ajax({
data:JSON.stringify(empData),
url: "http://localhost:1533/api/Values",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function (response) {
$("#sp1").text("Inserted suceessfully....");
}
});
}
function fn_EditEmp() {
var empData =
{
"Eid": $("#Eid").val(),
"Ename": $("#Ename").val(),
"Sal": $("#Sal").val(),
};
Eno= $("#Eid").val(),
$.ajax({
data: JSON.stringify(empData),
url: "http://localhost:1533/api/Values/"+Eno,
type: "PUT",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function (response) {
$("#sp1").text("Updated successfully....");
}
});
}
function fn_DeleteEmp() {
var Eid = $("#Eid").val();
$.ajax({
url: "http://localhost:1533/api/Values/" + Eid,
type: "Delete",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function (response) {
$("#sp1").text("Deleted successfully....");
}
});
}

undefined</script>
@Html.Label("Eid")
@Html.TextBox("Eid")
undefined<br />undefined<br />
@Html.Label("EName")
@Html.TextBox("Ename")
undefined<br />undefined<br />
@Html.Label("Sal")
@Html.TextBox("Sal")
undefined
<br />undefined
<br />undefined
<input type="button" value="GetEmp" onclick="fn_GetEmp()" />undefined
<input type="button" value="AddEmp" onclick="fn_AddEmp()"/>undefined
<input type="button" value="EditEmp" onclick="fn_EditEmp()" />undefined
<input type="button" value="DeleteEmp" onclick="fn_DeleteEmp()" />undefined
<hr />undefined<span id="sp1">
</span>

Step 6: Build and Run the project.