آموزش Asp.Net MVC کار با Ajax | برای توضیح بهتر این بخش ابتدا باید بگوییم Ajax چیست ؟ Ajax – ایجکس مخفف عبارت Asynchronous JavaScript and XML به معنی جاوا اسکریپت و XML ناهمگام است. Ajax روشی برای ارتباط میان سرور و کلاینت است و پیشبرد بهروزرسانی بخشهای مختلف یک سایت را بدون بارگذاری مجدد تمام صفحه به وسیله Ajax انجام میشود. یکی از روشهای متعددی که امکان پویایی و واکنشپذیری وبسایتها را فراهم میکنند، استفاده از Ajax است.
یا به زبان ساده میتوان گفت تکنولوژی ایجکس AJAX یک تکنیک پرکاربرد در طراحی وب است که بهبود خدمترسانی به کاربران را در سرویسهای مختلف سبب میشود. همه افرادی که وارد دنیای اینترنت میشوند به نوعی از این تکنولوژی بهره میبرند. حتما هنگامی که جستجویی در گوگل انجام دادهاید مشاهده کردهاید که به محض تایپ کلمات؛ پیشنهادات مشابهی توسط گوگل به شما ارائه میشود. این امکان در پشت صحنه توسط تکنولوژی AJAX برای شما فراهم میشود و در حقیقت ایجکس است که این نتایج را به سرعت برای شما فراخوانی کرده و نمایش میدهد. یا زمانی که از سرویس Gmail استفاده میکنید و بدون رفرش کردن صفحه ایمیلهای جدید را مشاهده میکنید از این تکنولوژی بهره میبرید.
استفاده از تکنولوژی ایجکس 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);
}
});
در این مثال قصد داریم تا اطلاعات یک کاربر را دیتابیس خود اضافه کنیم. برای ثبت ۳ فیلد نام، نام خانوادگی و رمز عبور را رد نظر گرفته ایم.
توجه : از این روش زمانی میتوان استفاده کرد که از تگ Form و اتربیوت ValidateAntiForgeryToken استفاده نشده باشد.
کد های 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();
}
زمانی که اتربیوت های @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 توسط سیستم ساخته شده و مقدار توکن داخل آن قرار گرفته شده است.
برای دریافت مقدار 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("خظا");
}
});
}