آموزش Ajax در MVC – راهنمای قدم به قدم و تصویری به کارگیری Ajax در ASP.NET MVC

وب اپلیکیشن‌های زیادی در فضای وب وجود دارند که از تکنولوژی ایجکس (Ajax) استفاده می‌کنند. جیمیل، فیسبوک، توییتر، گوگل مپ، یوتیوب و صدها مورد دیگر نمونه‌ای از این وب اپلیکیشن‌ها هستند.

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

شاید بهترین تعریفی که بتوان برای تکنولوژی Ajax ارائه داد، تعریف زیر باشد:

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

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

در برخی موارد نیز به طور دقیق‌تر از Ajax به عنوان استفاده از شئ XmlHttpRequest یا به اختصار XHR در جاوا اسکریپت برای تعامل با وب سرور به صورت پویا، استفاده می‌شود.

از طرفی تکنولوژی‌های زیادی نیز برای ساخت وب اپلیکیشن‌ها وجود دارند. یکی از پرکابردترین این تکنولوژی‌ها ASP.NET است.

ASP.NET یک فریم ورک متن باز برای توسعه سمت سرور وبسایت است که توسط مایکروسافت توسعه داده شده و به شما اجازه ساخت صفحات وب پویا و وب اپلیکیشن‌ها را می‌دهد.

معماری ASP.NET به صورت MVC یا مدل-نما-کنتر‌ل‌گر طراحی شده است.

در این مطلب قصد داریم آموزش Ajax در MVC را در قالب یک مثال آموزش داده و نیز درباره تکنولوژی‌های Ajax و ASP.NET مباحث کاربردی و جالبی را مطرح کنیم.

اگر هیچ گونه آشنایی با مباحث Ajax و ASP.NET ندارید به شما توصیه می‌کنیم برای شروع، آموزش‌های رایگان فرادرس را در این دو زمینه مشاهده کنید.

آشنایی با Ajax

در این قسمت قصد داریم شما را با مزایای Ajax، ماهیت آن و کاربرد‌های مختلف آن آشنا کنیم. آشنایی با Ajax به شما به درک کاربرد Ajax در MVC کمک خواهد کرد.

Ajax به تنهایی کار نکرده و باید در کنار سایر تکنولوژی‌ها برای ایجاد وب پیج‌های تعاملی به کار گرفته شود. برخی از این تکنولوژی‌ها عبارت‌اند از:

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

· DOM (Document Object Model) یا مدل شئ سند: یک رابط برنامه نویسی نرم افزار برای دسترسی و دستکاری اسناد ساختار یافته محسوب می‌شود. به وسیله DOM ساختار اسناد اچ تی ام ال و ایکس ام ال مشخص می‌شود.

· سی اس اس (CSS): استایل صفحات وب را به طور مشخص از محتوای آن جدا کرده و می‌توان با برنامه نویسی به زبان جاوا اسکریپت در آن تغییراتی ایجاد کرد.

· · XHR: همان طور که پیش‌تر اشاره شد، یک شئ جاوا اسکریپت است که تعامل غیر هم زمان با سرور را ممکن می‌کند.

در ادامه بیشتر با Ajax و تکنولوژی‌های مرتبط با آن آشنا خواهید شد. همچنین می‌توانید آموزش‌های زیر را در زمینه تکنولوژی‌های مرتبط با Ajax مشاهده کنید.

مزایای Ajax

۴ دلیل اصلی برای استفاده از Ajax در وب اپلیکیشن‌ها وجود دارد:

۱. فراخوانی مجدد یا Callback

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

Ajax می‌تواند یک درخواست رفت و برگشتی به سرور ارسال کرده و داده‌ها را بازیابی یا ذخیره کند، بدون این که محبور باشد تمام صفحه وب را در قالب یک درخواست Post به سرور ارسال کند.

با عدم ارسال فرم html حاوی درخواست Post به صورت کامل به سرور، کارآمدی شبکه بالا رفته و دستورات سریع‌تر اجرا می‌شوند. در سایت‌ها و وب هاست‌هایی (Web Host) که پهنای باند با محدودیت مواجه شده است، استفاده از Ajax به شدت عملکرد شبکه را بهبود خواهد داد.

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

۲. اجرای درخواست‌های غیر هم زمان

Ajax به شما اجازه می‌دهد تا درخواست‌های خود را به صورت غیر هم زمان به سرور ارسال کنید. این مسئله به مرورگر یا همان کلاینت اجازه می‌دهد تا منتظر رسیدن تمامی اطلاعات نمانده و هم چنان به کاربر اجازه فعالیت در سایت را بدهد.

