آموزش 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 هم به نفع کاربران است و هم به نفع صاحبان سایت. کاربر دیگر لازم نیست مدت زمان زیادی منتظر بارگذاری کامل صفحه بماند و در پهنای باند او نیز صرفه جویی می‌شود. در مقابل صاحب سایت هم برنده است چون با ارائه یک تکنولوژی جدید و بسیار کاربردی می‌تواند مشتریان بیشتر و سرویس‌دهی بهتری داشته باشد.