In this post, we'll learn how to perform Asp.Net Mvc gridview crud operation using Entity Framework such as insert, update and Delete.
Step 1:
Add Model Class:
Model Class.cs :
namespace MVC_GridCrud.Models
{
using System;
using System.Collections.Generic;
public partial class Test
{
public int Id { get; set; }
public string Name { get; set; }
public string Department { get; set; }
public Nullable<System.DateTime> CreatedDate { get; set; }
}
}
Solution File
Step 2:
Add Controller Class:
now, we are going to add new .cs class file as TestController.cs . is controller class file in controller folder.
TestController Code.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_GridCrud.Models;
namespace MVC_GridCrud.Controllers
{
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
IMSEntities dbentity = new IMSEntities();
List<Test> test = dbentity.Tests.ToList();
// Add a Dummy Row.
test.Insert(0, new Test());
return View(test);
}
[HttpPost]
public JsonResult InsertTest(Test test)
{
using (IMSEntities imsentity = new IMSEntities())
{
imsentity.Tests.Add(test);
imsentity.SaveChanges();
}
return Json(test);
}
[HttpPost]
public ActionResult UpdateTest(Test test)
{
using (IMSEntities entity = new IMSEntities())
{
Test objtest = (from c in entity.Tests where c.Id == test.Id select c).FirstOrDefault();
objtest.Name = test.Name;
objtest.Department = test.Department;
objtest.CreatedDate = test.CreatedDate;
entity.SaveChanges();
}
return new EmptyResult();
}
[HttpPost]
public ActionResult DeleteTest(int Id)
{
using (IMSEntities entities = new IMSEntities())
{
Test delobj = (from c in entities.Tests
where c.Id == Id
select c).FirstOrDefault();
entities.Tests.Remove(delobj);
entities.SaveChanges();
}
return new EmptyResult();
}
}
}
Step 3:
now, we are going to add view file as Test in view folder as file is Index.cshtml
cshtml code:
@model IEnumerable<MVC_GridCrud.Models.Test>
@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body{
font-family:Arial;
font-size:10pt;
}
.table{
border:1px solid #ccc;
border-collapse:collapse;
}
.table th{
background-color:#f7f7f7;
color:#333;
font-weight:bold;
}
.table th, .table td{
padding:5px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<table id="tbltest" class="table" cellpadding="0" cellspacing="0">
<tr>
<th style="width:100px">Id</th>
<th style="width:150px">Name</th>
<th style="width:150px">Department</th>
<th style="width:150px">CreatedDate</th>
<th style="width:150px"></th>
</tr>
@foreach(MVC_GridCrud.Models.Test test in Model)
{
<tr>
<td class="Id">
<span>@test.Id</span>
</td>
<td class="Name">
<span>@test.Name</span>
<input type="text" value="@test.Name" style="display:none" />
</td>
<td class="Department">
<span>@test.Department</span>
<input type="text" value="@test.Department" style="display:none" />
</td>
<td class="CreatedDate">
<span>@test.CreatedDate</span>
<input type="text" value="@test.CreatedDate" style="display:none" />
</td>
<td>
<a class="Edit" href="javascript:;">Edit</a>
<a class="Update" href="javascript:;" style="display:none">Update</a>
<a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
<a class="Delete" href="javascript:;">Delete</a>
</td>
</tr>
}
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:150px">
Name<br />
<input type="text" id="txtname" style="width:140px"/>
</td>
<td style="width:150px">
Department<br />
<input type="text" id="txtdepartment" style="width:140px" />
</td>
<td style="width:150px">
CreatedDate<br />
<input type="text" id="txtCreatedDate" style="width:140px" />
</td>
<td style="width:200px">
<br />
<input type="button" id="btnAdd" value="Add" />
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$(function () {
//Remove the dummy row if data present.
if ($("#tbltest tr").length > 2) {
$("#tbltest tr:eq(1)").remove();
} else {
var row = $("#tbltest tr:last-child");
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
});
// Bind data row
function AppendRow(row, Id, Name, Department, CreatedDate) {
//Bind Id.
$(".Id", row).find("span").html(Id);
//Bind Name.
$(".Name", row).find("span").html(Name);
$(".Name", row).find("input").val(Name);
// Bind Department
$(".Department", row).find("span").html(Department);
$(".Department", row).find("input").val(Department);
row.find(".Edit").show();
row.find(".Delete").show();
$("#tbltest").append(row);
};
//Add event handler.
$("body").on("click", "#btnAdd", function () {
var txtname = $("#txtname");
var txtdept = $("#txtdepartment");
var txtdate = $("#txtCreatedDate");
$.ajax({
type: "POST",
url: "/Test/InsertTest",
data: '{Name:"' + txtname.val() + '",Department:"' + txtdept.val() + '",CreatedDate:"' + txtdate.val() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var row = $("#tbltest tr:last-child");
if ($("#tbltest tr:last-child span").eq(0).html() != " ") {
row = row.clone();
}
AppendRow(row, r.Id, r.Name, r.Department, r.CreatedDate);
txtname.val("");
txtdept.val("");
txtdate.val("");
}
});
});
//Edit event handler.
$("body").on("click", "#tbltest .Edit", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
$(this).find("input").show();
$(this).find("span").hide();
}
});
row.find(".Update").show();
row.find(".Cancel").show();
row.find(".Delete").hide();
$(this).hide();
});
//Update event handler.
$("body").on("click", "#tbltest .Update", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Cancel").hide();
$(this).hide();
var test = {};
test.Id = row.find(".Id").find("span").html();
test.Name = row.find(".Name").find("span").html();
test.Department = row.find(".Department").find("span").html();
test.CreatedDate = row.find(".CreatedDate").find("span").html();
$.ajax({
type: "POST",
url: "/Test/UpdateTest",
data: '{test:' + JSON.stringify(test) + '}',
contentType: "application/json;charset=utf-8",
dataType: "json"
});
});
//Cancel event handler.
$("body").on("click", "#tbltest .Cancel", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Update").hide();
$(this).hide();
});
//Delete event handler.
$("body").on("click", "#tbltest .Delete", function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
var Id = row.find("span").html();
$.ajax({
type: "POST",
url: "/Test/DeleteTest",
data: '{Id: ' + Id + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if ($("#tbltest tr").length > 2) {
row.remove();
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
AppendRow(row, r.Id, r.Name, r.Department, r.CreatedDate);
}
}
});
}
});
</script>
</body>
</html>
Output:
Add View
Edit View:
Update View:
Delete View:
Summary
1. In this article explain to MVC crud operation in gridview list using entity framework with ajax jquery.
2. this relationship between Model,Controller and View.
