آموزش ajax در asp net mvc – استفاده از AJAX در ASP.NET MVC | گام به گام و تصویری

3.87k بازدید
آخرین بروزرسانی: 27 دی 1403
Ajax, Asp.net, سی شارپ #C
زمان مطالعه: 13 دقیقه

آموزش ajax در asp net mvc عنوان موضوعی است که در این پست می خواهیم در مورد آن صحبت کنیم. در این آموزش ابتدا در مورد تکنولوژی آژاکس ajax صحبت خواهیم کرد و اشاره ای کوتاه به MVC نویسی خواهیم کرد. پس از ارائه توضیحات کلی وارد مرحله پیاده پیاده سازی Ajax در ASP.Net خواهیم شد و مراحل انجام کار را بصورت تصویری نشان خواهیم داد. پس برای یادگیری نحوه استفاده از AJAX در ASP.NET MVC با ما همراه باشید.

AJAX چیست؟

آژاکس AJAX یا ایجکس سرنام عبارت Asynchronous JavaScript And XML است و به معنای جاوا اسکریپت و XML ناهمزمان است. ولی این معنا کمی گنگ است و باید مفهومی از آژاکس ارائه شود تا بهتر متوجه شوید که AJAX چیست؟

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

مزایای استفاده از آژاکس

کاهش بار سرور و افزایش سرعت صفحه
فعال شدن بارگذاری تنبل صفحه یا همان Lazy Loading
استفاده از پهنای باند کم
اعتبار سنجی فرم
کاربر پسند

پیاده سازی Ajax در ASP.Net

پیاده سازی Ajax را می توان به دو صورت در ASP.Net Application انجام داد:

با استفاده از پنل به روز رسانی
با استفاده از جی کوئری jQuery

چه پیشرفت هایی برای آژاکس ایجاد شده است؟

حتماً می‌دانید جاوا اسکریپت JS زبان برنامه نویسی سمت سرویس گیرنده و XML زبان نشانه گذاری برای تعریف داده ها است. از طرفی JSON (JavaScript Object Notation) را به عنوان زبان نشانه گذاری دیگری برای تعریف داده ها داریم. استفاده از JSON همراه با جاوا اسکریپت بسیار راحت تر از XML است. پس از ترکیب جاوا اسکریپت و آژاکس، سرویس های وب XML با وب سرویس های JSON جایگزین می شوند.

یکی دیگر از پیشرفت های مهم جاوا اسکریپت و آژاکس، کتابخانه شی جاوا اسکریپت به نام jQuery است که یک نرم افزار رایگان و منبع باز است. می توان گفت جی کوئری jQuery یک بسته‌بندی برای جاوا اسکریپت است. jQuery برای نوشتن جاوا اسکریپت، پیمایش و دستکاری یک صفحه و ایجاد کال‌بک های غیرهمزمان Ajax استفاده می شود.

از این رو، کال‌بک‌های Ajax با استفاده از سرویس‌های وب jQuery و JSON برای طراحی و توسعه برنامه‌های کاربردی وب به روش‌های برنامه‌نویسی استاندارد تبدیل شده‌اند. برای اطلاعات بیشتر در این زمینه می توانید مجموعه آموزش‌ jQuery (جی کوئری) سایت فرادرس را تهیه کنید.

MVC چیست؟

قبل از آموزش ajax در asp net mvc بایستی با مفهوم MVC آشنا شویم. MVC مخفف عبارت Model View Controller می باشد و معنای آن کنترلر نمای مدل است. خوب منظور از کنترلر نمای مدل یعنی چه؟ در واقع بهتر است بگوییم MVC یک نوع معماری برنامه نویسی است که از سه سطح یا لایه تشکیل می شود. شاید نام برنامه نویسی سه لایه به گوشتان خورده باشد MVC دقیقاً همان برنامه نویسی سه لایه است.

مدل معماری MVC نرم افزار را به سه بخش مدل، نماها و کنترلر تقسیم بندی می کند تا توسعه و دستیابی به قسمت های مختلف پروژه آسان شود و تغییر یا بروز رسانی در یک قسمت از پروژه سبب درگیری کل قسمت های پروژه نباشد. به عنوان مثال نحوه دسترسی به پایگاه داده در یک سطح تعریف می شود و هر تغییری در نحوه اتصال به پایگاه داده در همان سطح انجام می شود و لازم نیست در تمام قسمت های پروژه تغییرات ایجاد شود.

