Create An ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery

Introduction

 
In this article, we learn how to implement CRUD operations in an ASP.NET MVC application using Ajax requests, jQuery, and the DataTable Plugin. This article explores client-side validation, create, view, update, and delete on the Entity Model.
 
This article shows you step by step how to create ASP.NET MVC CRUD Application. I attached the project source code in this article. First, you write all code in Visual Studio for better understanding, otherwise, use the source code download from this article and execute it in your Visual Studio.
 

Entity Framework

 
Entity Framework is an ORM (Object Relational Manager) Framework for .NET. It Increases the productivity of the developer. It can execute a necessary query for viewing or writing data in a database and executing it.
 
Let us start with the OUTPUT of our ASP.NET MVC web application. This is how it shows on a web browser.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
Note
We execute CRUD Operations in ASP.NET MVC Application, but you need to have basic knowledge about creating an ASP.NET MVC Application. If not familiar with ASP.NET MVC, then please explore the basics, It hardly takes an hour, then you can read this article. 
 
Prerequisites
  1. Visual Studio 2013 or above. (Here I am using Visual Studio 2017).
  2. SQL Server 2012.
  3. MVC Version 5.0.0.0 or above. 

    1. Check your MVC Version
    2. References -> right click on System.web.Mvc->properties.
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
After clicking on Properties, it shows the properties window, check the MVC Version. 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
I am using MVC 5.2.4.0 Version. 
 
If your MVC version is below 5.0.0.0, you have to update MVC.
 

Update MVC Command

 
Go to Tools -> NuGet Package Manager -> Package Manager Console. 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
After opening the console, write the following command on the console. 
 
PM>Install-Package Microsoft.AspNet.Mvc -Version 5.2.7 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Bootstrap CSS: Follow the procedure to install it.
 
Right-click on Solution Explorer -> Manage NuGet Packages  
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
After the NuGet Package window, type Bootstrap in the search section.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
jQuery version 1.12.4
 
jQuery UI => Install it from Right click on project -> Manage NuGet Packages -> type in Search online or Browse section jQuery UI.
 
Microsoft jQuery unobtrusive validation => Install it from Right click on project -> Manage NuGet Packages ->type in Search online or Browse section Microsoft jQuery unobtrusive validation.
 

Create Database

 
First, we create a database and table for performing CRUD Operations. This simply means perform a Select, Insert, Update, and Delete query on the Table.
 
I created MvcCRUDDB and a table named Student. Set the Primary key to StudentID. In the Table Property, set StudentID Identity to 1.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Let us start to Create ASP.Net MVC Application for performing CRUD Operations.
 

Create a Project

 
Open Visual Studio and Go to File Menu -> New -> Project.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Left side Template select Visual C# -> web -> ASP.NET MVC Application -> Name it MvcCRUD
 
(You can name your application the same name or any name you want)
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Once you click on OK, you'll select the Empty project Template and Tick the MVC Checkbox. 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
After clicking on OK, the project structure will be shown as below:
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Now we install jQuery version 1.12.4, jQuery UI, Microsoft jQuery unobtrusive validation, and jQuery Validation.
 
All installation steps are shown in the above Prerequisites Section. Please follow all steps for a better application.
 
After installation, we need to download notify.min.js for Notification after the insert, update and delete operations.
 
Download Link - https://notifyjs.jpillora.com/
 
After the download, you import in the Script Folder.
 
Right click on Script Folder -> Existing Item -> Add -> Choose notify.min.js file in your system.
 

Create an Entity Data Model

 
Now we add ADO.NET Entity Data Model to Application. Follow the steps mentioned below.
 
Right click on Model Folder ->add->New Item
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Select Data from Left Panel -> ADO.NET Entity Data Model -> Name it “DBModels” -> Click on add 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Select EF Designer from the database (If you use the earlier Visual Studio 2017 version, then Select Generate Data from Database)
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Click on New Connection ->we need to provide a server name and Database name and click on ok.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Here we provide the Server name and Database Name for New Database Connection.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Change the class name MvcCRUDDBEntities to DBModel 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Select the Entity Framework version. I usually prefer Entity Framework 6.x.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
We need to select the database object of Table Student and click on Finish Button.
 
