رویداد حذف، اضافه و نمایش اطلاعات با Ajax

حذف و اضافه و نمایش با Ajax – در آموزش های قبلی با ساختار کلی آژاکس و نحوه درج اطلاعات یک فرم و ارسال و دریافت Json آشنا شدیم در این آموزش به رویداد های حذف و اضافه و نمایش اطلاعات خواهیم پرداخت.

آنچه در قسمت های قبل آموختیم

مواردی که در قسمت های قبل درباره Ajax یاد گرفتیم :

• آموزش Asp.Net MVC کار با Ajax
• ثبت اطلاعات یک فرم با Ajax
• ارسال و دریافت اطلاعات به صورت Json با Ajax

همچنین میتوانید برای مشاهده تمام قسمت های آموزش Ajax در ASP.NET MVC 5 اینجا کلیک کنید.

مثال ۸ – رویداد حذف و اضافه و نمایش اطلاعات

• کد های Ajax سمت ویو افزودن یک فیلد جدید

$("#MyForm").submit(function (e) {
e.preventDefault();
var name= $('#Name').val();
var password= $('#Password').val();
var family = $('#Family').val();
var token = $('[name="__RequestVerificationToken"]').val();
if ($("#MyForm").valid()){
$.ajax({
url: '/DeleteUser/Index',
type: 'POST',
dataType: 'json',
data: { __RequestVerificationToken: token, Name: name, Family: family, Password: password },
success: function (data) {
if (data['success'] == true) {
ClearList();
RefreshList();
} else {
alert('error1');
}
},
error: function () {
alert("erroe2");
}
});
}
});

• کد های سمت سرور افزودن یک فیلد جدید

public ActionResult Index()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Index([Bind(Include = "Name,Family,Password")] User user)
{
if (ModelState.IsValid)
{
db.Users.Add(user);
db.SaveChanges();
return Json(new { success = true, JsonRequestBehavior.AllowGet });
}
return Json(new { success = false, JsonRequestBehavior.AllowGet });
}

• کد های Ajax سمت ویو حذف یک فیلد

function MyDelete(id) {
var token = $('[name="__RequestVerificationToken"]').val();
$.ajax({
url: '/DeleteUser/Delete',
type: 'POST',
dataType: 'Json',
data: { __RequestVerificationToken: token, id: id },
success: function (data) {
if (data['success']=true) {
RefreshList();
} else {
alert('error');
}
},
error: function () {
alert('error');
}
});
}

• کد های سمت سرور حذف یک فیلد

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Delete(int ? id) {
if (id == null)
{
return Json(new { success = false, JsonRequestBehavior.AllowGet });
}
var user=db.Users.Find(id);
if (user == null)
{
return Json(new { success = false, JsonRequestBehavior.AllowGet });
}
db.Users.Remove(user);
db.SaveChanges();
return Json(new { success = true,JsonRequestBehavior.AllowGet });
}

• کد های Ajax سمت ویو نمایش و بروزرسانی لیست

function RefreshList() {
$.ajax({
url: '/DeleteUser/ShowUserList',
type: 'POST',
success: function (data) {
$('#MyList').html(data);
}
});
}

• کد های  سمت سرور نمایش و بروزرسانی لیست

public ActionResult ShowList()
{
var user=db.Users.ToList();
return PartialView(user);
}
public ActionResult ShowUserList()
{
return RedirectToAction("ShowList");
}

جرا رویداد های خود را با Ajax ایحاد کردیم ؟

باید بگوییم که Ajax به ما کمک می‌کند بدون بارگذاری کل صفحه (Refresh) محتوای بخشی از آن را بروزرسانی (Update) کنیم. استفاده از Ajax هم به نفع کاربران است و هم به نفع صاحبان سایت. کاربر دیگر لازم نیست مدت زمان زیادی منتظر بارگذاری کامل صفحه بماند و در پهنای باند او نیز صرفه جویی می‌شود. در مقابل صاحب سایت هم برنده است چون با ارائه یک تکنولوژی جدید و بسیار کاربردی می‌تواند مشتریان بیشتر و سرویس‌دهی بهتری داشته باشد.