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
Model
public class CustomerModel
{
public int CustomerID { get; set; }
public string Name { get; set; }
public string Country { get; set; }
public bool IsActive { get; set; }
public List<Customer> Customers { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
using (CustomerEntities entities = new CustomerEntities())
{
CustomerModel model = new CustomerModel();
model.Customers = entities.Customers.ToList();
return View(model);
}
}
[HttpPost]
public ActionResult Index(CustomerModel model, string hfAU)
{
using (CustomerEntities entities = new CustomerEntities())
{
if (hfAU == "U")
{
Customer customerUpdate = entities.Customers.Where(x => x.CustomerId == model.CustomerID).FirstOrDefault();
customerUpdate.Name = model.Name;
customerUpdate.Country = model.Country;
entities.SaveChanges();
TempData["Message"] = " Customer updated successfully.";
}
if (hfAU == "A")
{
entities.Customers.Add(new Customer
{
Name = model.Name,
Country = model.Country
});
entities.SaveChanges();
TempData["Message"] = " Customer inserted successfully.";
}
return RedirectToAction("Index");
}
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DeleteCustomer(int id)
{
using (CustomerEntities entities = new CustomerEntities())
{
Customer customer = entities.Customers.Where(x => x.CustomerId == id).FirstOrDefault();
entities.Customers.Remove(customer);
entities.SaveChanges();
TempData["Message"] = " Customer deleted successfully.";
return RedirectToAction("Index");
}
}
}
View
@model Delete_Modal_Popup_MVC.Models.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</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>IsActive</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Customers)
{
var active = item.Country == "India" ? true : false;
<tr>
<td>@Html.DisplayFor(modelItem => item.CustomerId)</td>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Country)</td>
<td>@Html.DisplayFor(modelItem => active)</td>
<td>
<a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>
<a id="btnDelete" class="btn btn-danger btn-sm" data-toggle="modal"
data-target="#DeleteModal-@item.CustomerId" style='margin-left:5px'><i class='fa fa-trash'></i> Delete</a>
@using (Html.BeginForm("DeleteCustomer", "Home", new { id = item.CustomerId }, FormMethod.Post, null))
{
@Html.AntiForgeryToken()
<div class="modal" tabindex="-1" role="dialog" id="DeleteModal-@item.CustomerId">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this record ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<input type="hidden" id="hfAU" name="hfAU" />
<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 class="form-group row">
<label for="IsActive" class="col-sm-2 col-form-label">IsActive</label>
<div class="form-check col-sm-10">
<input class="form-check-input" type="checkbox" value="true" id="IsActive">
<input type="hidden" id="hfIsActive" name="IsActive" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.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="https://www.jqueryscript.net/demo/Simple-Flexible-jQuery-Alert-Notification-Plugin-notify-js/js/notify.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Simple-Flexible-jQuery-Alert-Notification-Plugin-notify-js/css/notify.css" />
<script type="text/javascript">
$(function () {
$("#tblCustomers").dataTable({
order: [],
columnDefs: [{ orderable: false, targets: [3, 4] }],
});
$('body').on('click', '[id*=btnEdit]', function () {
$('#hfAU').val('U');
$('#IsActive').removeAttr('checked').removeAttr("disabled");
$('#hfIsActive').val('false');
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();
var isActive = $(this).closest('tr').find('input[type=checkbox]').is(':checked');
$('#hfId').val(id);
$('#txtName').val(name);
$('#txtCountry').val(country);
if (isActive) {
$('#IsActive').attr('checked', 'checked');
$('#hfIsActive').val('true');
}
$('#myModal').modal('show');
});
$('#IsActive').click(function () {
if ($(this).is(':checked')) {
$('#hfIsActive').val('true');
} else {
$('#hfIsActive').val('false');
}
});
$('body').on('click', '[id*=btnAdd]', function () {
$('#hfId').val('');
$('#txtName').val('');
$('#txtCountry').val('');
$('#hfAU').val('A');
$('#IsActive').attr('checked', 'checked').attr("disabled", true);
});
});
</script>
@if (TempData["Message"] != null)
{
<script type="text/javascript">
window.onload = function () {
var message = "@TempData["Message"]";
$.notify(message, {
type: 'success',
icon: 'check',
align: "center",
verticalAlign: "top",
animation: true,
animationType: "drop",
close: true
});
};
</script>
}
</body>
</html>
Screenshot
