درخواست ارسال شیء Model به jQuery $ .ajax با روش Controller در ASP.Net MVC
با سلام در این مقاله با یک مثال توضیح می دهیم ، چگونه می توان درخواست ارسال شیء Model را در jQuery $ .ajax به روش Controller در ASP.Net MVC 5 Razor داد.
درخواست ارسال روش Controller با استفاده از jQuery AJAX $ .ajax فراخوانی می شود و شی کلاس به عنوان شی JSON از View در ASP.Net MVC 5 Razor منتقل می شود.
Model
در زیر یک کلاس 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
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، به سادگی نمایش داده می شود.
روش جابجایی عملیات جی کوئری AJAX
این روش ، ارتباط حاصل از عملکرد jQuery AJAX را از View دریافت می کند.
توجه :
روش عمل زیرارتباط های AJAX را کنترل می کند و از این رو نوع بازگشت به JsonResult تنظیم می شود .
شیء PersonModel که از View منتقل می شود به عنوان پارامتر دریافت می شود. مقدار DateTime فعلی به ویژگی DateTime اختصاص داده شده و سرانجام همان شیء PersonModel به عنوان JSON به عملکرد jQuery AJAX برمی گردد
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod(PersonModel person)
{
person.DateTime = DateTime.Now.ToString();
return Json(person);
}
}
View
در داخل View ، در اولین خط کلاس PersonModel به عنوان Modelبرای View اعلام می شود. View شامل یک عنصر HTML TextBox و یک دکمه است. دکمه به رویداد handler جی کوئری اختصاص داده شده است و هنگامی که دکمه کلیک می شود یک جی کوئری AJAX به روش عمل Controller ساخته می شود.
URL برای ارتباط جی کوئری AJAX به روش عملکرد Controller یعنی / Home / AjaxMethod تنظیم شده است. یک شیء JSON به نام Person ایجاد و مقدار TextBox به ویژگی Name اختصاص داده می شود.
Object Person JSON به عنوان پارامتر منتقل و پاسخ برگشتی با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شود.
@model jQuery_AJAX_Model_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" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
var person = {};
person.Name = $("#txtName").val();
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{person: ' + JSON.stringify(person) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("Hello: " + response.Name + ".\nCurrent Date and Time: " + response.DateTime);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>