توضیحات و دانلود

درخواست ارسال شیء Model به jQuery $ .ajax با روش Controller در ASP.Net MVC
0 0
درخواست ارسال شیء 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>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :