آموزش ASP.NET MVC5 – فصل۱۰

آموزش ASP.NET MVC5 – فصل۱۰

مشخصات مقاله

آموزش ASP.NET MVC5 – فصل۱۰

 آموزش ASP.NET MVC5 – فصل10 

 

سلام دوستان و همراهان وب سایت محتوا دات اینفو . با جلسه آخر از مجموعه آموزشی MVC در خدمتتان هستیم . لطفا انتقادات و پیشنهادهای خود را از طریق ایمیل [email protected] با ما در میان بگذارید و یا با مراجعه به فرم ارسال دیدگاه که در انتهای هر مقاله قرار دارد نظرات و سوالات خود را مطرح کنید.

در این جلسه قصد داریم شما را با تکنولوژی زیبا و جذاب Ajax آشنا کنیم . همراه ما باشید .

 

استفاده از تابع ای‌جکس (Ajax) در MVC

 

تعریف ای‌جکس به زبان ساده:

کاربرد اصلی Ajax در وب بدین صورت است که هنگامی که دکمه ای کلیک میشود و میخواهد اطلاعات را بسمت سرور ارسال کند ، دیگر صفحه مرورگر refresh نمی شود . بلکه ارسال فرم به سرور در پشت صحنه انجام می شود و کاربر فقط علامت درحال بارگذاری یا Loading را مشاهده می کند .

آموزش Ajax در MVC

 

معرفی اجمالی JQuery :

برای شروع کار با Ajax نیاز داریم کمی درباره jQuery صحبت کنیم . برای استفاده از دستورات جی کوئری ، باید فایل jQuery.min.js را به صفحه یا ویوی خود اضافه کنیم :

<script src="~/Scripts/jquery-2.1.3.min.js"></script>

بعنوان مثال در view داریم :

<p>Hello World!</p>   
<button type="button" id="btnDisplayMessage">Click Me!</button>
<div id="message"></div>
<script src="../Scripts/jquery-2.1.3.min.js"></script>

و دستورات جی کوئری را به صورت زیر نوشتیم :

$(document).ready(function () {     
 $("p").css("color", "red"); //1     
 $("button#btnDisplayMessage").click(function (e) {         
  $("div#message").html("<p>Hello World!</p>"); //2     
 }); 
});

 

توضیح : دستور شماره 1 کارش اینست که تمام پاراگرافها را قرمز رنگ میکند و دستور شماره 2 کارش اینست که وقتی روی دکمه ای با ID=btnDisplayMessage کلیک می شود ، عبارت Hello World را داخل div ای با ID=message مینویسد .

 

شروع تعریف تابع Ajax در View:

تا بدین جا با مفهوم و کاربرد Ajax در وب آشنا شدیم و نیز یک مثال از دستورات جی کوئری را با هم بررسی کردیم . در این بخش وارد کدنویسی Ajax در View می شویم .

برای شروع ، ابتدا کد زیر را در تگ head ویوی موردنظر مینویسیم :

$(document).ready(function () { 
 $("button#btnDisplayMessage").click(function () { 
 $("div#message").html(""); // Solution (3) 
 $.ajax({ 
 type: "GET", dataType: "json", data: null, url: "/StepByStep/GetData01", 
 error: function (response) { 
 $("div#message").html("Error on sending or receiving data!"); 
 }, 
 success: function (response) { 
  //$("div#message").html(response); 
  $("div#message").html(response.Message); 
  }, 
  }); 
 }); 
});

 

پارامترهای تابع Ajax:

تابع ajax بصورت ()ajax.$ تعریف می شود که پارامترهای آن عبارتند از :

  1. type : نوع درخواست ما از سرور
  2. dataType : نوع داده ای که از سرور به سمت ما ارسال می گردد
  3. data : پارامترهای ورودی که به تابع اکشن ارسال می گردد
  4. url : نشانی اکشن یا web api در سمت سرور می باشد
  5. error : اگر request ای که به سرور ارسال می شود با خطا روبرو شود
  6. success : وقتی درخواست به سمت سرور موفقیت آمیز باشد .

 

تگ های html ای که در تگ body همین ویو مینویسیم بصورت زیر است :

 

<button id="btnDisplayMessage" type="button">Click Me!</button>
<div id="message"></div>

 

و اکشن GetData01 نیز بصورت زیر تعریف می شود :

[System.Web.Mvc.HttpGet] 
public System.Web.Mvc.JsonResult GetData01() { 
 return (Json(data: new { Message = "Hello World!" }, 
 behavior: System.Web.Mvc.JsonRequestBehavior.AllowGet)); 
}