Model: در قسمت مدل با تمام داده هایی که کاربر با آن کار می کند سر و کار داریم. بخش مدل می تواند داده هایی را که بین دو اجزای دیگر یعنی View و Controller وجود دارند، جابجا کند. به عنوان مثال، یک Object، اطلاعات مشتری را از پایگاه داده می خواند، آن را دستکاری کرده و داده های آن را در پایگاه داده قرار می‌دهد.

Views: قسمت View برای رابط کاربری یا UI استفاده می شود. به عنوان مثال، view می تواند شامل تمام اجزای رابط کاربری مانند تکست باکس، لیست باکس ها، تصاویر و غیره است که کاربر نهایی با آنها تعامل دارد.

controller: کنترلرها به عنوان یک رابط بین Model و View عمل می‌کنند تا درخواست‌های دریافتی را پردازش کند، در واقع کنترلر، وظیفه پردازش داده‌ها از Model را دارد تا در Views برای ارائه خروجی نهایی آماده شود.

آموزش کامل MVC در PHP — از صفر تا صد و به زبان ساده __ کلیک کنید

آموزش ajax در asp net mvc

در این بخش از آموزش ajax در asp net mvc به مرحله پیاده پیاده سازی Ajax در ASP.Net می رسیم. در این بخش از آموزش یاد خواهیم گرفت که چگونه از AJAX در ASP.NET MVC استفاده کنیم. پس مراحل آموزش را بطور کامل یاد بگیرید و خودتان نیز در سیستم تست کنید. (در پایان آموزش می توانید سورس کد کامل آموزش ajax در asp net mvc را از باکس انتهای مطالب دانلود کنید)

برنامه ها و وب سایت های قدیمی برای پردازش داده ها به فراخوانی روش های همزمان متکی هستند. یعنی هر بار که داده ها از طریق یک صفحه ارسال می شوند، کل صفحه وب به سرور پست می شود که باعث تاخیر در عملکرد صفحه اشاره شده خواهد شد.

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

در این آموزش سعی کردیم مفهوم به‌روز رسانی جزئی یک صفحه برای نمایش جزئیات محصول به صورت ناهمزمان را توضیح دهیم. یعنی به جای لود کل صفحه پس از ارسال و دریافت درخواست، قسمت جزئی از صفحه لود یا بروز رسانی شود (همان کاری که تکنولوژی آژاکس انجام می دهد).

برای سادگی کار، جزئیات سه محصول را به صورت ایستا در یک لیست ذخیره کرده ایم و کد محصول وارد شده توسط کاربر را جستجو می کنیم و جزئیات محصول مربوطه را نمایش خواهیم داد بدون اینکه کل صفحه لود شود.

۱- ایجاد پروژه جدید

برای شروع کار، ابتدا Microsoft Visual Studio را باز کنید (در آموزش ajax در asp net mvc ما از Microsoft Visual Studio 2015 استفاده کرده ایم) از منوی فایل یک پروژه جدید با نام AjaxDemo مانند شکل زیر ایجاد کنید:

در قسمت بعدی MVC را انتخاب کرده و OK را بزنید تا پروژه جدید ایجاد شود. (البته می توانستیم Empty را نیز انتخاب کنیم ولی قصد داریم تا شما فولدر ها و قسمت های مختلف یک پروژه MVC در ASP.net را ببینید)

کمی منتظر بمانید تا پروژه شما ایجاد شود. مسیر ذخیره پروژه را هم در نظر داشته باشید. شکل زیر نمای کلی از پروژه را نشان می‌دهد:

همانطور که در پنجره Solution Explorer مشخص شده قسمت ها Model، Views و Controllers وجود دارند و به طور پیش فرض کلاس هایی در درون این پوشه ها وجود دارند. با فایل ها و کلاس های موجود کاری نداشته باشید تا خودمان کلاس ها و فایل های جدید را ایجاد کنیم.

۲- ایجاد کلاس مدل

ما از یک کلاس مدل برای نمایش داده ها در نمای جزئی استفاده خواهیم کرد. برای این کار باید با کلیک راست بر روی پوشه Models و انتخاب گزینه Add Class یک کلاس Product در پوشه Models به صورت زیر اضافه کنید:

در ادامه کدهای زیر را در محتویات کلاس Product.cs قرار دهید:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AJAXDemo.Models
{
    public class Product
    {
        public string ProdCode
        {
            get;
            set;
        }
        public string ProdName
        {
            get;
            set;
        }
        public int ProdQty
        {
            get;
            set;
        }
    }
}

۳- ایجاد طرح بندی برای View

برای ایجاد طرح بندی برای View در پوشه Shared واقع پوشه Views به صورت زیر یک Layout_ ایجاد کنید (اگر از قبل چنین فایلی وجود داشته نگران نباشید بگذارید Replace شود):