۳. کاربر پسند بودن

وب اپلیکیشن‌هایی که تکنولوژی Ajax در آن‌ها فعال شده است، کاربر پسندتر هستند. چرا که این وب اپلیکیشن‌ها نسبت به تعامل با کاربر انعطاف‌پذیری بیشتری نشان می‌دهند و سریع‌تر هستند.

۴. افزایش سرعت

هدف اصلی استفاده از Ajax بهبود سرعت در عملکرد و استفاده از وب اپلیکیشن است. مثالی فوق‌العاده از کاربرد Ajax را می‌توانید در قابلیت امتیازدهی به فیلم‌ها در سایت نتفلیکس (Netflix) مشاهده کنید.

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

جنبه‌های فنی Ajax

بررسی Ajax از نظر فنی، کمک زیادی به یادگیری بهتر Ajax در MVC خواهد کرد.

استفاده از قابلیت فراخوانی دوباره به وسیله نصب شئ XMLHttpRequest یا XHR در سمت کلاینت جاوا اسکریپت انجام می‌شود. این شئ می‌تواند به طور مستقیم اشیای موجود در سمت سرور یعنی صفحات و سرویس‌های وب را فراخوانی کند. این صفحات و سرویس‌ها یا ذخیره شده یا بازیابی می‌شوند.

به کمک XHR می‌توان یک رابط برای واکشی داده‌ها از سرور طراحی کرد

Ajax در اصل مخفف Asynchronous JavaScript and XML به معنای جاوا اسکریپت و ایکس ام ال غیر هم زمان است. غیر هم زمان بودن به این معناست که رویداد‌های مختلفی می‌توانند به صورت غیر هم زمان و به صورت جداگانه از یکدیگر اتفاق بیفتند.

زمانی که یک کلاینت درخواستی را با استفاده از Ajax ارسال می‌کند، کلاینت مجبور نیست تا منتظر دریافت جواب آن درخواست بماند و می‌توانید به استفاده از وب اپلیکیشن تا زمانی که پاسخ آن درخواست از سرور دریافت شود، ادامه دهید.

Ajax باعث بروز چه پیشرفت‌هایی شده است؟

جاوا اسکریپت یک زبان برنامه نویسی سمت کاربر است و ایکس ام ال یک زبان نشانه گذاری برای تعریف دیتا است. JSON زبان نشانه گذاری دیگری است که برای تعریف دیتا به کار می رود. استفاده از JSON که مخفف JavaScript Object Notation است در کنار جاوا اسکریپت بسیار آسان تر از ایکس ام ال است و وب سرویس‌های JSON در حال گرفتن جای وب سرویس‌های ایکس ام ال هستند.

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

جی کوئری و شعار معروف آن با مضمون نوشتن کد کمتر در عین داشتن کارآيی بیشتر

با استفاده از جی کوئری و وب سرویس‌های JSON، استفاده از فراخوانی دوباره در Ajax تبدیل به یک استاندارد در طراحی و توسعه وب اپلیکیشن‌ها شده است.

در چه جاهایی باید از Ajax استفاده شود؟ مثال‌هایی از کاربرد‌های Ajax

دیدن مثال‌هایی از کاربرد Ajax در MVC شما را بهتر با اهمیت یادگیری این موضوع آشنا خواهد کرد.

در هر وب اپلیکیشنی که نیاز به بازیایی یا ذخیره مقدار کوچکی از دیتا نیاز است می‌توان Ajax را به کار برد.

یک مثال خوب از این مورد، اعتبارسنجی داده‌ها هنگام ذخیره کردن آن‌ها است. مثال دیگر می‌تواند درباره بازیابی داده‌ها با توجه به تغییر مقدار ورودی باشد.

مثلاً در یک سامانه با انتخاب یک استان خاص، شهرهای آن استان نمایش داده می‌شوند و اگر استان را تغییر دهید شهرها نیز متناسب با ورودی جدید به روز خواهند شد.

یک مثال عالی دیگر می‌تواند در زمینه بازیابی یا ذخیره مقادیر مربوط به نشست‌ها در یک سرور باشد. این مقادیر با توجه به ترجیحات و علایق کاربر مشخص می‌شوند.

مثال‌های دیگری را نیز می‌توانید در باکس‌های که به طور خودکار ادامه متن شما را کامل می‌کنند پیدا کنید. کاربر تعدادی از حروف را در باکس تایپ کرده و لیستی از نتایجی که با آن حروف خاص شروع می‌شوند برای او به نمایش درمی‌آید. در این جا یک فراخوانی مجدد یا Callback اسفتاده شده که از وب سرور نتایج لازم را بر اساس چیزی که کاربر تایپ کرده است دریافت می‌کند.