Entity Model Show all Fields in Student Table
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Entity Model shows all fields in the Student Table.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 

Controller

 
Let's add a new Controller to get data from the database using the Entity Data Model.
 
Follow the Steps
 
Right click on Controller -> add -> controller
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Select MVC5 Controller Empty -> click on add -> Name this controller StudentController.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Now open StudentController.
 
In this Controller, we need to Four ActionResult Methods.
 
Get Operation
 
This ActionResult GetData Method is used tp return all the data from the student table to View as a generic list connection. 
  1. public ActionResult GetData()  
  2. {  
  3.     using (DBModel db = new DBModel())  
  4.     {  
  5.         List<Student> studentList = db.Students.ToList<Student>();  
  6.         return Json(new { data = studentList },   
  7.         JsonRequestBehavior.AllowGet);  
  8.     }  
  9. }  
Insert and Update Operation
 
We create ActionResult StoreOrEdit() for the insert and update operations. In this ActionResult Method, the received Student entity is inserted into Student Table and updated Student entity with generated StudentID is returned back to view.
 
For updating the record, in this ActionResult Method, the Student entity is received as parameter. The ID of Student entity is used to reference the Student Record in Student Table. It updates the student table. 
 
We used [HttpGet] and [HttpPost] Method for Posting client Data or Form data to Server.
  1. [HttpGet]  
  2.         public ActionResult StoreOrEdit(int id = 0)  
  3.         {  
  4.             if (id == 0)  
  5.                 return View(new Student());  
  6.             else  
  7.             {  
  8.                 using (DBModel db = new DBModel())  
  9.                 {  
  10.   
  11.   
  12.                     return View(db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>());  
  13.   
  14.                 }  
  15.             }  
  16.         } 
  1. [HttpPost]  
  2.         public ActionResult StoreOrEdit(Student studentob)  
  3.         {  
  4.             using (DBModel db = new DBModel())  
  5.             {  
  6.                 if (studentob.StudentID == 0)  
  7.                 {  
  8.                     db.Students.Add(studentob);  
  9.                     db.SaveChanges();  
  10.                     return Json(new { success = true, message = "Saved Successfully", JsonRequestBehavior.AllowGet });  
  11.                 }  
  12.                 else  
  13.                 {  
  14.                     db.Entry(studentob).State = EntityState.Modified;  
  15.                     db.SaveChanges();  
  16.                     return Json(new { success = true, message = "Updated Successfully", JsonRequestBehavior.AllowGet });  
  17.                 }  
  18.             }  
  19.   
  20.         }  
Delete Operation
 
We need to create ActionResult Delete,the StudentID received as parameter.This Parameter StudentID passed for delete Data. 
  1. [HttpPost]  
  2.         public ActionResult Delete(int id)  
  3.         {  
  4.             using (DBModel db = new DBModel())  
  5.             {  
  6.                 Student emp = db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>();  
  7.                 db.Students.Remove(emp);  
  8.                 db.SaveChanges();  
  9.                 return Json(new { success = true, message = "Deleted Successfully", JsonRequestBehavior.AllowGet });  
  10.             }  
  11.         }  
  12.   
  13.     }  
Route Data
 
Once we write code in the controller, then We Set Student Controller as DefaultController.
 
Go to App_start folder then click on RouteConfig.cs
.
It shows you the routes.MapRoute. Set the StudentController to Default controller by replacing “Home” to ” Student”. 
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery

View

 
We need to Create two Views for Displaying Data and the Insert/Edit Operation.
 
