public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
List<CustomerModel> customers = this.Context.Customers.ToList();
customers.Insert(0, new CustomerModel());
return View(customers);
}
[HttpPost]
public IActionResult InsertCustomer(CustomerModel customer)
{
this.Context.Customers.Add(customer);
this.Context.SaveChanges();
return Json(customer);
}
[HttpPost]
public IActionResult DeleteCustomer(int CustomerId)
{
CustomerModel customer = (from c in this.Context.Customers
where c.CustomerId == CustomerId
select c).FirstOrDefault();
this.Context.Customers.Remove(customer);
this.Context.SaveChanges();
return new EmptyResult();
}
}
@model List<CustomerModel>
@using Add_Delete_Rows_Table_Core_MVC.Models
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
<tr>
<th style="width:100px">Customer Id</th>
<th style="width:150px">Name</th>
<th style="width:150px">Country</th>
<th style="width:40px"></th>
</tr>
@foreach (CustomerModel customer in Model)
{
<tr>
<td class="CustomerId">
<span>@customer.CustomerId</span>
</td>
<td class="Name">
<span>@customer.Name</span>
</td>
<td class="Country">
<span>@customer.Country</span>
</td>
<td>
<a class="Delete" id="btnDelete" 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">
Country:<br />
<input type="text" id="txtCountry" style="width:140px" />
</td>
<td style="width: 200px">
<br />
<input type="button" id="btnAdd" value="Add" />
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Remove the dummy row if data present.
if ($("#tblCustomers tr").length > 2) {
$("#tblCustomers tr:eq(1)").remove();
} else {
var row = $("#tblCustomers tr:last-child");
row.find(".Delete").hide();
row.find("span").html(' ');
}
});
$("body").on("click", "#btnAdd", function () {
var name = $("#txtName").val();
var country = $("#txtCountry").val();
$.ajax({
type: "POST",
url: "/Home/InsertCustomer",
data: { Name: name, Country: country },
success: function (r) {
var row = $("#tblCustomers tr:last-child");
if ($("#tblCustomers tr:last-child span").eq(0).html() != " ") {
row = row.clone();
}
AppendRow(row, r.CustomerId, r.Name, r.Country);
txtName.val("");
txtCountry.val("");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
function AppendRow(row, customerId, name, country) {
//Bind CustomerId.
$(".CustomerId", row).find("span").html(customerId);
//Bind Name.
$(".Name", row).find("span").html(name);
$(".Name", row).find("input").val(name);
//Bind Country.
$(".Country", row).find("span").html(country);
$(".Country", row).find("input").val(country);
row.find(".Delete").show();
$("#tblCustomers").append(row);
};
$("body").on("click", "#tblCustomers .Delete", function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
$.ajax({
type: "POST",
url: "/Home/DeleteCustomer",
data: { CustomerId: row.find("span").html() },
success: function (response) {
if ($("#tblCustomers tr").length > 2) {
row.remove();
} else {
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
});
}
});
</script>
</body>
</html>