لطفا اطلاعات بیشتر را در وب سایت jQuery.com  دنبال کنید.

 

نحوه صحیح تعریف پارامتر type و اتریبیوت بالای اکشن:

دقت کنید که اگر پارامتر type تابع ajax را post تعریف کنیم ، در بالای اکشن ، اتریبیوت [System.Web.Mvc.HttpPost] را باید تعریف کنیم . در صورتی که یکی get باشد و دیگری post ، با error مواجه می شویم .

 

مثالی دیگر از کاربرد تابع Ajax در MVC:

بعنوان مثال دیگر ، فرض کنید دیتا که از سرور به ویو ارسال می شود دو قسمت age , fullname را دارد . در view دو span برای این دو دیتا در نظر میگیریم که وقتی response از سرور ارسال شد ، آنها را داخل این span ها نمایش دهیم .

بخش body فایل view بصورت زیر می باشد :

<div>
 <div id="message"></div>
 <button id="btnDisplayUserInformation" type="button">Display User Information</button> 
 Age: 
 Full Name:
</div>

 

سورس کد تابع Ajax این مثال:

تابع ajax آن بدین صورت تعریف شده است :

$(document).ready(function () { 
$("button#btnDisplayUserInformation").click(function () { 
$("div#message").html(""); //1 
$("span#age").html(""); //1 
$("span#fullName").html(""); //1 
$("button#btnDisplayUserInformation").hide(); //2 
$.ajax({ type: "POST", dataType: "json", data: null, url: "/StepByStep/GetData03", error: function (response) { 
 $("div#message").html("Error on sending or receiving data!"); 
 $("button#btnDisplayUserInformation").show(); 
 }, success: function (response) { 
  $("span#age").html(response.Age); 
  $("span#fullName").html(response.FullName); 
  $("button#btnDisplayUserInformation").show(); }, 
  }); 
 }); 
});

 

شرح دستورات فوق:

دستورات فوق با زدن دکمه ای با ID=btnDisplayUserInformation اجرا می شوند :

در دستورات شماره 1 ، محتوای داخل span و div را خالی میکنیم و در خط 2 ، دکمه را مخفی میکنیم تا کاربر نتواند کلیک کند !

اگر فرآیند ارسال و دریافت اطلاعات به سرور با ارور مواجه شد ، در div با ID=message پیغام متناسب نمایش داده می شود وگرنه age , fullname ارسال شده به کاربر نمایش داده می شود و دکمه دوباره show می شود .

سورس کد اکشنGetData03:

کد اکشن نیز بصورت زیر تعریف می شود :

[System.Web.Mvc.HttpPost] 
public System.Web.Mvc.JsonResult GetData03() { 
System.Threading.Thread.Sleep(5000); //1 
return (Json(data: new { FullName = "Ehsan Safari", Age = 28 }, 
 behavior: System.Web.Mvc.JsonRequestBehavior.AllowGet)); 
}

دستور شماره 1  برای اینست که کندی سرعت اینترنت را شبیه سازی کنیم . بنابراین بعد از زدن دکمه ، 5 ثانیه طول میکشد تا جواب را کاربر ببیند

برای تمرین بیشتر در حوزه ajax ، به وب سایت w3schools مراجعه شود .

 

افزودن بخش بارگذاری (لودینگ:Loading):

در این درس میخواهیم بخش لودینگ Loading نیز به view خود اضافه کنیم .

برای دانلود تصویر متحرک Loading با فرمت gif ، می توانید به وب سایت AjaxLoad.info مراجعه نمایید . برای مثال ، بنده تصویر زیر را برای نمایش در view خود انتخاب کرده ام :

ajax Loading gif

 

سپس باید یک تگ div را برای نمایش این عکس تعریف کنیم :

<div id="loading">
<img alt="Loading" src="~/Images/Loading.gif" title="Loading" /> Loading&hellip; Please Wait!
</div>

کد تابع ای‌جکس برای نمایش لودینگ:

کدهای جاوا اسکریپت برای تعریف تابع ajax بصورت زیر می باشد :

$(document).ready(function () { 
 $("button#btnDisplayUserInformation").click(function () { 
  $("div#message").html(""); $("span#age").html(""); 
  $("span#fullName").html(""); $("div#loading").show(); 
  $("button#btnDisplayUserInformation").hide(); 
  $.ajax({ type: "POST", dataType: "json", data: null, 
   url: "/StepByStep/GetData04", error: function (response) { 
    $("div#message").html("Error on sending or receiving data!"); }, 
    success: function (response) { 
     $("span#age").html(response.Age); 
     $("span#fullName").html(response.FullName); }, 
     complete: function (response) { $("div#loading").hide(); 
  $("button#btnDisplayUserInformation").show(); }, 
  }); 
 }); 
});

 