Go to StudentController.cs. Click on Index Function -> Right click -> Add View.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Keep the view name as it is; Index -> click on add.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Index.cshtml View consists of the following code: 
  1. @{  
  2.     ViewBag.Title = "Student List";  
  3. }  
  4.   
  5. <h2>Student Record</h2>  
  6.   
  7. <a class="btn btn-primary" style="margin-bottom:10px" onclick="PopupForm('@Url.Action("StoreOrEdit","Student")')"><i class="fa fa-plus"></i>Add New</a>  
  8.   
  9. <table id="StudentTable" class="table table-striped table-bordered" style="width:100%">  
  10.   
  11.     <thead>  
  12.         <tr>  
  13.             <th>Name</th>  
  14.             <th>Department</th>  
  15.             <th>Semester</th>  
  16.             <th>Age</th>  
  17.             <th>Fees</th>  
  18.             <th></th>  
  19.         </tr>  
  20.     </thead>  
  21. </table>  
  22.   
  23.   
  24. <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css" rel="stylesheet" />  
  25. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />  
  26.   
  27. @section scripts{  
  28.   
  29.     <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  
  30.     <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>  
  31.   
  32.     <script>  
  33.         var Popup, dataTable;  
  34.   
  35.         $(document).ready(function () {  
  36.             dataTable =  $("#StudentTable").DataTable({  
  37.   
  38.                 "ajax": {  
  39.   
  40.                     "url""/Student/GetData",  
  41.                     "type""GET",  
  42.                     "datatype""json"  
  43.                 },  
  44.   
  45.                 "columns": [  
  46.                     { "data""Name" },  
  47.                     { "data""Department" },  
  48.                     { "data""Semester" },  
  49.                     { "data""Age" },  
  50.                     { "data""Fees" },  
  51.                     {  
  52.                         "data""StudentID""render": function (data) {  
  53.   
  54.                             return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("StoreOrEdit","Student")/" + data + "')><i class='fa fa-pencil'></i>Edit</a> <a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" + data + ")><i class='fa fa-trash'></i>Delete</a>";  
  55.                         },  
  56.   
  57.                         "orderable"false,  
  58.                         "searchable"false,  
  59.                         "width" : "150px"  
  60.                     }  
  61.   
  62.   
  63.                 ],  
  64.   
  65.                 "language": {  
  66.                     "emptyTable" : "No data found please click on <b>Add New </b> Button"  
  67.                 }  
  68.   
  69.             });  
  70.         });  
  71.   
  72.         function PopupForm(url) {  
  73.   
  74.             var formDiv = $('<div/>');  
  75.             $.get(url)  
  76.                 .done(function (response) {  
  77.   
  78.                     formDiv.html(response);  
  79.   
  80.                     Popup = formDiv.dialog({  
  81.   
  82.                         autoOpen : true,  
  83.                         resizable : false,  
  84.                         title : 'Fill Student Details',  
  85.                         height : 500,  
  86.                         width : 700,  
  87.                         close: function () {  
  88.   
  89.                             Popup.dialog('destroy').remove();  
  90.                         }  
  91.   
  92.                     });  
  93.   
  94.                 });  
  95.         }  
  96.   
  97.         function SubmitForm(form) {  
  98.   
  99.             $.validator.unobtrusive.parse(form);  
  100.             if ($(form).valid()) {  
  101.   
  102.             $.ajax({  
  103.                 type: "POST",  
  104.                 url: form.action,  
  105.                 data: $(form).serialize(),  
  106.                 success: function (data) {  
  107.   
  108.                     if (data.success) {  
  109.   
  110.                         Popup.dialog('close');  
  111.                         dataTable.ajax.reload();  
  112.   
  113.                         $.notify(data.message, {  
  114.                             globalPosition: "top center",  
  115.                             className:"success"  
  116.                         })  
  117.   
  118.   
  119.                     }  
  120.                 }  
  121.                 });  
  122.             }  
  123.   
  124.             return false;  
  125.   
  126.         }  
  127.   
  128.         function Delete(id) {  
  129.             if (confirm('Are you sure to Delete this record ?')) {  
  130.   
  131.                 $.ajax({  
  132.   
  133.                     type: "POST",  
  134.                     url: '@Url.Action("Delete","Student")/' + id,  
  135.                     success: function (data) {  
  136.   
  137.                         if (data.success) {  
  138.   
  139.                             dataTable.ajax.reload();  
  140.   
  141.                             $.notify(data.message, {  
  142.                                 globalPosition: "top center",  
  143.                                 className: "success"  
  144.                             })  
  145.   
  146.                         }  
  147.                     }  
  148.   
  149.                 });  
  150.             }  
  151.         }  
  152.   
  153.     </script>  
  154. }  
After adding index view -> Go to View Folder -> Shared Folder -> Open _Layout.cshtml.
 
