آموزش Ajax در ASP.NET MVC با استفاده از jQuery

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

تکنولوژی Ajax مخفف Asynchronous JavaScript and XML به معنای جاوا اسکریپت و ایکس ام ال غیر همزمان است. بر خلاف تصور عده‌ای، Ajax یک زبان برنامه نویسی نیست، بلکه از چند زبان برنامه نویسی مختلف در تکنولوژی Ajax استفاده می‌شود. در واقع Ajax از چند تکنولوژی موجود در کنار یکدیگر استفاده می‌کند. زبان‌هایی مانند ایکس اچ تی ام ال (XHTML)، (CSS)، جاوا اسکریپت (JavaScript) در کنار مدل شی سند (Document Object Model)، ایکس ام ال (XML) و شی XMLHttpRequest از جمله تکنولوژی‌هایی هستند که Ajax از آن‌ها استفاده می‌کند.

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

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

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

• راهنمای رایگان به کارگیری Ajax در ASP .NET MVC — هم اکنون بخوانید

نحوه عملکرد Ajax

تکنولوژی Ajax با وب سرور به کمک شی XMLHttpRequest ارتباط برقرار می‌کند. مراحل برقراری این ارتباط به شرح زیر است:

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

· درخواست Http با استفاده از شی XMLHtppRequest به سرور ارسال می‌شود.

· وب سرور با پایگاه داده از طریق اپلیکیشن سرور (مانند ASP، JSP، PHP و غیره) ارتباط برقرار می‌کند.

· داده‌ها از پایگاه داده بازیابی شده و به وب سرور بازگردانده می‌شود.

· سرور، داده‌های XML یا JSON را به تابع Callback شی XMLHttpRequest ارسال می‌کند.

· کلاینت، داده‌ها را از سرور دریافت کرده و آن را با استفاده از پی اچ پی و سی اس اس در مرورگر نمایش می‌دهد.

از آنجایی که شی XMLHttpRequest نقش مهمی در تکنولوژی Ajax بازی می‌کند،‌ در ادامه بیشتر در مورد آن بحث خواهیم کرد.

شی XMLHttpRequest یا XHR چیست؟

شی XHR یک رابط کاربری نرم افزار یا API است(Application Programming Interface) که در تمامی مرورگرهای مدرن برای پیشتیبانی از سرویس‌های HTTP و HTTPS در دسترس است.

در تکنولوژي Ajax از این شی برای دریافت و ارسال درخواست‌های HTTP استفاده می‌شود.

مزایا و معایب استفاده از تکنولوژی Ajax

· مزایای استفاده از تکنولوژی Ajax عبارت است از:

· کاهش ترافیک ردوبدل شده بین کلاینت و سرور

· مستقل از مرورگر بودن

· طراحی و ساخت اپلیکیشن‌های چند منظوره که در آن‌ها تنها از یک صفحه وب استفاده شده است

· افزایش سرعت، عملکرد و قابلیت استفاده از وب اپلیکیشن‌ها

معایب استفاده از تکنولوژی Ajax نیز عبارت است از:

· موتورهای جسجتویی نظیر گوگل قادر به شاخص گذاری اپلیکیشن‌های Ajax نیستند

· تکنولوژی Ajax یک تکنولوژی وابسته به جاوا اسکریپت است بنابراین اگر یک کاربر، جاوا اسکریپت را در مرورگر خود غیرفعال کند عملاً تکنولوژی Ajax بی‌استفاده خواهد ماند

· نمی‌توان به اطلاعات سرور از طریق Ajax دسترسی پیدا کرد

· امنیت در اپلیکیشن‌های Ajax کمتر است، چرا که تمامی فایل‌ها در سمت کلاینت دانلود می‌شوند

چه پیشرفت‌ هایی در تکنولوژی Ajax رخ داده است؟

قبل از پرداختن به آموزش ajax در asp net mvc بهتر است با پیشرفت‌های صورت گرفته در تکنولوژی ajax آشنا شوید.

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

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

• آموزش کاربردی ایجکس AJAX در جی‌ کوئری jQuery
• آموزش زبان XML ایکس ام ال

مثالی کاربردی از نحوه عملکرد Ajax در جاوا

