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

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

 آموزش 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:

Full Name:

                           

 

دستورات 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 نظر )

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

نظرات

  1. بنام خدا 

    فوق العاده زیبا و کامل توضیح داده شده , ممنون و سپاس

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

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین کتاب‌های الکترونیکی

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب آموزش گوگل آنالیتیکس

دانلود رایگان کتاب الکترونیکی

آموزش تصویری گوگل آنالیتیکس

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"