_Layout.cshtml consists of the following code: 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  6.     <title>@ViewBag.Title - My ASP.NET Application</title>    
  7.     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />    
  8.     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />    
  9.     <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />    
  10. </head>    
  11. <body>    
  12.     
  13.     <div class="container body-content">    
  14.         @RenderBody()    
  15.         <hr />    
  16.         <footer>    
  17.             <p>ASP.Net MVC CRUD Application using jQuery Ajax with Entity Framework</p>    
  18.         </footer>    
  19.     </div>    
  20.     
  21.     <script src="~/Scripts/jquery-1.12.4.min.js"></script>    
  22.     <script src="~/Scripts/bootstrap.min.js"></script>    
  23.     <script src="~/Scripts/jquery.validate.min.js"></script>    
  24.     <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>    
  25.     <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>    
  26.     <script src="~/Scripts/notify.min.js"></script>    
  27.     @RenderSection("scripts", required: false)    
  28. </body>    
  29. </html>     
After implementing  _layout.cshtml. We need to create view for StoreOrEdit.
 
Go to Student Controller -> Right-click on StoreOrEdit Section and add view.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Keep the View Name as it is and uncheck use a layout page and click on Add.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Store or edit view, which contains the following code. 
  1. @model MvcCRUD.Models.Student  
  2. @{  
  3.     /**/  
  4.   
  5.     Layout = null;  
  6. }  
  7.   
  8. @using (Html.BeginForm("StoreOrEdit""Student", FormMethod.Post, new { onsubmit = "return SubmitForm(this)" }))  
  9. {  
  10.     @Html.HiddenFor(model => model.StudentID)  
  11.      
  12.     <div class="form-group">  
  13.         @Html.LabelFor(model => model.Name, new { @class = "control-label" })  
  14.         @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  15.         @Html.ValidationMessageFor(model => model.Name)  
  16.     </div>  
  17.   
  18.     <div class="form-group">  
  19.         @Html.LabelFor(model => model.Department, new { @class = "control-label" })  
  20.         @Html.EditorFor(model => model.Department, new { htmlAttributes = new { @class = "form-control" } })  
  21.         @Html.ValidationMessageFor(model => model.Department)  
  22.     </div>  
  23.     <div class="form-group">  
  24.         @Html.LabelFor(model => model.Semester, new { @class = "control-label" })  
  25.         @Html.EditorFor(model => model.Semester, new { htmlAttributes = new { @class = "form-control" } })  
  26.     </div>  
  27.     <div class="form-group">  
  28.         @Html.LabelFor(model => model.Age, new { @class = "control-label" })  
  29.         @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })  
  30.     </div>  
  31.     <div class="form-group">  
  32.         @Html.LabelFor(model => model.Fees, new { @class = "control-label" })  
  33.         <div class="input-group">  
  34.             <span class="input-group-addon">  
  35.                 ₹  
  36.             </span>  
  37.             @Html.EditorFor(model => model.Fees, new { htmlAttributes = new { @class = "form-control" } })  
  38.         </div>  
  39.     </div>  
  40.   
  41.     <div class="form-group">  
  42.   
  43.         <input type="submit" value="Submit" class="btn btn-success" />  
  44.         <input type="reset" value="Reset" class="btn btn-warning" />  
  45.     </div>  
  46. }  
If site.css not available in Content folder, then right click on Content folder->add->click on stylesheet->name it Site.css.
 
Site.css consists of the following code. It's used to show error mesages on the screen in client side validation. 
  1. .field-validation-error {  
  2.     color: #e80c4d;  
  3.     font-weight: bold;  
  4. }  
  5.   
  6. input.input-validation-error {  
  7.     border: 1px solid #e80c4d;  
  8. }  
Client-Side Validation
 
Expand Model Folder->DBModels.edmx->DBModels.tt->Open Student.cs file
 