صفحه وبی را در نظر بگیرید که در آن قرار است اطلاعاتی از کاربر دریافت شود. زمانی که کاربر روی دکمه showTable کلیک کند، تابع sendInfo() فراخوانی می‌شود. تمامی کدهای مربوط به Ajax را در این تابع خواهیم نوشت.

زمانی که state تغییر کند، تابع getInfo() را فراخوانی می‌کنیم. این تابع، داده‌های بازگشت داده شده را به صورت پویا در مرورگر خواهد شد. برای ایجاد صفحه‌ای که در آن هرگونه متن یا عدد از کاربر دریافت شود، فایل table1.html را ایجاد کرده و در آن کد‌های زیر را بنویسید:

<html>

<head>

var request;

function sendInfo()

{

var v=document.vinform.t1.value;

var url="index.jsp?val="+v;

if(window.XMLHttpRequest){

request=new XMLHttpRequest();

}

else if(window.ActiveXObject){

request=new ActiveXObject("Microsoft.XMLHTTP");

}

try

{

request.=getInfo;

request.open("GET",url,true);

request.send();

}

catch(e)

{

alert("Unable to connect to server");

}

}

function getInfo(){

if(request.readyState==4){

var val=request.responseText;

document.getElementById('amit')=val;

}

}

</head>

<body>

<marquee><h1>This is an example of ajax</h1></marquee>

<form name="vinform">

<input type="text" name="t1">

<input type="button" value="ShowTable" ="sendInfo()">

</form>

<span id="amit"> </span>

</body>

</html>

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

<%

int n=Integer.parseInt(request.getParameter("val"));

for(int i=1;i<=10;i++)

out.print(i*n+"<br>");

%>

فایل XML شما نیز به نام web.xml خواهد بود و کدهای زیر در آن نوشته شده است:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<session-config>

<session-timeout>

30

</session-timeout>

</session-config>

<welcome-file-list>

<welcome-file>table1.html</welcome-file>

</welcome-file-list>

</web-app>

خروجی شما به صورت زیر خواهد بود:

تکنولوژی Ajax و الگوی MVC

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

الگوی مدل-نما-کنترل‌گر MVC یا Model-View-Controller یک الگو از معماری نرم افزار است که اپلیکیشن را به سه قسمت اصلی منطقی تقسیم می‌کند. این قسمت‌ها عبارت‌اند از:

· مدل

· نما یا View

· کنترل‌گر یا Controller

هر یک از این مؤلفه‌ها برای مدیریت جنبه‌ای خاص از اپلیکیشن طراحی ‌شده‌اند. MVC یکی از پرکاربردترین روش‌های توسعه چارچوب نرم افزاری به منظور ساخت پروژه‌های مقیاس‌پذیر است.

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

تکنولوژی ASP.NET از سه مدل اصلی توسعه پشتیبانی می‌کند:

· صفحات وب

· فرم

· الگوی مدل-نما-کنترل‌گر (MVC)

فریم ورک یا چارچوب نرم افزاری ASP.NET MVC، یک فریم ورک بسیار سبک است که با امکانات فعلی ASP.NET نظیر احراز هویت یکپارچه سازی شده است. معمولاً از ویژوال استودیو برای ساخت اپلیکیشن‌های ASP.NET MVC استفاده می‌شود. ویژگی‌های اصلی ASP.NET MVC عبارت‌اند از:

· ایده‌آل برای توسعه اپلیکیشن‌های پیچیاده اما سبک

· فراهم کننده یک فریم ورک که به سادگی قابل شخصی سازی است

· پیاده سازی روش طراحی مبتنی بر مؤلفه با تقسیم اپلیکیشن به سه مؤلفه منطفی مدل، نما و کنترل‌گر

· فراهم آوردن امکان تست ساده اپلیکیشن

· پشتیبانی از تمامی کارکردهای قعلی ASP.NET نظیر احراز هویت و عضویت

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

پیاده سازی Ajax با استفاده از jQuery در ASP.NET MVC

در این قسمت، پیاده سازی Ajax با استفاده از jQuery را به صورت قدم به قدم توضیح خواهیم داد. برای مثال خود از ویژوال استودیو استفاده خواهیم کرد.

قدم اول:

یک پروژه جدید ایجاد کرده و ASP.NET MVC web application را انتخاب کنید.

