Hi ramco1917,
Check this example. Now please take its reference and correct your code.
Database
I have made use of the following table Customers with the schema as follows.
I have already inserted few records in the table.
You can download the database table SQL by clicking the download link below.
Download SQL file
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
using (CustomerEntities entities = new CustomerEntities())
{
return View(entities.Customers.ToList());
}
}
public JsonResult Add(Customer model)
{
using (CustomerEntities entities = new CustomerEntities())
{
if (ModelState.IsValid)
{
entities.Customers.Add(model);
entities.SaveChanges();
return Json(new { success = true, message = "Successfully Saved", data = model });
}
else
{
var query = from state in ModelState.Values
from error in state.Errors
select error.ErrorMessage;
var errors = query.ToArray();
}
return Json(model);
}
}
public JsonResult Delete(int Id)
{
using (CustomerEntities entities = new CustomerEntities())
{
Customer customer = entities.Customers.Where(x => x.CustomerId == Id).FirstOrDefault();
entities.Customers.Remove(customer);
entities.SaveChanges();
return Json(new { success = true, message = "Successfully Deleted", data = entities.Customers.ToList() });
}
}
}
View
@model IEnumerable<Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/notify.js"></script>
<link rel="stylesheet" href="~/css/notify.css" />
<script type="text/javascript">
$(function () {
$("#tblCustomers").DataTable({
order: [],
columnDefs: [{
orderable: false,
targets: [3]
}]
});
});
$(document).on('click', '[id*=btnEdit]', function () {
var data = $(this).closest('tr').find('td');
var id = data.eq(0).html();
var name = data.eq(1).html();
var country = data.eq(2).html();
$('#hfId').val(id);
$('#txtName').val(name);
$('#txtCountry').val(country);
$('#myModal').modal('show');
});
$(document).on('click', '[id*=btnAdd]', function () {
$('#hfId').val('');
$('#txtName').val('');
$('#txtCountry').val('');
});
$(document).on('click', '[id*=btnDelete]', function () {
$('#hiddenId').val($(this).closest('tr').find('td').eq(0).html());
rowToDelete = $(this).closest('tr');
});
var rowToDelete;
$(document).on('click', '[id*=btnConfirmDelete]', function () {
var Id = $("#hiddenId").val().replace(/\r?\n|\r/g, "").trim();
$.ajax({
url: "/Home/Delete",
data: { Id: Id },
type: "POST",
dataType: "json",
success: function (result) {
if (result.success) {
$('#DeleteModal').modal('hide');
$.notify(result.message, {
type: 'success',
icon: 'check',
align: "center",
verticalAlign: "top",
animation: true,
animationType: "drop",
close: true
});
var table = $('#tblCustomers').DataTable();
table.row(rowToDelete).remove().draw();
rowToDelete = '';
}
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
});
function Add() {
var table = $("#tblCustomers").DataTable();
var customer = {
Name: $('#txtName').val(),
Country: $('#txtCountry').val(),
};
$.ajax({
url: "/Home/Add",
data: JSON.stringify(customer),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
$('#myModal').modal('hide');
$.notify(data.message, {
type: 'success',
icon: 'check',
align: "center",
verticalAlign: "top",
animation: true,
animationType: "drop",
close: true
});
table.row.add([
data.data.CustomerId,
data.data.Name,
data.data.Country,
"<a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>" +
"<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'" +
" onclick=\"return confirm('Do you want to delete this record?')\"><i class='fa fa-trash'></i> Delete</a>"]).draw()
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
}
});
}
</script>
</head>
<body class="container">
<div class="table-title">
<div class="row">
<div class="col-sm-6 text-right">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<i class="fa fa-plus"></i> Add New
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table class="table" id="tblCustomers">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.CustomerId)</td>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Country)</td>
<td>
<a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>
@*<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'
onclick="return confirm('Do you want to delete this record?')"><i class='fa fa-trash'></i>Delete</a>*@
<a id="btnDelete" class="btn btn-danger btn-sm" data-target="#DeleteModal" data-toggle="modal"
style='margin-left:5px'><i class='fa fa-trash'></i>Delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Customer Details Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<input type="hidden" id="hfId" name="CustomerId" />
<label>Name:</label>
<input type="text" id="txtName" name="Name" value="" class="form-control" />
</div>
<div class="form-group row">
<label>Country:</label>
<input type="text" id="txtCountry" name="Country" value="" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="Add()">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="DeleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Record</h4>
<a href="#" class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<input type="hidden" id="hiddenId" value="" />
<h5> Are you sure you want to Delete this Record ? </h5>
</div>
<div class="modal-footer">
<button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
<button id="btnConfirmDelete" type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