It consists of the following code:
  1. //------------------------------------------------------------------------------  
  2. // <auto-generated>  
  3. //     This code was generated from a template.  
  4. //  
  5. //     Manual changes to this file may cause unexpected behavior in your application.  
  6. //     Manual changes to this file will be overwritten if the code is regenerated.  
  7. // </auto-generated>  
  8. //------------------------------------------------------------------------------  
  9.   
  10. namespace MvcCRUD.Models  
  11. {  
  12.     using System;  
  13.     using System.Collections.Generic;  
  14.     using System.ComponentModel.DataAnnotations;  
  15.   
  16.     public partial class Student  
  17.     {  
  18.         public int StudentID { getset; }  
  19.         [Required(ErrorMessage = "This Field is Required")]  
  20.         public string Name { getset; }  
  21.         [Required(ErrorMessage = "This Field is Required")]  
  22.         public string Department { getset; }  
  23.         public string Semester { getset; }  
  24.         public Nullable<int> Age { getset; }  
  25.         public Nullable<int> Fees { getset; }  
  26.     }  
  27. }  
StudentController.cs consists of the following code: 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data.Entity;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7. using MvcCRUD.Models;  
  8. namespace MvcCRUD.Controllers  
  9. {  
  10.     public class StudentController : Controller  
  11.     {  
  12.         // GET: Student  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.         //Fetch Data From Database to show in Datatable  
  19.         public ActionResult GetData()  
  20.         {  
  21.             using (DBModel db = new DBModel())  
  22.             {  
  23.                 List<Student> studentList = db.Students.ToList<Student>();  
  24.                 return Json(new { data = studentList }, JsonRequestBehavior.AllowGet);  
  25.             }  
  26.         }  
  27.   
  28.         //Create Method for Insert and Update  
  29.   
  30.         [HttpGet]  
  31.         public ActionResult StoreOrEdit(int id = 0)  
  32.         {  
  33.             if (id == 0)  
  34.                 return View(new Student());  
  35.             else  
  36.             {  
  37.                 using (DBModel db = new DBModel())  
  38.                 {  
  39.   
  40.   
  41.                     return View(db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>());  
  42.   
  43.                 }  
  44.             }  
  45.         }  
  46.   
  47.         [HttpPost]  
  48.         public ActionResult StoreOrEdit(Student studentob)  
  49.         {  
  50.             using (DBModel db = new DBModel())  
  51.             {  
  52.                 if (studentob.StudentID == 0)  
  53.                 {  
  54.                     db.Students.Add(studentob);  
  55.                     db.SaveChanges();  
  56.                     return Json(new { success = true, message = "Saved Successfully", JsonRequestBehavior.AllowGet });  
  57.                 }  
  58.                 else  
  59.                 {  
  60.                     db.Entry(studentob).State = EntityState.Modified;  
  61.                     db.SaveChanges();  
  62.                     return Json(new { success = true, message = "Updated Successfully", JsonRequestBehavior.AllowGet });  
  63.                 }  
  64.             }  
  65.   
  66.         }  
  67.   
  68.         [HttpPost]  
  69.         public ActionResult Delete(int id)  
  70.         {  
  71.             using (DBModel db = new DBModel())  
  72.             {  
  73.                 Student emp = db.Students.Where(x => x.StudentID == id).FirstOrDefault<Student>();  
  74.                 db.Students.Remove(emp);  
  75.                 db.SaveChanges();  
  76.                 return Json(new { success = true, message = "Deleted Successfully", JsonRequestBehavior.AllowGet });  
  77.             }  
  78.         }  
  79.   
  80.     }  
  81. }  
Now our web application is ready to learn. Run the application and click on the Run Button or Press F5.
 
Here the Output. There is no data in the database, that's why it shows No Data Found.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Insert Operation Output
 
Click on Add New Button, after that it shows a Popup Form.
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
Client-Side Validation Output
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
 
Output
 
Create ASP.NET MVC CRUD Application With Entity Framework Using AJAX Request And jQuery
Now you go to SQL Server and check the student table data. It shows you the Inserted data.
 
If your popup form not working, it means you did not download the plugin. Download all plugins mentioned in Prerequisites.
 
Now you have implemented CRUD operations in your project.

Conclusion

 
Finally, we completed performing CRUD Operations in ASP.NET MVC using Entity Framework with the help of jQuery, Ajax Request, and DataTable.
 
In this application, we implemented the DataTable Plugin, Bootstrap, jQuery, and Clientside Validation. It showed a popup for inserting data and updating data.
 
Download the source code file of the CRUD Web Application in ASP.NET MVC. The source code is attached to this article.
 
I hope this article was helpful to you for developing a CRUD Application in ASP.NET MVC.