آشنایی با ASP.NET MVC

آشنایی با ASP.NET MVC بخش مهم دیگری از آموزش Ajax در MVC است.

ASP.NET یک چارچوب نرم افزاری یا فریم ورک (Framework) برای ساخت وبسایت‌ها و وب اپلیکیشن‌هاست که بر پایه تکنولوژی دات نت و استفاده از اچ تی ام ال، سی اس اس و جاوا اسکریپت بنا شده است.

نسخه پنجم ASP.NET یک فریم ورک توسعه وب است که معماری آن به صورت مدل- نما – کنترل‌گر یا MVC که مخفف Model-View-Controller است، طراحی شده است.

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

اگر می‌خواهید ASP.NET MVC را به صورت کاربردی یاد بگیرید توصیه ما تهیه و مشاهده آموزش‌های فرادرس است که در قالب پروژه این فریم ورک را به شما آموزش می‌دهند.

پیش‌نیازهای کار با ASP.NET MVC

برای کار با این فریم ورک باید دانش ابتدایی از فریم ورک دات نت، برنامه نویسی سی شارپ و ویژوال استودیو را داشته باشید.

به همین دلیل توصیه می‌کنیم قبل از پرداختن به آموزش Ajax در MVC، آموزش‌های زیر را در رابطه با تکنولوژی‌های پیش نیاز کار با ASP.NET MVC تهیه و مشاهده کنید.

معماری MVC چیست؟

معماری MVC الگویی است که اپلیکیشن را به سه مؤلفه منطقی اصلی تقسیم می‌کند:

۱. مدل (Model)

این مؤلفه نمایانگر منطق داده محوری است که کاربر با آن تعامل دارد. به عبارت دیگر این مؤلفه نمایانگر داده‌هایی است که بین دو مؤلفه دیگر یعنی نما و کنترل‌گر رد و بدل می‌شوند.

مثال: شئ کاربر، اطلاعات کاربر را از پایگاه داده بازیابی کرده، این اطلاعات را دستکاری و به روز کرده و در نهایت اطلاعات جدید را دوباره در پایگاه داده ذخیره می‌کند.

۲. نما (View)

این مؤلفه نمایانگر منطق رابط کاربری اپلیکیشن است.

مثال: نمای مشتری شامل تمامی مؤلفه‌های مربوط به رابط کاربری نظییر جعبه متن، منو‌های کشویی و غیره است. کاربری که به عنوان مشتری وارد اپلیکیشن شده است با این مؤلفه‌ها ارتباط خواهد داشت.

۳. کنترل‌گر (Controller)

کنترل‌گر به عنوان رابط بین مدل و نما کار می‌کند. درخواست‌ها و منطق اپلیکیشن با استفاده از مدل، پردازش شده و با نما به منظور نمایش خروجی نهایی تعامل می‌شود.

مثال: کنترل‌گر مشتری تعامل بین ورودی و نمای مشتری را مدیریت کرده و اطلاعات گرفته شده از کاربر را که توسط مؤلفه نما مدیریت می‌شود به مؤلفه مدل می‌فرستد تا آن مؤلفه داده‌ها را پردازش و در پایگاه داده ذخیره کند.

هر یک از این مؤلفه‌ها برای مدیریت جنبه‌ خاصی از توسعه اپلیکیشن به کار گرفته می‌شوند.

برای آشنایی بهتر با معماری MVC توصیه می‌کنیم مقاله MVC چیست ؟ — آنچه باید درباره معماری MVC بدانید | به زبان ساده را مطالعه نمایید.

آموزش Ajax در ASP.NET MVC

در این قسمت قصد داریم نحوه استفاده از Ajax در MVC را در قالب مثال به شما توضیح دهیم.

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

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

با ساخت یک پروژه جدید در ASP.NET MVC4 طبق شکل زیر شروع کنید:

از یک کلاس مدل برای نمایش داده‌ها در پارشیال ویو استفاده خواهیم کرد. به همین منظور کلاسی به نام Product در پوشه Models ایجاد می‌کنیم. این کار با کلیک راست کردن روی پوشه Models و انتخاب گزینه Add Class به راحتی قابل انجام است:

کد کلاس Product را در ادامه مشاهده می‌کنید که به زبان سی شارپ نوشته شده است:

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;

}

سپس، یک layout در قسمت Shared folder که زیر پوشه Views قرار دارد، به صورت زیر ایجاد می‌کنیم:

