ارسال داده به صورت JSON از Controller به View در ASP.NET MVC
در این مقاله من با مثال توضیح خواهم داد که چگونه از کلاس JsonResult برای بازگشت داده های JSON از کنترل به View در ASP.Net MVC استفاده کنید.
این روش که POST جی کوئری نامیده می شود و داده های JSON با استفاده از شیء کلاس JsonResult به View نمایش داده می شوند.
Model
در زیر یک کلاس مدل به نام PersonModel با دو خصوصیت یعنی نام و DateTime است.
public class PersonModel
{
/// <summary>
/// Gets or sets Name.
/// </summary>
public string Name { get; set; }
/// <summary>
/// Gets or sets DateTime.
/// </summary>
public string DateTime { get; set; }
}
Controller
کنترل کننده متشکل از دو روش عمل است.
روش GET
در داخل این روش اقدام، به سادگی View بازگردانده می شود.
روش POST جی کوئری
این روش عمل فراخوانی POST جی کوئری از View را مدیریت می کند.
مقدار پارامتر نام به ویژگی Name از شی PersonalModel همراه با CurrentTime Current اختصاص داده شده و در نهایت شیء PersonModel به عنوان JSON به تابع POST جی کوئری بازگشته است.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult PostMethod(string name)
{
PersonModel person = new PersonModel
{
Name = name,
DateTime = DateTime.Now.ToString()
};
return Json(person);
}
}
View
گام بعدی این است که یک View برای Controller اضافه کنید و در هنگام اضافه کردن شما باید کلاس ClassModel که قبلا ایجاد شده را انتخاب کنید.
در داخل View، در خط اول، کلاس PersonModel به عنوان Model برای View اعلام می شود. Viewشامل یک عنصر HTML TextBox و یک دکمه است. دکمه یک رویداد کلیک jQuery را تعیین میکند.
از URL برای فراخوانیPOST جی کوئری بر روی کنترلر یعنی / Home / PostsMethod تنظیم شده است. مقدار TextBox به عنوان پارامتر انتقال داده می شود و پاسخ بازگشت با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود
@model jQuery_POST_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<input type="text" id="txtName" />
<input type="button" id="btnGet" value="Get Current Time" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
$.post("/Home/PostMethod",
{ name: $("#txtName").val() },
function (response) {
alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
}
);
});
});
</script>
</body>
</html>