چگونه از JsonResult در ASP.NET MVC استفاده کنیم

Controller MVC انواع متفاوتی از خروجی را طبق اطلاعاتی که برای اپلیکیشن ما نیاز است ارائه می دهد. در این مقاله ما JsonResult در MVC را با یکدیگر خواهیم آموخت. بنابراین به جای این که به عمق مطلب برویم، بهتر است که با یک اجرای کاربردی شروع کنیم.

ActionResult چیست؟

ActionResult یک کلاس چکیده برای نمایش خروجی به مشتری در فرمت های مختلف است، که در نتیجه توسط Controllerارائه داده می شود. ActionResult برای Controller تعریف شده و Controller نیز به مشتری بر می گردد (مرورگر).

JsonResult چیست؟

JsonResult یک نوع Actionدر MVC می باشد که در نتیجه اطلاعات را برای نمایش بر می گرداند یا مرورگر با فرم JSON (JavaScript Object notation format).

در این مقاله ما چگونگی کارکرد JsonResult با گرفتن سناریو برای پر کردن View با استفاده از اطلاعات JSON را یاد می گیریم.

JsonResult

قدم اول : ایجاد اپلیکیشن MVC

Start ، سپس All Programs و بعد مایکروسافت ویژوال استادیو ۲۰۱۵ را باز کنید.

File، سپس New و رویProject کلیک کنیدو سپسASP.NET Web Application Template را انتخاب کنید، در نهایت یک اسم دلخواه برای پروژه انتخاب کنید و بر روی OK کلیک کنید.

گزینه ی MVC empty application را انتخاب کنید و روی OK کلیک کنید.

قدم دوم: ایجاد یک Model

در اپلیکیشن MVC ایجاد شده روی Model folder راست کلیک کنید، اسم کلاس را employee یا هر اسم دیگری بگذارید و روی OK کلیک کنید.

Employee.cs

public class Employee  
{  
public int Id { get; set; }  
public string Name { get; set; }  
public string City { get; set; }  
public string  Address { get; set; }  
}

قدم سوم: اضافه کردن Controller

روی Controller folder در اپلیکیشن MVC ایجاد شده کلیک راست کنیدو اسم Controller را Homeانتخاب کنید، و روی OK کلیک کنید.

HomeControlle.cs

public class HomeController : Controller    
{    
    // GET: Home    
    public ActionResult Index()    
    {    
    return View();    
    }    
    [HttpGet]    
    public JsonResult EmpDetails()    
    {    
    //Creating List    
        List<Employee> ObjEmp = new List<Employee>()    
        {    
    //Adding records to list    
    new Employee {Id=1,Name="Vithal Wadje",City="Latur",Address="Kabansangvi" },    
    new Employee {Id=2,Name="Sudhir Wadje",City="Mumbai",Address="Kurla" }    
        };    
    //return list as Json    
    return Json(ObjEmp, JsonRequestBehavior.AllowGet);    
    }    
}  

در کلاس Controller بالا MethodJsonResult همانEmpDetails است و ما Record ها را در Generic list اضافه می کنیم و برای جلوگیری از تشابه نتیجه query آن را به عنوان JSON ارائه می دهیم.

خطاهای (ارور) ممکن

اگر شما methodJSON را بدون تنظیم کردن ویژگی JsonRequestBehavior ارائه دهید ، ارور زیر رخ خواهد داد.

دلیل رخداد خطا

درخواست GET به صورت پیش فرض در JSONResult غیر فعال است و برای فعال کردن آن لازم است که JsonRequestBehavio را روی AllowGetتنظیم کنیم مثل کد زیر:

Json(ObjEmp, JsonRequestBehavior.AllowGet);

حالا اپلیکیشن را اجرا کنید و خروجی JsonResult در مرورگر نشان داده خواهد شد، ماند تصویر زیر:

حالا ما با موفیقت JsonResult را برمیگردانیم. برای پر کردن View با استفاده از آن به سراغ قدم بعدی میرویم :

قدم چهارم: اضافه کردن Partial View

در پروژه MVC ایجاد شده در View folder روی Home folder کلیک راست کنید،مانند تصویر زیر:

اسم ان را EmpDetails بگذارید و روی دکمه Add کلیک کنید.

برای پر کردن View با استفاده ازjson ما به JQuery و JQuery library زیر نیاز داریم تا از View با Controller ارتباط بر قرار کنیم.

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

ورژن فایل JQuery library ممکن است متفاوت باشد (پایین تر یا بالاتر). حالا کد زیر را در Partial View ایجاد شده بنویسید.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>  
<script>  
$(document).ready(function () {  
//Call EmpDetails jsonResult Method  
$.getJSON("Home/EmpDetails",  
function (json) {  
var tr;  
//Append each row to html table  
for (var i = 0; i < json.length; i++) {  
tr = $('<tr/>');  
tr.append("<td>" + json[i].Id + "</td>");  
tr.append("<td>" + json[i].Name + "</td>");  
tr.append("<td>" + json[i].City + "</td>");  
tr.append("<td>" + json[i].Address + "</td>");  
$('table').append(tr);  
}  
});  
});  
</script>  
<table class="table table-bordered table-condensed table-hover table-striped">  
<thead>  
<tr>  
<th>Id</th>  
<th>Name</th>  
<th>City</th>  
<th>Address</th>  
</tr>  
</thead>  
<tbody></tbody>  
</table> 

قدم پنجم: Call با partial view (Partial View) EmpDetails در صفحه نمایش اصلی

حالا partial view (Partial View) EmpDetails را در صفحه نمایش اصلی مانند زیر ارتباط دهید:

@{  
ViewBag.Title = "www.compilemode.com";  
}  
<div style="margin-top:20px">  
@Html.Partial("EmpDetails");  
</div> 

قدم ششم: اپلیکیشن را اجرا کنید.

در این مثال ما با چگونگی کارکرد JsonResult با استفاده از سناریو پر کردن View در ASP.NET MVC.آشنا شدیم.