آموزش Ajax ارسال و دریافت اطلاعات به صورت Json

این آموزش در راستای آموزش قبلی میباشد. , و در این آموزش نخوه ارسال و دریافت اطلاعات به صورت Json را مورد برس قرار میدهیم. مواردی که در این آموزش مورد برسی قرار میدهیم :

• ارسال و دریافت اطلاعات به صورت Json در View توسط Ajax
• ارسال اطلاعات به صورت Json در View
• ارسال اطلاعات به صورت Json در View
• ارسال و دریافت اطلاعات به صورت Json در Action
• دریافت اطلاعات به صورت Json در Action
• ارسال اطلاعات به صورت Json در Action

برای مشاهده تمام قسمت های آموزش Ajax در ASP.NET MVC 5 اینجا کلیک کنید.

مثال ۶ – ارسال و دریافت اطلاعات به صورت Json در View توسط Ajax

یکی از مواردی که در زمان استفاده از Json در Ajax باید رعایت شود افزودن فیلد dataType به تابع Ajax است، به تابع زیر توجه فرمایید.

$.ajax({
    url: '...',
    type: '...',
    data: '...',
    dataType:'json',
    success: function () {},
    error: function () {}
});

ارسال اطلاعات به صورت Json در View

در مثال های بالا در مورد ارسال اطلاعات به صورت Json توضیخ دادیم تقریبا  تمام ارسال ها به صورت Json بود. ارسال اطلاعات به صورت ساده یا Json توسط مقدار Data انجام میگیرد. ارسال اطلاعات به صورت Json به این صورت است :

data: {Name: "ali", Family: "rezaei", Password: "123456" }

دریافت اطلاعات به صورت Json در View

دریافت اطلاعات در فیلد success و نوسط متغییری که به آن معرفی میکنیم انجام میشود. فرض کنید اطلاعات زیر به صورت Json از سمت اکشن ارسال شده است

{ Name = "ali", Famili = "Jafari", Password = "123456" }

برای دسترسی به هرکدام از این ۳ فیلد ارسالی از سمت اکشن مانند زیر در تابع success عمل میکنیم.

success: function (data) {
    var name = data["Name"];
    var family = data["Family"];
    var password = data["Password"];
},

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

success: function (Data) {
    $.each(Data['User'], function (i, item) {
        var row = '<div>' + item.Name + ' ' + item.Family + '</div>';
        $('.MyData').append(row);
    });
},

مثال ۷ – ارسال و دریافت اطلاعات به صورت جی سان در اکشن

توجه داشته باشید بهتر است در زمانی که قرار است اکشن شما مقدار Json به سمت View ارسال کند به چای ActionResult از JsonResult استفاده کند مانند کد زیر.

public JsonResult Index()
{}

دریافت اطلاعات به صورت Json در Action

دریافت اطلاعات به صورت Json توسط Action خیلی ساده میباشد. فرض کنید اطلاعاتی به صورت جی سان با فیلد های نام، نام خانوادگی و رمز عبور به اکشن ارسال کردیم، به صورت زیر این ۳ فیلد را دریافت میکنیم.

توجه : نام فیلد های Json ارسالی توسط تابع Ajax باید با نام فیلد هایی که در تابع ورودی Action وارد میکنیم، یکسان باشد.

public JsonResult Index(string Name, string Family, string Password)
{}

ویا اگر ما از یک مدل استفاده میکنیم مثل مدل User که در مثال های بالا از آن استفاده کردیم کافی است نام مدل را وارد کنیم. توجه داشته باشید که اگر از ValidateAntiForgeryToken هم استفاده میکنید مقدار آن را از سمت ویو به سمت اکشن ارسال کنید.

ارسال اطلاعات به صورت Json در Action

نحوه ارسال اظلاعات به صورت Json به شکل زیر است. توجه داشته باشید که حتما باید توسط فیلد آخر Json خود اجازه ارسال اطلاعات به صورت Json را توسط دستور JsonRequestBehavior.AllowGet صادر کنید.

public JsonResult Index(string Name, string Family, string Password)
{
    return Json(new { Name = "ali", Famili = "Jafari", Password = "123456" ,JsonRequestBehavior.AllowGet});
}

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

public JsonResult Index()
{
    var MyUsers=db.Users.ToList();
    return Json(new { MyUsers, JsonRequestBehavior.AllowGet});
}