فراخوانی Action

فراخوانی Action های MVC با استفاده از jQuery AJAX ، در این مقاله با هم به سراغ استفاده از متد jQuery get برای فراخوانی Action های MVC میرویم.

jQuery یکی از کتابخانه های پر استفاده در برنامه نویسی های امروزه است و به صورت مداوم توسط برنامه نویسان MVC استفاده میشود که نه تنها به منظور افزایش تجربه کاربری بلکه همچنین به منظور ارائه ی مطالب داینامیک به برنامه های وبشان از انواع متفاوتی از AJAX ها که تحت پوشش Jquery هستند ، استفاده میکنند.

jQuery چندین متد مانند get ، getJSON ، load ، post ، ajax ارائه میکند که میتوان از آنها برای فراخوانی انواع متفاوتی از Action های MVC استفاده کرد.

فراخوانی Action

استفاده از jQuery با MVC بسیار آسان است زیرا آخرین نسخه ی آن همگام با MVC است.

برای استفاده از jQuery تنها نیاز به یک خط Script زیر چه در قسمت head مربوط به layout.master page یا در انتها پیش از بسته شدن بدنه ی </body> به منظور بارگذاری سریعتر صفحه دارید.

<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>

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

سناریوی ۱ : فراخوانی یک متد Action که محتوای String بازمیگرداند

بیاید فرض کنیم که شما Action ای دارید که محتوای string را به View بازمیگرداند. مانند زیر :

<public class HomeController : Controller
{
   public string GetDateTimeString()
   {
      return DateTime.Now.ToString();
   }
}

برای فراخوانی این متد Action با استفاده از jQuery ، میتوانید از تابع jQuery get در زیر آمده استفاده کنید :

var url = "/Home/GetDateTimeString";
$.get(url, null, function(response) {
   $("#getDateTimeString").html(response);
});

متد های Action در MVC

متد jQuery get یک متد کمک کننده است که یک درخواست AJAX GET تولید میکند.

پارامتر اول آدرس متد Action است و پارامتر دوم میتواند برای ارسال پارامتر های اضافی به متد Action استفاده کرد و پارامتر سوم تابع بازگشتی است برای زمانی که پاسخ از متد Action دریافت شد.

تابع بازگشت یک پارامتر به عنوان پاسخ که حاوی string است ، دریافت میکند.

سناریو ۲ : فراخوانی یک متد Action که پارامتر دریافت میکند و محتوای string بازمیگرداند

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

برای پاس دادن پارامتر های متد Action میتوانیم از پارامتردوم تابع jQuery get استفاده کنیم.

public string LowerCaseString(string input)
{
   return input.ToLower();
}

میتوانید از کد جاوا اسکریپت زیر برای فراخوانی این متد Action از متد jQuery get استفاده کنید :
[/csharp] var url = “/Home/LowerCaseString”;
$.get(url, { input: “MAKE THIS TEXT LOWERCASE” }, function(response) {
$(“#getLowerCaseString”).html(response);
});
[/csharp]

فراخوانی Action های MVC

سناریو ۳ : فراخوانی یک متد Action که پارامتر دریافت میکند و JSON بازمیگرداند

تا اینجا با نمونه های ساده ی string کار کردیم.

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

به عنوان مثال تصور کنید که میخواهیم اطلاعات یک دانش آموز را از سرور واکشی کنیم.

به طور دقیق تر بگوییم که شما کلاس StudentInfo و متد Action با نام GetStudentInfo زیر را در اختیار دارید :

public class StudentInfo
{
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public int Age { get; set; }
   public int Fee { get; set; }
}

public JsonResult GetStudentInfo(int studentId)
{
   StudentInfo contactInfo = new StudentInfo
   {
      FirstName = "Bob",
      LastName = "Cravens",
      Fee = 2000,
      Age = 23
   };
   return Json(contactInfo, JsonRequestBehavior.AllowGet);
}

توجه داشته باشید که متد Action اکنون یک JsonResult بازمیگرداند.

این متد Action میتواند با استفاده از جاوا اسکریپت زیر فراخوانی شود :

var url = "/Home/GetStudentInfo";
var id = 123;
$.getJSON(url, { studentId: id }, function(data) {
   $("#name").html(data.FirstName + " " + data.LastName);
   $("#fee").html(data.Fee);
   $("#age").html(data.Age);
});

میتوانید مشاهده کنید که نتیجه ی فراخوانی شده ی AJAX با استفاده از ابزار برنامه نویسی مرورگر به صورت JSON بدست می آید.

به عنوان مثال مرورگر گوگل کروم JSON زیر را از سرور دریافت میکند :

 کار با متد های Action

توجه داشته باشید که داده اکنون به فرمت JSON میباشد. داده ی بازگشتی میتواند داخل هر المان HTML مانند span زیر قرار گیرد :

h3 Student Information /h3
table
   tr
      tdName/td
      tdspan id="name"/span/td
   /tr
   tr
      tdFee/td
      tdspan id="fee"/span/td
   /tr
   tr
      tdAge/td
      tdspan id="age"/span/td
   /tr
/table

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

کاربرد های jQuery AJAX در MVC

موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

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