محتویات فایل ایجاد شده را بصورت زیر قرار دهید:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
    @RenderSection("scripts")
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

این طرح بندی توسط ویو یا نمای Index استفاده خواهد شد. در این طرح بندی، متد ()RenderSection یک مکان نگهدار برای بخش اسکریپت ها و متد ()RenderBody یک مکان نگهدار برای محتوای اصلی نمای Index تعریف می شود. اگر قصد دارید تا اطلاعات مفصل تری درباره به کارگیری Ajax در ASP .NET MVC بدست بیاورید، به مقاله زیر رجوع کنید.

آموزش Ajax در MVC | راهنمای رایگان به کارگیری Ajax در ASP .NET MVC __ کلیک کنید

۴- ایجاد کنترلر

با کلیک راست بر روی پوشه Controllers یک کنترلر جدید به صورت زیر اضافه کنید:

در ادامه نام کنترلر را بصورت AjaxController قرار داده و Add کنید.

کد متد ()Index بصورت زیر قرار دهید:

public ActionResult Index()
{
   Product p1 = new Product { ProdCode = "P001", ProdName = "Mobile", ProdQty = 75 };
   Product p2 = new Product { ProdCode = "P002", ProdName = "Laptop", ProdQty = 125 };
   Product p3 = new Product { ProdCode = "P003", ProdName = "Netbook", ProdQty = 100 };
   prodList.Add(p1);
   prodList.Add(p2);
   prodList.Add(p3);
   return View();
}

این کد سه شی محصول را ایجاد می کند و آنها را به یک لیست ثابت به نام prodList اضافه می کند که در سطح کلاس اعلان می شود و نمای مرتبط با نمای Index را ارائه می دهد. با کلیک راست بر روی متد ()Index در کنترلر، view مربوط به متد عمل بالا را به صورت زیر اضافه کنید:

(توجه: هنگام اضافه کردن نمای Index، به یاد داشته باشید که صفحه Layout را انتخاب کنید.)

کد نمای Index.cshtml در زیر آمده است این کدها را هم جایگزین کنید:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
    <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

<h2>Index</h2>
@Ajax.BeginForm("ShowDetails","Ajax",
     new AjaxOptions
     { HttpMethod = "POST", UpdateTargetId = "div1", 
     InsertionMode = InsertionMode.Replace, LoadingElementId = "waitimage" })
<h1>Enter Product Code</h1>
<h2>
    Product Code: @Html.TextBox("txtCode")<br />
    <input type="submit" value="Show Details" />
    <input type="reset" value="Clear"/>
</h2>
@{Html.EndForm();}
<br />
<img id="waitimage" src="~/Images/loading42.gif" style="display:none" />
<br />
<div id="div1">
</div>

کد بالا به اسکریپت jquery.unobtrusive-ajax.js برای پیاده سازی تابع AJAX اشاره می کند. همچنین از یک div با شناسه “div1” برای نمایش جزئیات محصول درخواستی استفاده می کند. از روش کمکی ()Ajax.BeginForm برای پذیرش کد محصول و ارسال آن به صورت ناهمزمان استفاده می کند.

پارامتر اول متد ()Ajax.BeginForm نام متد و اقدامات پردازشی داده های ورودی، پارامتر دوم نام کنترل کننده و پارامتر سوم AjaxOptions مورد استفاده را مشخص می کند. در AjaxOptions، ویژگی HttpMethod روش HTTP مورد استفاده را مشخص می کند، ویژگی UpdateTargetId شناسه عنصر div را که نمای جزئی در آن نمایش داده می شود، ویژگی InsertionMode حالت درج نمای جزئی و ویژگی LoadingElemetId را مشخص می کند. شناسه تصویری را مشخص می کند که در زمان انتظار برای تکمیل شدن و نمایش نشان داده می شود.

ویژگی InsertionMode می تواند یکی از مقادیر زیر را داشته باشد:

InsertionMode.InsertAfter – جزئیات جدید پس از جزئیات موجود اضافه می شوند.
InsertionMode.InsertBefore – جزئیات جدید قبل از جزئیات موجود اضافه می شوند.
InsertionMode.Replace – جزئیات جدید جایگزین جزئیات موجود می شوند.

برای پردازش ورودی و جستجوی کد محصول وارد شده توسط کاربر، روشی را در کنترلر اضافه می کنیم که نمای جزئی را به صورت زیر برمی گرداند:

public PartialViewResult ShowDetails()
{
   System.Threading.Thread.Sleep(3000);
   string code = Request.Form["txtCode"];
   Product prod = new Product();
   foreach(Product p in prodList)
   {
       if (p.ProdCode == code)
       {
           prod = p;
           break;
       }
   }
   return PartialView("_ShowDetails", prod);
}

۵- ایجاد فایل نمایش جزئیات

کد بالا کد محصول وارد شده را جستجو کرده و با استفاده از نمای جزئی، محصول مربوط به آن را برمی گرداند. از متد ()Thread.Sleep برای شبیه سازی تاخیر در واکشی جزئیات محصول استفاده می کند. این کار به شما امکان می دهد انیمیشن بارگذاری صفحه را در حالی که منتظر تکمیل فراخوانی روش ناهمزمان هستید، مشاهده کنید.

برای نمایش مشخصات محصول باید با کلیک راست بر روی متد و انتخاب گزینه Add View یک ShowDetails_ را به صورت زیر اضافه کنیم:

کد نمای ShowDetails_ نیز بصورت زیر خواهد بود است:

@model AJAXDemo.Models.Product

@if(Model.ProdCode==null)
{
    <h1>Invalid Product Code</h1>
}
else
{
    <h1>Product Details</h1>
    <h2>
        Product Code: @Model.ProdCode<br />
        Product Name: @Model.ProdName<br />
        Product Quantity: @Model.ProdQty<br />
    </h2>
}

کد بالا در صورت یافتن کد محصول مشخصات محصول و در صورت یافت نشدن پیغام “Invalid Product Code” را نمایش می دهد.

۶- تغییرات در فایل های ضروری

قبل از اجرای برنامه، باید اطلاعات مسیریابی را در فایل RouteConfig.cs در پوشه App_Start به صورت زیر مشخص کنیم:

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Ajax", action = "Index", id = UrlParameter.Optional }
            );

همچنین، باید جاوا اسکریپت را با افزودن کلید “UnobtrusiveJavaScriptEnabled” در زیر عنصر <configuration> در فایل Web.config به صورت زیر فعال کنیم:

<appSettings>
    <add key="webpages:Version" value="2.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="PreserveLoginUrl" value="true" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

۷- خروجی پروژه ASP.net

پس از انجام همه دستورالعمل های اشاره شده در آموزش ajax در asp net mvc وقت آن است که پروژه را اجرا کنید. در هنگام اجرا، برنامه خروجی زیر را تولید خواهد کرد:

با وارد کردن کد محصول و کلیک بر روی دکمه Show Details، جزئیات محصول مربوطه به صورت ناهمزمان نمایش داده می شود.

بدین ترتیب این آموزش تمام می شود. برای آموزش ajax در asp net mvc بصورت فیلم آموزشی می توانید آموزش چارچوب توسعه تحت وب ASP.NET MVC سایت فرادرس را تهیه و مطالعه فرمایید.

سخن آخر در مورد آموزش ajax در asp net mvc

در این پست به صورت گام به گام آموزش ajax در asp net mvc انجام شد. استفاده از تکنولوژی آژاکس در برنامه های تحت وب و وب سایت ها یک امر ضروری است چرا که سرعت و عملکرد یک پروژه به میزان قابل توجهی افزایش می یابد. همچنین استفاده از معماری MVC در پروژه های نرم افزاری بخصوص پروژه های مربوط به ASP.net منجر به ایجاد الگوهای مناسب و کارا خواهد شد. پس سعی کنید در طراحی و برنامه نویسی سایت از این دو تکنولوژی استفاده کنید.

کدهایی که در این آموزش تشریح شدند را بصورت یک پروژه آماده ASP.net در سایت قرار داده ایم که می توانید از باکس دانلود زیر آن ها را دانلود کنید. پیشنهاد می کنیم مقاله کسب درآمد اینترنتی با فروش فایل – چگونه در خانه کسب درآمد کنیم؟ ما را نیز در فرصت مناسب مطالعه فرمایید. در پایان منتظر نظرات و پیشنهادات شما عزیزان هستیم. موفق و پیروز باشید.

امین جلیل زاده رزین

پایه گذار و موسس وب سایت آموزشی پی استور، مدرس دانشگاه فنی و حرفه ای، برنامه نویس و تحلیل گر سیستم، پژوهشگر در حوزه الگوریتم های ابتکاری، فرا ابتکاری، یادگیری ماشین، شبکه و پایگاه داده. ایشان در زبان های برنامه نویسی متعدد، نظیر ++C، سی شارپ، PHP ،Java، متلب MATLAB و Python تسلط و سابقه تدریس فعال دارند.

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