قدم دوم:

مدل‌ها و کنترل‌گرهای از پیش ساخته شده را در نظر نگیرید و مدل خودتان را بسازید. مدلی به نام Students بسازید که شامل ویژگی‌هایی با نام‌های StudentID، StudentName و StudentAddress است:

public class Student

{

[Key]

public int studentID { get; set; }

[Required]

public string studentName { get; set; }

[Required]

public string studentAddress { get; set; }

}

صفت‌های using System.ComponentModel.DataAnnotations; را برای معتبر کردن مدل داده و ساخت پروژه اضافه کنید.

قدم سوم:

مدل دیگری بسازید که از DbContext ارث‌بری کرده باشد. این مدل، کلاسی است که تمامی عملیات‌های پایگاه داده را از جمله اتصال به پایگاه داده مدیریت می‌کند.

نام مدل خود را StudentContext گذاشته و به صورت زیر آن را ایجاد کنید:

public class StudentContext : DbContext

{

public DbSet<Student> Students { get; set; }

}

using System.Data.Entity; را برای داشتن دسترسی به هسته عملکردی entity framework اضافه کنید.

قدم چهارم:

حال باید یک کنترل‌گر بسازید تا در کد مربوط به قرار دادن داده‌ها در پایگاه داده نوشته شود و داده‌ها را در یک نما (View) نمایش دهد. نام کنترل‌گر خود را Studentبگذارید. یک شی از کلاس StudentContextبرای قرار دادن داده در پایگاه داده و بازیابی داده از آن بسازید. همچنین namespaceهای ضروری را نیز اضافه کنید:

StudentContext context = new StudentContext();

قدم پنجم:

حال باید متودهای action را برای قرار دادن داده در پایگاه داده و بازیابی داده از آن ایجاد کنید. یک متود HttpPost به نام createStudentبرای قرار دادن داده‌ها با فرمت JSON در پایگاه داده ایجاد کنید. از صفت HttpPostبرای ذخیره یا ارسال داده استفاده خواهیم کرد:

[HttpPost]

public ActionResult createStudent(Student std)

{

context.Students.Add(std);

context.SaveChanges();

string message = "SUCCESS";

return Json(new { Message = message, JsonRequestBehavior.AllowGet });

}

به طور مشابه، یک متود JSON با نام getStudent برای بازیابی داده از پایگاه داده و بازگشت داده به منظور استفاده توسط جاوا اسکریپت ساخته خواهد شد:

public JsonResult getStudent(string id)

{

List<Student>students = new List<Student>();

students = context.Students.ToList();

return Json(students, JsonRequestBehavior.AllowGet);

}

قدم ششم:

در این قدم از آموزش ajax در asp net mvc، یک View برای نمایش داده‌ها و فیلد ارسال داده ساخته خواهد شد. نام View خود را Index.cshtmlبگذارید. سپس کدهای html را برای ساخت فیلد وارد کردن داده، دکمه ارسال و همچنین نمایش داده در همان صفحه بنویسید. می‌توانید از کلاس‌های bootstrapبرای طراحی صفحه استفاده کنید:

<div class="col-md-12">

<div class="panel panel-primary">

<div class="panel-heading">

<h3 class="panel-title">Please enter the details below.</h3>

</div>

<div class="panel-body">

<div class="form-group col-md-5">

<label>Student Name</label>

<input type="text" name="StudentName" id="StudentName" class="form-control" placeholder="Enter Student Name" required="" />

</div>

<div class="form-group col-md-5">

<label>Student Address</label>

<input type="text" name="StudentAddress" id="StudentAddress" class="form-control" placeholder="Enter Student Address" required="" />

</div>

<div class="form-group col-md-1">

<div style="float: right; display:inline-block;">

<input class="btn btn-primary" name="submitButton" id="btnSave" value="Save" type="button">

</div>

</div>

</div>

</div><hr />

<table id="tblStudent" class="table table-bordered table-striped table-responsive table-hover">

<thead>

<tr>

<th align="left" class="productth">ID</th>

<th align="left" class="productth">Student Name</th>

<th align="left" class="productth">Student Address</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

می‌توانیم به سادگی از کلاس bootstrap برای فراخوانی توابع jQuery در ASP.NET MVC استفاده کنیم، چرا که در طول ساخت پروژه این کلاس‌ها به پروژه اضافه شده است.

