jsonResult در MVC

در این مقاله راجع به نوع داده JsonResult صحبت خواهیم کرد.در نمونه ای که ضمیمه مقاله است به دریافت و ارسال json بین کنترلر و View خواهیم پرداخت .در ضمن داده های بزرگ و حجیم به فرمت Json را نیز مدیریت خواهیم کرد.

همان طور که می دانید ActionResult یک نوع داده عمومی در MVC است که در آن طیف مختلف خروجی ها می توانند قرار گیرند یکی از این نوع خروجی های JsonResult است که به ما یک شی از نوع json تحویل خواهد داد .انواع دیگر خروجی های Action در mvc را در لینک های زیر می توانید مشاهده کنید:

ActionResult در MVC

EmptyResult در MVC

PartialViewResult در MVC

json مخفف JavaScipt Object Notation است .که یک فرمت تبادل داده هاست .در JSON اشیا و اطلاعات تبدیل به فرمت قابل فهم توسط کامپیوتر می شوند.به صورت پیش فرض جاوااسکریپت فرمت JSON را درک می کند ولی برای سایر زبان ها اگر از کتابخانه های جانبی استفاده کنیم قابلیت درک آن را پیدا خواهند کرد.

در نمونه ای که ضمیمه مقاله می باشد توسط یک Action از یک آرایه از اشیا با فرمت Json دریافت خواهیم کرد.برای شروع کار یک پروژه از نوع MVC ایجاد کنید .در داخل Model یک کلاس(برای آشنایی بیشتر با مفهوم کلاس به مقاله آموزش فارسی کلاس ها در برنامه نویسی مراجعه کنید ) به نام UserModel ایجاد کنید .ساختار این کلاس به صورت زیر است

 public class UserModel
    {
        public int UserId { get; set; }
        public string UserName { get; set; }
        public string Company { get; set; } 
    }

بر روی کنترلر کلیک راست کنید و یک کنترلر Empty به نام Home ایجاد کنید .در داخل این کنترلر ابتدا یک متد (دقت کنید که متد با action متفاوت است .متد های از بیرون قابل دستیابی نیستند و فقط کارهای داخلی را انجام میدهند)به نام GetUsers تعریف می کنیم .در داخل این مدل یک شی لیست از کلاس UserModel تعریف کرده و آن را با اشیایی از جنس همین کلاس پر می کنیم .ساختار این متد به صورت زیر است

 private List<UserModel> GetUsers()
        {
            var usersList = new List<UserModel>   
{   
new UserModel   
{   
UserId = 1,   
UserName = "سمیه حاتمی",   
Company = "شرکت برنامه نویسان"   
},   
new UserModel   
{   
UserId = 1,   
UserName = "نوشین تقیان",   
Company = "شرکت برنامه نویسان"   
},   
new UserModel   
{   
UserId = 1,   
UserName = " سپینود سلطانیه",   
Company = "شرکت برنامه نویسان"   
}   
};
            return usersList;
        }

در داخل کنترلر یک Action به نام GetUsersData تعریف می کنیم .ساختار این action به صورت زیر است .

  public ActionResult GetUsersData()
        {
            var users = GetUsers();
            return Json(users, JsonRequestBehavior.AllowGet);
        }

همان طور که می بینید در داخل این action متد GetUsers را فراخوانی کرده و حاصل را در یک لیست به نام Users قرار داده ایم .سپس در خط بعدی این لیست از اشیا را به صورت Json از َAction بازپس گرفته ایم

خروجی این action به صورت زیر خواهد بود .

همان طور که می بینید هیج View ایی به این action اضافه نشده است .این Action حاصل را که به صورت یک آرایه ای از Json است در داخل Response نمایش می دهد.

تا اینجا ما توانستیم یک خروجی از نوع Json دریافت کنیم .

حال قصد داریم که اطلاعاتی که به صورت json در سمت کاربر ساخته شده است را به یک Action ارسال کنیم و دوباره در سمت کنترلر و Action آن را دوباره به صورت شی که قابل فهم توسط برنامه است تبدیل کنیم .

ابتدا یک Action به صورت زیر بسازید

  public ActionResult Sample()
        {
            return View();
        }

برای این Action یک view خالی بسازید .کد هایی که در داخل View هست را پاک کرده و کدهای زیر را در آن جایگزین کنید

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ارسال اطلاعات به صورت Json به Action و سپس تبدیل آن به شی از نوع UserModel</title>
</head>
<body dir="rtl" style="background-color:beige">
    <div>
        <label>ارسال اطلاعات به صورت Json به Action و سپس تبدیل آن به شی از نوع UserModel</label><br /><br />
        <input type="button" id="btnUpdateUserDetail" value="تبدیل json به شی در برنامه " onclick="UpdateUserDetail();" />
    </div>
</body>
</html>
@*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*@
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script lang="en" type="text/javascript">

function UpdateUserDetail() {
var usersJson = GetSampleUsersList();
var getReportColumnsParams = {
"usersJson": usersJson
};
$.ajax({
type: "POST",
traditional: true,
async: false,
cache: false,
url: '/Home/UpdateUsersDetail',
context: document.body,
data: getReportColumnsParams,
success: function (result) {
alert(result);
},
error: function (xhr) {
//debugger;
console.log(xhr.responseText);
alert("Error has occurred..");
}
});
}
function GetSampleUsersList() {
var userDetails = {};
var usersList = [];
for (var i = 1; i <= 3; i++) {
userDetails["UserId"] = i;
userDetails["UserName"] = "User- " + i;
userDetails["Company"] = "Company- " + i;
usersList.push(userDetails);
}
return JSON.stringify(usersList);
}
</script>

سپس برای دکمه ای که در برنامه وجود دارد یک Action با صفت Httppost می نویسم .در داخل این Action اطلاعاتی که به صورت json به این action ارسال شده است را deserialize می کنیم و دوباره به صورت شی در می آوریم .

کد این action به صورت زیر است

   public ActionResult UpdateUsersDetail(string usersJson)
        {
            var js = new JavaScriptSerializer();
            UserModel[] user = js.Deserialize<UserModel[]>(usersJson);
            //TODO: user now contains the details, you can do required operations   
            return Json("تبدیل با موفقیت صورت گرفت");
        }

تا به اینجا توانستیم به سمت کاربر json ارسال کنیم و همچنین داده های ورودی به صورت json را دریافت کرده و آن را تبدیل به شی مورد نظر در برنامه کنیم و بعد بتوانیم از آن استفاده کنیم .

حال فرض کنید که با حجم عظیمی از داده هایی از نوع json سروکار داریم .برای آموزش این مطلب یک کنترلر جدید به نام json ایجاد می کنیم

یک متد به نام GetUsersHugeData با بدنه زیر در آن می نویسیم

  public System.Web.Mvc.JsonResult GetUsersHugeList()   
        {   
            var users = GetUsersHugeData();   
            return Json(users, JsonRequestBehavior.AllowGet);   
        }

یک Action به نام GetUsersHugeList ایجاد می کنیم

 private List<UserModel> GetUsersHugeData()   
        {   
            var usersList = new List<UserModel>();   
            UserModel user;   
            for (int i = 1; i < 51000; i++)   
            {   
                user = new UserModel   
                {   
                    UserId = i,   
                    UserName = "User-"+i,   
                    Company = "Company-"+i   
                };   
                usersList.Add(user);   
            }   
   
            return usersList;   

        پس از اجرا خروجی این action به صورت زیر خواهد بود.

فایل های ضمیمه

4292_JsonResult.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

jsonResult در MVC

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید