ثبت اطلاعات یک فرم با Ajax

این آموزش در راستای آموزش قبلی میباشد. در آموزش قبل کلیات و ساختار Ajax را مورد برسی قرار دادیم و در این قسمت قصد داریم تا ثبت اطلاعات یک فرم را با کمک Ajax مورد برسی قرار دهیم. برای مشاهده تمام قسمت های آموزش Ajax در ASP.NET MVC 5 اینجا کلیک کنید.

مثال ۳ – ثبت اطلاعات یک فرم به صورت Ajax

در این مثال قصد داریم تا فرم های استانداردی که نوسط خود Visual Studio برای Create کردن ایجاد میشود را به حالت Ajax دربیاوریم.

• گام اول : برای اینکه به تگ فرم توسط دستورات Jquery دسترسی داشته باشیم به هلپر Html.BeginForm باید یک ID اختصاص بدهیم. در این مثال به هلپر Html.BeginForm آی دی Myform را نسبت دادیم.

@using (Html.BeginForm("Register", "User", FormMethod.Post, new {@id="Myform"}))

• گام دوم : توسط دستور زیر رویداد کلیک روی دکمه فرم را زیر نظر میگیریم

$("#Myform").submit(function (e) {
});

• گام سوم : توسط دستور زیر از ارسال یا همان Submit شدن فرم جلوگیری میکنیم.

e.preventDefault();

• گام چهارم : توسط دستور زیر برسی میکنیم آیا فرم اعتبار سنجی شده یا خیر، یعنی اینکه تمام  فیلد ها درست پر شده اند یا خیر.

if ($("#Myform").valid()) {
alert("تمامی فیلد ها به درستی پر شده است");
} else {
alert("تمامی فیلد ها به درستی پر نشده است");
}

• گام پنجم : دستورات Ajax خود را وارد میکنیم.

var Name = $('#Name').val();
var Family = $('#Family').val();
var Password = $('#Password').val();
var token = $('[ name="__RequestVerificationToken"]').val();
$.ajax({
url: '/User/Test',
type: 'POST',
data: { __RequestVerificationToken: token, Name: Name, Family: Family, Password: Password },
success: function (res) {
alert(res);
},
error: function (error) {
alert(error);
}
});

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

$("#MyForm").submit(function (e) {
e.preventDefault();
if ($("#MyForm").valid()) {
alert("تمامی فیلد ها به درستی پر شده است");
var Name = $('#Name').val();
var Family = $('#Family').val();
var Password = $('#Password').val();
var token = $('[ name="__RequestVerificationToken"]').val();
$.ajax({
url: '/User/Test',
type: 'POST',
data: { __RequestVerificationToken: token, Name: Name, Family: Family, Password: Password },
success: function (res) {
alert(res);
},
error: function (error) {
alert(error);
}
});
} else {
alert(" فیلد ها به درستی پر نشده است");
}
});

مثال ۴ – ثبت اطلاعات و دریافت اطلاعات به صورت Html – رفرش کردن ویو یک اکشن

حال قصد داریم تا زمانی که یک کاربر ثبت میشود، آن کاربر را بدون اینکه صفحه رفرش شود در همان صفحه نمایش دهیم.

• گام اول : یک پارشیال ایجاد میکنیم و در آن لیست کاربران را قرار میدهیم . توسط دستور زیر میتوان پارشیال را به ویو اضافه کرد.

@Html.Action("Partial Name")

• گام دوم : در اکشن مربوطه توسط کد زیر پارشیال لیست کاربران را return RedirectToAction میکنیم. تا اطلاعات را به صورت Html به سمت ویو برگرداند.

return RedirectToAction("Partial Name");

• گام سوم : در ویو توسط دستورات Jquery و در فیلد success تابع Ajax کدهای Html پارشیال را حذف کرده و کدهای Html جدید دریافت شده را جایگزین میکنیم.

$('#Id Partial View').html(res);

مشاهده کدهای سمت View

$("#MyForm").submit(function (e) {
e.preventDefault();
if ($("#MyForm").valid()) {
var Name = $('#Name').val();
var Family = $('#Family').val();
var Password = $('#Password').val();
var token = $('[ name="__RequestVerificationToken"]').val();
$.ajax({
url: '/User/Test',
type: 'POST',
data: { __RequestVerificationToken: token, Name: Name, Family: Family, Password: Password },
success: function (res) {
$('#MyList').html(res);
},
error: function (error) {
alert(error);
}
});
} else {
alert(" فیلد ها به درستی پر نشده است");
}
});

مشاهده کدهای سمت Action

public ActionResult Test()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Test([Bind(Include = "UserID,Name,Family,Password")] User user)
{
if (ModelState.IsValid)
{
db.Users.Add(user);
db.SaveChanges();
return RedirectToAction("Testxx");
}
return Content("عملیات با موفقیت انجام نشد.");
}

مثال ۵ – نمایش spinner یا حالت Loader در زمان ثبت یا دریافت اطلاعات

برای نمایش spinner زمانی که در حالت ارسال و یا دریافت اطلاعات هستید میتوانید از دستورات ()Hide و یا ()Show و یا هر دستوری که مناسب هست استفاده کنید ولی مهم جایی است که یک المان را فعال و جایی است که یک المان را غیر فعال میکنید. بهترین مکان برای نمایش و لغو نمایش spinner و یا Loader در کد های Jquery در کد زیر نمایش داده شده است.

توجه داشته باشید که Loader و یا spinner خود را هم در تابع success و هم در تابع error غیر فعال کنید.

//Show Spinner or Loader
$.ajax({
url: ... ,
type: ... ,
data: ... ,
success: function (res) {
//Hide Spinner or Loader
},
error: function () {
//Hide Spinner or Loader
}
});