قبلاً چند رکورد در جدول وارد کرده ایم.
Controller
Controller از چهار روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، تمام سوابق موجود در جدول Customers به مجموعه عنوان Generic List به View باز می گردند.
روش برای درج
در داخل این روش ، شی مشتری دریافت شده در جدول مشتریان قرار می گیرد و شی مشتری به روز شده با شناسه مشتری ایجاد شده به View برگشت داده می شود.
روش به روز رسانی
در داخل این روش Action ، شیء Customer به عنوان پارامتر دریافت می شود. مقدار CustomerId از شی مشتری دریافت شده برای اشاره به سوابق مشتری در اشخاص مشتری استفاده می شود.
پس از مراجعه به فایل ، مقادیر نام و کشور به روز می شوند و تغییرات در جدول مشتری به روز می شوند.
روش حذف
در داخل این روش ، مقدار CustomerId به عنوان پارامتر دریافت می شود. مقدار CustomerId برای مرجع کردن سوابق مشتری در اشخاص مشتری استفاده می شود.
پس از مراجعه به فایل ، فایل مشتری از جدول Customer حذف می شود.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
CustomersEntities entities = new CustomersEntities();
List<Customer> customers = entities.Customers.ToList();
//Add a Dummy Row.
customers.Insert(0, new Customer());
return View(customers);
}
[HttpPost]
public JsonResult InsertCustomer(Customer customer)
{
using (CustomersEntities entities = new CustomersEntities())
{
entities.Customers.Add(customer);
entities.SaveChanges();
}
return Json(customer);
}
[HttpPost]
public ActionResult UpdateCustomer(Customer customer)
{
using (CustomersEntities entities = new CustomersEntities())
{
Customer updatedCustomer = (from c in entities.Customers
where c.CustomerId == customer.CustomerId
select c).FirstOrDefault();
updatedCustomer.Name = customer.Name;
updatedCustomer.Country = customer.Country;
entities.SaveChanges();
}
return new EmptyResult();
}
[HttpPost]
public ActionResult DeleteCustomer(int customerId)
{
using (CustomersEntities entities = new CustomersEntities())
{
Customer customer = (from c in entities.Customers
where c.CustomerId == customerId
select c).FirstOrDefault();
entities.Customers.Remove(customer);
entities.SaveChanges();
}
return new EmptyResult();
}
}
View
در داخل View ، در اولین خط کلاس مشتری روش Entity Framework به عنوان Model برای View اعلام می شود.
نمایش دادن (Display )
برای نمایش سوابق از جدول HTML استفاده می شود. یک حلقه بر روی Model اجرا خواهد شد که ردیف های جدول HTML را با سوابق مشتری ایجاد می کند.
درج کنید (Insert)
با کلیک بر روی دکمه Add ، نام و مقادیر کشور از TextBoxes مربوطه گرفته می شود و سپس با استفاده از ارتباط jQuery AJAX به روش InsertCustomer Action منتقل می شود.
پس از دریافت پاسخ ، یک ردیف جدید با استفاده از عملکرد AppendRow به جدول HTML اضافه می شود.
ویرایش کنید (Edit)
با کلیک بر روی دکمه ویرایش ، مرجع ردیف جدول HTML مشخص می شود و عناصر HTML SPAN مخفی می شوند در حالی که TextBoxes در ستونهای Name و Country در جدول HTML قابل مشاهده می باشند.
به روز رسانی (Update)
با کلیک بر روی دکمه به روزرسانی ، مرجع ردیف جدول HTML مشخص می شود و مقادیر به روز شده از ستون های TextBoxes of Name و Country گرفته می شود ، در حالی که CustomerId از عنصر HTML SPAN ستون CustomerId تعیین می شود.
مقادیر CustomerId ، Name و Country به روش UpdateCustomer Action با استفاده از ارتباط جی کوئری AJAX منتقل می شود .
پس از دریافت پاسخ ، عناصر HTML SPAN قابل مشاهده می شوند و TextBoxes برای ستونهای Name و Country از ردیف Table HTML پنهان می شوند.
لغو (Cancel)
با کلیک بر روی دکمه Cancel ، مرجع ردیف Table HTML مشخص می شود و عناصر HTML SPAN در حالی که TextBoxes در ستون های Name و Country از ردیف Table HTML پنهان می شوند ، قابل مشاهده می شوند.
حذف (Delete)
با کلیک بر روی دکمه Delete ، مرجع ردیف Table HTML مشخص می شود و مقدار CustomerId بارگیری می شود و با استفاده از ارتباط jQuery AJAX به روش DeleteCustomer Action منتقل می شود.
پس از دریافت پاسخ ، ردیف مربوطه از سطر جدول HTML حذف می شود.
@model IEnumerable<CRUD_jQuery_MVC.Customer>
@{
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:150px"></th>
</tr>
@foreach (Customer customer in Model)
{
<tr>
<td class="CustomerId">
<span>@customer.CustomerId</span>
</td>
<td class="Name">
<span>@customer.Name</span>
<input type="text" value="@customer.Name" style="display:none"/>
</td>
<td class="Country">
<span>@customer.Country</span>
<input type="text" value="@customer.Country" 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">
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="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 ($("#tblCustomers tr").length > 2) {
$("#tblCustomers tr:eq(1)").remove();
} else {
var row = $("#tblCustomers tr:last-child");
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
});
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(".Edit").show();
row.find(".Delete").show();
$("#tblCustomers").append(row);
};
//Add event handler.
$("body").on("click", "#btnAdd", function () {
var txtName = $("#txtName");
var txtCountry = $("#txtCountry");
$.ajax({
type: "POST",
url: "/Home/InsertCustomer",
data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
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("");
}
});
});
//Edit event handler.
$("body").on("click", "#tblCustomers .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", "#tblCustomers .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 customer = {};
customer.CustomerId = row.find(".CustomerId").find("span").html();
customer.Name = row.find(".Name").find("span").html();
customer.Country = row.find(".Country").find("span").html();
$.ajax({
type: "POST",
url: "/Home/UpdateCustomer",
data: '{customer:' + JSON.stringify(customer) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
});
//Cancel event handler.
$("body").on("click", "#tblCustomers .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", "#tblCustomers .Delete", function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
var customerId = row.find("span").html();
$.ajax({
type: "POST",
url: "/Home/DeleteCustomer",
data: '{customerId: ' + customerId + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if ($("#tblCustomers tr").length > 2) {
row.remove();
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
});
}
});
</script>
</body>
</html>