قدم هفتم:

حال باید اسکریپت‌های مربوط به ارسال داده و بازیابی آن‌ به منظور نمایش در View را بنویسیم. تنها کافیست که پس از نوشتن کد‌های اچ تی ام ال، اسکریپت‌های زیر را اضافه کنید:

@section Scripts

{

<script type="text/javascript">

$(function () {

LoadData();

$("#btnSave").click(function () {

//alert("");

var std = {};

std.studentName = $("#StudentName").val();

std.studentAddress = $("#StudentAddress").val();

$.ajax({

type: "POST",

url: '@Url.Action("createStudent")',

data: '{std: ' + JSON.stringify(std) + '}',

dataType: "json",

contentType: "application/json; charset=utf-8",

success: function () {

// alert("Data has been added successfully.");

LoadData();

},

error: function () {

alert("Error while inserting data");

}

});

return false;

});

});

function LoadData() {

$("#tblStudent tbody tr").remove();

$.ajax({

type: 'POST',

url: '@Url.Action("getStudent")',

dataType: 'json',

data: { id: '' },

success: function (data) {

var items = '';

$.each(data, function (i, item) {

var rows = "<tr>"

+ "<td class='prtoducttd'>" + item.studentID + "</td>"

+ "<td class='prtoducttd'>" + item.studentName + "</td>"

+ "<td class='prtoducttd'>" + item.studentAddress + "</td>"

+ "</tr>";

$('#tblStudent tbody').append(rows);

});

},

error: function (ex) {

var r = jQuery.parseJSON(response.responseText);

alert("Message: " + r.Message);

alert("StackTrace: " + r.StackTrace);

alert("ExceptionType: " + r.ExceptionType);

}

});

return false;

}

}

از Ajax برای تازه‌سازی (Refresh) tblStudent استفاده کرده‌ایم تا تنها جدول مربوطه را تازه‌سازی کنیم (و نیازی به تازه‌سازی کل صفحه وجود نداشته باشد). پس از کلیک کردن روی دکمه submitButton، داده‌ها از فیلد ورودی گرفته شده و در متغیرها قرار می‌گیرند. این داده‌ها سپس به actionبرای اضافه شدن به پایگاه داده ارجاع داده می‌شوند.

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

قدم هشتم:

آخرین قدم از آموزش ajax در asp net mvc، پیکربندی connectionStrings پایگاه داده در فایل web.config است:

<connectionStrings>

<add name="StudentContext" connectionString="Data Source=RAVI-KANDEL;Initial Catalog=Student;Integrated Security=True"

providerName="System.Data.SqlClient" />

</connectionStrings>

در قطعه کد بالا، StudentContext به عنوان کلاس ارث‌بری شده از کلاس DbContext در نظر گرفته شده است. RAVI-KANDEL نیز نام پایگاه داده‌ سرور و Student نیز نام پایگاه داده است.

نام RAVI-KANDEL را با نام پایگاه داده سرور خود جایگزین کنید. در نهایت، اپلیکیشن خود را اجرا کنید. می‌توانید با اضافه کردن داده‌های خود، آن‌ها را به صورت جدولی در قسمت پایین صفحه مشاهده کنید:

همچنین می‌توانید پایگاه داده سرور را باز کرده و داده‌هایی را که وارد کرده‌اید در آن‌جا نیز مشاهده کنید.

سخن پایانی درباره Ajax در ASP.NET MVC

در این مطلب مثالی از نحوه کار با Ajax در ASP.NET MVC مشاهده کردید. برای کار با تکنولوژی Ajax و همچنین تکنولوژی ASP.NET باید بر زبان‌های برنامه نویسی نظیر جاوا اسکریپت و اچ تی ام ال مسلط باشید.

ساده‌ترین راه یادگیری این زبان‌ها استفاده از دوره‌های آموزشی آنلاین است. این دوره‌ها را می‌توانید با هزینه مناسب تهیه کنید و مطالب ضروری بیان شده در آن‌ها را مشاهده کنید.

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

• آموزش جاوا اسکریپت JavaScript
• آموزش مقدماتی HTML اچ تی ام ال برای طراحی وب