ساخت فرم Ajax به همراه Loading

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

برخی کاربران ممکن است فرم Ajax خود را به خوبی درست کرده باشند و بدون مشکل کار کند اما فرم آنها Loading نداشته باشد، این ممکن است در اجرای برنامه در Local host خیلی به چشم نیاید و عمق مسئله را درک نکنید. ولی فرض کنید که پروژه را روی سرور آپلود کردید. همانطور که می‌دانید سرعت ااجرای برنامه در سرور به خوبی Local host نیست.

اگر نحوه آپلود سایت mvc همراه دیتابیس در هاست را نمی‌دانید می‌توانید به قسمت نحوه انتقال سایت mvc از کامپیوتر به هاست  مراجعه کنید.

حال ممکن است کاربری اطلاعات فرم را پر کند و روی دکمه ی ارسال کلیک کند:

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

برای اینکه کاربر متوجه شود که دکمه به درستی کار کرده و اطلاعات ارسال شده یک تصویر متحرک به عنوان Loading قرار می‌دهیم.

Ajax چیست؟

گاهی ممکن است نیاز داشته باشید تا فقط بخشی از صفحه تغییر کند و نمی‌خواهید که کل صفحه مجدد Load شود. مانند لایک کردن یک مطلب یا…

برای اینکار از Ajax استفاده می‌کنیم.

طراحی سایت خود را به ما بسپارید

افزودن Ajax به پروژه ASP.NET MVC

1 – برای این کار ابتدا یک پروژه ASP.NET MVC را می‌سازیم.

2 – سپس وارد قسمت Package Manager Console می‌شویم:

3 – سپس سایت nuget.org را باز کرده و کلمه ی Ajax را جستوجو می‌کنیم:

4 – وقتی صفحه ی زیر را مشاهده کردید روی گزینه اول کلیک کنید:

5 – سپس صفحه ی زیر را مشاهده می‌کنید که متن درون کادر را کپی کنید:

6 – حال به Visual Studio برگردید و متنی که کپی کردید را در Package Manager Console  پس از عبارت ” <PM ” وارد کنید و کلید Enter را فشار دهید.

7 – حال منتظر بمانید تا Ajax با موفقیت در پروژه ی شمانصب شود.

تبریک : شما با موفقیت Ajax را در پروژه ی خود نصب کردید. 🙂

طراحی سایت به همراه طراحی لوگو با قیمت باور نکردنی

ساخت فرم Ajax به همراه Loader

1 – در مرحله ی اول وارد Layout پروژه شوید. و در قسمت head فایل های مربوط به ajax را Drop کنید: (منظور فایل jquery.unobtrusive-ajax.js است که در پوشه Scripts قرار دارد)

2 – حال شما می‌توانید از Ajax در صفحاتی که از این Layout استفاده می‌کنند، استفاده کنید.

3 – سپس به صفحه ی مربوطه می‌رویم و فرم Ajax را به صورت زیر می‌سازیم:

حال مقادیر درون Ajax Options را توضیح می‌دهیم:

1. UpdateTargetId : در این قسمت باید ID مربوط به قسمتی که قصد داریم پس از پردازش اطلاعات در آن پیغام و یا حاصل پردازش نمایش داده شود را می‌نویسیم. به عنوان مثال فرض کنید که میخواهید حاصل جمع دو عدد پس از محاسبه را نمایش دهید.
2. LoadingElementID : در این قسمت باید ID مربوط به قسمتی که در آن تصویر و یا متنی که می‌خواهید هنگام پردازش به کاربر نمایش دهد را در آن قرار دادی را وارد کنید.
3. InsertionMode : برای این قسمت 3 حالت داریم :
   Replace : به معنای اینکه محتوای پس از پردازش را جایگزین محتوای قسمت DivUpdate کن.
   After : به معنای این که محتوای پس از پردازش را بعد از محتوای درون DivUpdate قرار بده و به محتوای آن اضافه کن.
   Before : به معنای این که محتوای پس از پردازش را قبل از محتوای درون DivUpdate قرار بده و به محتوای آن اضافه کن.
4. HttpMethod : برای مشخص کردن نوع متد که Post است یا Get.

با ما سایت خود را در صفحه اول گوگل پیدا کنید .

مراحل اجرای فرم Ajax

پس با توجه به مطالبی که بالا گفتیم و با توجه به فرمی که ساختیم، فرم ما به صورت زیر کار می‌کند:

وقتی روی دکمه ی ارسال کلیک شود

1. DivLoading که به صورت پیشفرض نمایش داده نمی‌شود، نمایان می‌شود.
2. اطلاعات فرم به اکشن Add ارسال می‌شود.
3. در اکشن محاسبات روی اطلعات انجاممی‌شود.
4. نتیجه ی محاسبات جایگزین محتوای DivUpdate می‌شود.
5. سپس DivLoading مجدد محو می‌شود.

---

امیدوارم که این مقاله از سری مقالات آموزش ASP.NET MVC برای شما مفید بوده باشد.
با آرزوی موفقیت برای همه شما کاربران عزیز وبسایت پرعلم.

ساخت فرم Ajax به همراه Loading