آموزش Asp.Net MVC کار با Ajax

آموزش Asp.Net MVC کار با Ajax | برای توضیح بهتر این بخش ابتدا باید بگوییم Ajax چیست ؟ Ajax – ایجکس مخفف عبارت Asynchronous JavaScript and XML به معنی جاوا اسکریپت و XML ناهمگام است. Ajax روشی برای ارتباط میان سرور و کلاینت است و پیشبرد به‌روزرسانی بخش‌های مختلف یک سایت را بدون بارگذاری مجدد تمام صفحه به وسیله Ajax انجام می‌شود. یکی از روش‌های متعددی که امکان پویایی و واکنش‌پذیری وب‌سایت‌ها را فراهم می‌کنند، استفاده از Ajax است.

یا به زبان ساده میتوان گفت تکنولوژی ای‌جکس AJAX یک تکنیک پرکاربرد در طراحی وب است که بهبود خدمت‌رسانی به کاربران را در سرویس‌های مختلف سبب می‌شود. همه افرادی که وارد دنیای اینترنت می‌شوند به نوعی از این تکنولوژی بهره می‌برند. حتما هنگامی که جستجویی در گوگل انجام داده‌اید مشاهده کرده‌اید که به محض تایپ کلمات؛ پیشنهادات مشابهی توسط گوگل به شما ارائه می‌شود. این امکان در پشت صحنه توسط تکنولوژی AJAX برای شما فراهم می‌شود و در حقیقت ایجکس است که این نتایج را به سرعت برای شما فراخوانی کرده و نمایش می‌دهد. یا زمانی که از سرویس Gmail استفاده می‌کنید و بدون رفرش کردن صفحه ایمیل‌های جدید را مشاهده می‌کنید از این تکنولوژی بهره می‌برید.

استفاده از تکنولوژی ای‌جکس AJAX به ما کمک میکند به جای اینکه کل یک صفحه را به سمت سرور ارسال کنیم فقط بخشی از آن را ارسال کنیم، بدون رفرش شدن صفحه.

ساختار کلی Ajax

ساختار کلی Ajax به شکل زیر است که در ادامه به تعریف مقادیر ورودی آن میپردازیم

$.ajax({
    url: '/Contoroller Name/Action Name' //or @Url.Action("Action Name","Contoroller Name"),
    type: 'POST',
    data: { x:"hellow",y:"سلام" },
    success: function (res) {
        alert(res);
    },
    error: function (error) {
        alert(error);
    }
});

• فیلد url : در این بخش باید آدرس اکشنی که قرار است عملیات مورد نظر ما در آن اتفاق بیفتد را وارد کنیم.
• فیلد type : در این بخش مشخص میکنیم اطلاعات ما به صورت Post ارسال شود یا Get.
• فیلد success : این بخش زمانی اجرا میشود که عملیات Ajax ای ما با مفقیت انجام شده باشد و همچنین یک متغییر میگیرد که میتوان اطلاعات را از سمت سرور دریافت کرد و در داخل آن ریخت و نمایش داد.
• فیلد error : بر عکس فیلد success است و زمانی اجرا میشود که عملیات Ajax ای ما با مفقیت انجام نشده باشد و همچنین یک متغییر میگیرد که میتوان اطلاعات را از سمت سرور دریافت کرد و در داخل آن ریخت و نمایش داد.

مثال ۱ – ثبت اطلاعات به صورت Ajax

در این مثال قصد داریم تا اطلاعات یک کاربر را دیتابیس خود اضافه کنیم. برای ثبت ۳ فیلد نام، نام خانوادگی و رمز عبور را رد نظر گرفته ایم.

توجه : از این روش زمانی میتوان استفاده کرد که از تگ Form و اتربیوت ValidateAntiForgeryToken استفاده نشده باشد.

• توسط دستورات Jquery اطلاعات را از input ها دریافت میکنیم.
• توسط تابع Ajax آن ها را به سمت سرور ارسال میکنیم.

کد های View

function CreateUser() {
    var Name = $('#Name').val();
    var Family = $('#Family').val();
    var Password = $('#Password').val();
    $.ajax({
        url: '/User/CreateUser',
        type: 'POST',
        data: { Name: Name, Family: Family, Password: Password },
        success: function () {
            alert("عملیات با موفقیت انجام شد");
        },
        error: function () {
            alert("خظا");
        }
    });
}

کدهای Contoroller

[HttpPost]
public ActionResult CreateUser(User user)
{
    db.Users.Add(user);
    db.SaveChanges();
    return View();
}

مثال ۲ – ثبت اطلاعات به صورت Ajax و حل مشکل ValidateAntiForgeryToken

زمانی که اتربیوت های @Html.AntiForgeryToken() در سمت ویو و [ValidateAntiForgeryToken] در سمت اکشن وجود دارد یعنی ما میخواهیم اعتبار سنجی بر اساس توکن داشته باشیم. ولی مشکلی که وجود دارد این است ما باید توکن سمت ویو را به سمت اکشن ارسال کنیم تا اعتبار سنجی انجام شود و ارور زیر را نداشته باشیم.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

توجه : از این روش زمانی میتوان استفاده کرد که از تگ Form استفاده نشده باشد.

در صورتی که از ویو خود یک View Page Source بگیرید متوجه میشوید یک Input از نوع Hiden و با نام RequestVerificationToken توسط سیستم ساخته شده و مقدار توکن داخل آن قرار گرفته شده است.

__RequestVerificationToken

برای دریافت مقدار Token توسط دستور زیر ابتدا مقدار این Input را داخل متغییری به نام token میریزیم.

var token = $('[name="__RequestVerificationToken"]').val();

و توسط دستور زیر همراه با بقیه اطلاعات آن را به سمت اکشن مورد نظر خود ارسال میکنیم.

data: { __RequestVerificationToken: token, Name: Name, Family: Family, Password: Password },

مشاهده کامل کدها

function CreateUser() {
    var Name = $('#Name').val();
    var Family = $('#Family').val();
    var Password = $('#Password').val();
    var token = $('[name="__RequestVerificationToken"]').val();
    $.ajax({
        url: '/User/CreateUser',
        type: 'POST',
        data: { __RequestVerificationToken: token, Name: Name, Family: Family, Password: Password },
        success: function () {
            alert("عملیات با موفقیت انجام شد");
        },
        error: function () {
            alert("خظا");
        }
    });
}