تعریف استایل CSS:

و در بخش style ها ، تگ div ای که شامل loading gif می باشد را مخفی میکنیم :

div#loading { display: none; }

با فشردن دکمه ، لودینگ را show میکنیم . در تابع ajax پارامتر دیگری داریم بنام complete که بعد از error و success رخ میدهد . یعنی این فرآیند چه با موفقیت تمام شود چه با شکست ، رویداد complete رخ میدهد .

 

نحوه فراخوانی اکشن بهمراه پارامتر در تابع Ajax:

در این بخش میخواهیم اطلاعاتی که کاربر در فرم وارد میکند را به تابع ajax و سپس به اکشن مربوطه ارسال کنیم و نتیجه را برگردانیم .

دو textbox بنامهای age , fullname داریم که بصورت زیر تعریف شده اند :

Age: <input id="age" type="search" />
Full Name: <input id="fullName" type="search" />
<button id="btnCreate" type="button">Create</button>

 

دستورات Javascript مورد نیاز برای پیاده‌سازی قابلیت ایجکس:

کدهای جاوااسکریپت مربوط به این مثال، بصورت زیر تعریف می شوند :

$(document).ready(function () { 
 $("button#btnCreate").click(function () { 
  $("div#message").html(""); 
  $("div#loading").show(); 
  $("button#btnCreate").hide(); 
  var varData = { age: 
   $("input#age").val(), fullName: 
   $("input#fullName").val(), }; 
   $.ajax({ type: "POST", dataType: "json", 
    data: varData, url: "/StepByStep/GetData05", 
    error: function (response) { 
     $("div#message").html("Error on sending or receiving data!"); 
     }, 
     success: function (response) { 
      $("input#age").val(""); 
      $("input#fullName").val(""); 
      $("div#message").html(response.Message); }, 
      complete: function (response) { 
      $("div#loading").hide(); $("button#btnCreate").show(); }, 
      }); 
   }); 
 });

توضیح : قبل از شروع تابع ajax ، بصورت زیر مقادیر ورودی کاربر را از فرم گرفته و داخل age , fullname قرار میدهیم :

var varData = { age: $("input#age").val(), fullName: $("input#fullName").val(), };

سپس این مقادیر را داخل data قرار میدهیم و به اکشن میفرستیم : data: varData

کد اکشن GetData05:

اکشن GetData05 بصورت زیر تعریف می شود :

[System.Web.Mvc.HttpPost] 
public System.Web.Mvc.JsonResult GetData05(string FullName, int Age) { 
 System.Threading.Thread.Sleep(5000); 
 string strMessage = string.Format("I'm {0} and {1} years old.", FullName, Age); 
 return (Json(data: new { Message = strMessage }, 
  behavior: System.Web.Mvc.JsonRequestBehavior.AllowGet)); 
}

 

توضیح دستورات اکشن فوق:

متد اکشن فوق را POST تعریف کرده ایم . در دستور Sleep بمدت 5 ثانیه تصویر لودینگ نمایش داده می شود و در strMessage ، مقادیری که به اکشن ارسال شده است را میریزیم و آنرا بصورت anonymous Object به ویو ارسال میکنیم .

دوستان و همراهان مقالات وب سایت محتوا ، در اینجا ، مجموعه آموزشی ASP.NET MVC 5 به پایان می رسد . مجددا از زحمات استاد عزیز ، آقای مهندس داریوش تصدیقی ، تشکر میکنم . لطفا با بیان دیدگاه های خود بعد از هر مقاله و نیز ارسال پیشنهادهای خود به ایمیل : [email protected] (و یا فرم ارسال دیدگاه) بنده را در نگارش هر چه بهتر مقالات آموزشی وب ، یاری نمایید

0/5 (0 نظر)

اطلاعات مقاله

آموزش ASP.NET MVC5 – فصل۱۰

فرم ارسال دیدگاه درباره

آموزش ASP.NET MVC5 – فصل۱۰

دیدگاه کاربران درباره

آموزش ASP.NET MVC5 – فصل۱۰

avatar سید حبیب اله (2018-06-07 03:10:07)
بنام خدا  فوق العاده زیبا و کامل توضیح داده شده , ممنون و سپاس
avatar Mohtava-Admin (2018-06-07 08:48:21)

با سلام خدمت شما

ممنون از نظر لطفتون