کد اچ تی ام ال فایل _Layout.cshtml باید به صورت زیر باشد:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>_Layout</title>

@RenderSection("scripts")

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

این layout توسط نمای Index (Index View) مورد استفاده قرار خواهد گرفت. تابع RenderSelectoin() یک placeholder برای قسمت اسکریپت‌ها و تابع RenderBoy() یک placeholder برای محتوای اصلی Index View تعریف کرده‌اند.

یک کنترل‌گر مانند شکل زیر با راست کلیک کردن روی پوشه Controllers ایجاد می‌کنیم:

اضافه کردن کنترل‌گر به نام AjaxController

کد تابع 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();

}

به وسیله کد بالا، اشیای product ایجاد شده و به یک لیست static به نام prodList اضافه خواهند شد.

حال روی متود Index() موجود در کنترل‌گر راست کلیک کرده و Add View را انتخاب می‌کنیم. به یاد داشته باشید که حین اضافه کردن View، layout page را انتخاب کنید:

کد فایل Index.cshtml را در زیر مشاهده می‌کنید:

? @{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@section scripts

{

}

<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 />

</h2>

@{Html.EndForm();}

<br />

<br />

</div>

View بالا اسکریپت jquery.unobtrusive-ajax.js را برای پیاده سازی عملکرد Ajax به عنوان مرجع قرار داده است.

همچنین از یک div با آی دی div1 برای نمایش جزئیات محصول خواسته شده استفاده کرده است.

از تابع کمکی Ajax.beginForm() برای پذیرفتن کد محصول و ارسال آن به صورت غیر هم زمان استفاده شده است.

اولین پارامتر تابع Ajax.BeginForm() نام متودی که باید درخواست پردازش دیتای ورودی را بدهد، مشخص کرده است. دومین پارامتر این تابع نیز نام کنترل‌گر و سومین پارامتر AjaxOptions مورد استفاده را تعیین کرده است.

در Ajaxoptions، مقدار httpMethod تعیین کننده متود http مورد استفاده است. مقدار UpdateTargetId نیز آی دی عنصر div را مشخص خواهد کرد. مقدار InsertMode نحوه نمایش پارشیال ویو را مشخص خواهد کرد. مقدار LoadingElementId نیز آی دی تصویری که باید نمایش داده شود را مشخص خواهد کرد.

InsertionMode می‌تواند حاوی یکی از سه مقدار زیر باشد:

· InsertionMode.InsertAfter: داده‌های جدید را پس از داده‌های فعلی اضافه خواهد کرد.

· InsertionMode.InsertBefore: داده‌های جدید را قبل از داده‌های فعلی اضافه خواهد کرد.

· InsertionMode.Replce: داده‌های جدید را با داده‌های فعلی جایگزین خواهد کرد.

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

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() میزان تأخیر در بازیابی جزئیات محصول را مشخص می‌کند. این کار اجازه می‌دهد تا انیمیشن لودینگ (loading) پیج تا زمانی که تابع فراخوانی غیر هم زمان کارش را به اتمام برساند، نشان داده شود.

برای نمایش جزئیات محصول، باید یک View را مانند شکل زیر با راست کلیک کردن بر روی تابع و انتخاب گزینه Add View، ایجاد کنیم:

کد _ShowDetails View به صورت زیر خواهد بود:

@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 }

);

همچنین نیاز است تا قابلیت unobtrusive JavaScript را با اضافه کردن کلید UnobtrusiveJavaScriptEnabled در زیر عنصر <configuration> در فایل Web.config به صورت زیر اضافه کنیم:

</appSettings>

هنگام اجرای اپلیکیشن، خروجی زیر را در مرورگر خود مشاهده خواهید کرد:

اجرای نهایی اپلیکیشن و نمایش خروجی در مرورگر

با وارد کردن کد یک محصول و کلیک روی دکمه submit جزئیات محصول به صورت غیر هم زمان نشان داده خواهد شد.

سخن پایانی درباره به کارگیری Ajax در MVC

Ajax یک ویژگی بسیار مهم در توسعه وب اپلیکیشن‌ها است و برتری قابل توجهی در عملکرد و سرعت برای وب اپلیکیشن شما به ارمغان خواهد آورد.

بسیار مهم است که استفاده از این تکنولوژی را یاد گرفته و از توسعه وب به صورت سنتی پرهیز کنید.

مثالی که در این آموزش مطرح شد با اسفتاده از نرم افزار Microsoft Visual Studio Express 2013 پیاده سازی شده است.

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