آموزش فراخوانی Controller با Ajax و ارسال خروجی با JsonResult
یکی از راه های ارتباطی بین View و Controller در MVC استفاده از Ajax می باشد، به ازای فراخوانی هر Action در Controller نیاز به تبادل اطلاعات ما بین سرور و کلاینت می باشد، کلاینت با استفاده از صفحه ای که می بیند(View) درخواستی ثبت می کند، و سرور به محض دریافت درخواست از طرف کلاینت شروع به پردازش دستور می کند(Controller)،در حالت عادی، این فرآیند نیازمند بارگذاری مجدد صفحه ی مربوطه می باشد، فرض کنید صفحه ی مورد نظر به صورت گرافیکی طراحی شده باشد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
در نتیجه به ازای هر بار اجرای درخواست از سوی کلاینت، زمان زیادی صرف بارگذاری صفحه می شود که ممکن است باعث پایین آمدن کارایی سایت شود. تکنولوژی Ajax به دنبال رفع این مشکل، راه کاری را پیشنهاد داده است، او می گوید، اگر نیازی به بارگذاری تمامی محتویات صفحه نداری، قسمتی را که میخواهی بارگذاری کنی به من معرفی کن! و با همین راهکار ساده مشکل خیلی از سایت هایی با حجم محتویات بالا را حل نمود. در ادامه به بررسی Ajax در یک نمونه کد بسیار ساده می پردازیم.
ما در View یک TextBox و یک دکمه قرار دادیم، کاربر میتواند متنی را در Textbox مربوطه وارد نماید، و زمانی که بر روی دکمه Ajax کلیک کرد،متنی که وارد کرده به نمایش گذاشته شود.
<div class="container">
<input class="form-control col-md-2 message" type="text" placeholder="پارامتر ارسالی">
<button type="button" class="btn btn-success Ajax">Ajax</button>
</div>
با استفاده از JQuery به برنامه دستور میدهیم، زمانی که کاربر بر روی کلاس Ajax کلیک کرد، مقادیر کلاس message دریافت شود و به عنوان پارامتر ورودی به Controller ارسال گردد.
$(document)
.ready(function() {
$(".Ajax")
.click(function(e) {
e.preventDefault();
var message = $('.message').val();
if (message === '') {
alert("لطفا پارامتر ارسالی را وارد کنید");
}else{
$.ajax({
type: "POST",
url: "@Url.Action("AjaxSample", "Home")",
data: '{message: "' + $('.message').val() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (response.Ajax) {
alert(response.msg);
} else {
alert("این متن برای تست می باشد");
}
},
error: function(response) {
alert("مشکلی در اجرای برنامه به وجود آمده ");
}
});
}
});
});
همانطور که در کد ها مشاهده می کنید ، ما با استفاده از دستور Ajax.$ درخواست کلاینت را به سرور انتقال دادیم، Ajax شامل چند پارامتر مهم می باشد؛Type: روش ارسال را مشخص می کند،URL: آدرس Controller مربوطه را تعیین می کند، data: زمانی که قصد ارسال پارامترها را به Action مربوطه داریم استفاده می شود،success: زمانی که دستور Ajax با موفقیت فراخوانی و اجرا می شود، در بازگشت، دستور success اجرا می شود.معمولا داخل بدنه success از یک تابع استفاده می شود که دستورات بعدی را به برنامه می دهد. error: اگر به هر دلیلی عملیات Ajax با موفقیت همراه نبود، تابع Ajax دستور error را فراخوانی می کند، error نیز به مانند success شامل تابعی می باشد که دستورات بعدی را صادر می کند.
public JsonResult AjaxSample(string message)
{
if(message!="1")
return Json(new { Ajax = true, msg = message }, JsonRequestBehavior.AllowGet);
return Json(new { Ajax = false, msg = message }, JsonRequestBehavior.AllowGet);
}
بعد از اجرای دستورات Ajax بر اساس URL که داخل بدنه Ajax تعیین کردیم، برنامه ما را به اکشن مربوطه هدایت می کند، در اینجا ما یک پارامتر از نوع String دریافت میکنیم، با یک دستور شرطی ساده اقدام به ارسال پیام ها به کلاینت می کنیم.
همان طور که در کد مشخص است، ما با استفاده از JsonResult اقدام به ارسال خروجی به کلاینت می کنیم، دقت داشته باشید، برای اکشن از نوع JsonResult مقدار برگشتی باید از نوع Json باشد.
return Json(new { Ajax = true, msg = message }, JsonRequestBehavior.AllowGet);
در کد بالا مشاهده می کنید که ما دو پارامتر با نام های Ajax و msg داریم که به View ارسال می شود، در بدنه ی تابع Ajax، ما به برنامه گفتیم که، اگر respond دریافتی از اکشن، برابر True بود،پیغامی که کاربر پیش تر در باکس مربوطه وارد کرده بود را نمایش بده و در غیر این صورت پیغام پیش فرض به کاربر نمایش داده شود.یکی از مزایای مقدار برگشتی Json، ارسال پارامتر به بدنه تابع Ajax در Jquery می باشد که میتواند به ما کمک کند کنترل بیشتری بر خروجی برنامه داشته باشیم.
ما در این برنامه از دستور ساده alert استفاده کردیم و خروجی Json را کنترل کردیم. با توجه به گستردگی JQuery می توان کارهای متنوعی در ازای خروجی های Json انجام داد.هدف از این نکته، درک بهتر Ajax و کاربرد آن در MVC بود، همچنین آشنایی با JsonResult که با داشتن قابلیت ارسال پارامتر خروجی به بدنه JQuery میتواند به ما کمک کند خروجی های متنوعی را برای کاربر به نمایش بگذاریم. توسینسو را به همه معرفی کنید