آموزش Ajax ثبت اطلاعات فرم توسط Ajax.BeginForm

Ajax.BeginForm یک متد اکستنشن کمکی در ASP.NET MVC است. این متد اطلاعات فرم را بدون بارگذاری دوباره کل صفحه به سرور ارسال می‌کند. بنابراین، کاربر می‌تواند نتیجه عملیات را سریع‌تر مشاهده کند.

برای استفاده صحیح از Ajax.BeginForm، ابتدا باید کتابخانه jquery.unobtrusive-ajax را به پروژه اضافه کنید. برای اضافه کردن این کتابخانه روش‌های مختلفی وجود دارد؛ بااین‌حال، ساده‌ترین روش استفاده از NuGet Package Manager است. سپس باید فایل این کتابخانه را در صفحه یا فایل Layout فراخوانی کنید. برای یادگیری کامل نحوه کار با Ajax.BeginForm نیز می‌توانید ویدیوی آموزشی آن را مشاهده کنید.

مثال ۹ – ثبت اطلاعات فرم توسط Ajax.BeginForm

در این آموزش، اطلاعات فرم را با استفاده از Ajax.BeginForm و به‌صورت Ajax ثبت می‌کنیم. Ajax.BeginForm به ما کمک می‌کند تا فرم را بدون بارگذاری دوباره کل صفحه ارسال کنیم. برای شروع، ابتدا باید هلپر Ajax.BeginForm را به‌صورت زیر تنظیم کنیم.

• ورودی اول، نام اکشن را مشخص می‌کند.
• ورودی دوم، نام کنترلر را مشخص می‌کند.
• سپس، روش ارسال اطلاعات را در تنظیمات AjaxOptions روی POST قرار می‌دهیم.
• در نهایت، تنظیمات Ajax را داخل یک شیء از نوع AjaxOptions وارد می‌کنیم.

تنظیمات AjaxOptions

شیء AjaxOptions گزینه‌های مختلفی برای کنترل عملیات Ajax دارد. بنابراین، می‌توانیم مشخص کنیم که برنامه در آغاز، پایان، موفقیت یا شکست عملیات چه کاری انجام دهد.

• گزینه HttpMethod روش ارسال اطلاعات را مشخص می‌کند. برای مثال، می‌توانیم مقدار آن را روی POST قرار دهیم.
• گزینه OnBegin در آغاز عملیات ارسال فرم اجرا می‌شود.
• گزینه OnComplete پس از پایان عملیات Ajax اجرا می‌شود. این تابع در هر دو حالت موفقیت و شکست اجرا خواهد شد.
• گزینه OnSuccess زمانی اجرا می‌شود که سرور درخواست را با موفقیت پردازش کند.
• گزینه OnFailure زمانی اجرا می‌شود که عملیات Ajax با خطا روبه‌رو شود.
• گزینه UpdateTargetId شناسه یک المان HTML را دریافت می‌کند. پس از دریافت پاسخ سرور، این گزینه محتوای المان موردنظر را با نتیجه اکشن به‌روزرسانی می‌کند. برای مثال، اکشن می‌تواند یک Partial View یا محتوای HTML برگرداند و Ajax نتیجه را در المان موردنظر نمایش دهد.

توجه داشته باشید که UpdateTargetId یک ID دریافت می‌کند؛ اما گزینه‌های OnBegin، OnComplete، OnSuccess و OnFailure نام یک تابع JavaScript را دریافت می‌کنند. بنابراین، هنگام وارد کردن نام تابع نباید از پرانتز یا علامت نامبر ساین (#) استفاده کنید.

@using (Ajax.BeginForm(
    "Create",
    "Blog",
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnBegin = "OnBegin",
        OnComplete = "OnComplete",
        OnSuccess = "OnSuccess",
        OnFailure = "OnFailure",
        UpdateTargetId = "ShowResult"
    },
    null
))
{
    // Form fields
}

علاوه بر این، باید توابع JavaScript مربوط به رویدادهای Ajax را در صفحه تعریف کنید. برای مثال، کد زیر چهار تابع موردنیاز را ایجاد می‌کند.

function OnBegin() {
    console.log("ارسال فرم آغاز شد.");
}

function OnComplete() {
    console.log("عملیات ارسال فرم پایان یافت.");
}

function OnSuccess(response) {
    console.log("اطلاعات با موفقیت ثبت شد.");
}

function OnFailure(error) {
    console.log("هنگام ارسال اطلاعات خطایی رخ داد.");
}

سپس باید المانی با شناسه ShowResult در صفحه قرار دهید. در نتیجه، Ajax پاسخ اکشن را داخل این المان نمایش می‌دهد.

<div id="ShowResult"></div>

برای اجرای صحیح این کد، ابتدا پکیج Microsoft.jQuery.Unobtrusive.Ajax را از NuGet Package Manager نصب کنید. سپس فایل jquery.unobtrusive-ajax.min.js را بعد از فایل jQuery در صفحه فراخوانی کنید.