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

ارسال مقادیر TextBox از View به Controller با استفاده از jQuery در ASP.Net MVC
0 0
ارسال مقادیر TextBox از View به Controller با استفاده از jQuery در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد ، چگونه می توان مقادیر TextBox را از View به Controller با استفاده از jQuery AJAX در Razor ASP.Net MVC 5 ارسال کرد .
مقدار TextBox به عنوان پارامتر در ارتباط جی کوئری AJAX ارسال می شود و مقدار آن در پارامتر داخل روش Action Controller در 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 تنظیم می شود .
مقدار پارامتر name به خاصیت Name ( اشیاء) PersonModel به همراه DateTime فعلی اختصاص داده می شود و سرانجام شی PersonModel به عنوان JSON به عملکرد jQuery AJAX برمی گردد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(string name)
    {
        PersonModel person = new PersonModel
        {
            Name = name,
            DateTime = DateTime.Now.ToString()
        };
        return Json(person);
    }
}

View
مرحله بعدی اضافه کردن یک View برای Controller است و در ضمن شما باید کلاس انتخاب PersonModel را که قبلاً ایجاد شده است را اضافه کنید .

در داخل View ، در اولین خط کلاس PersonModel به عنوان Model برای View اعلام می شود. View شامل یک عنصر HTML TextBox و یک دکمه است. دکمه به یک رویداد handler جی کوئری اختصاص داده شده است و هنگامی که دکمه کلیک می شود یک جی کوئری AJAX  به روش عمل Controller ساخته می شود.
شکل زیر یک ارتباط jQuery AJAX را در ASP.Net MVC شرح می دهد

URL برای ارتباط جی کوئری AJAX به روش عملکرد Controller یعنی / Home / AjaxMethod تنظیم شده است. مقدار TextBox به عنوان پارامتر منتقل و پاسخ برگشتی با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شود

@model jQuery_AJAX_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 () {
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{name: "' + $("#txtName").val() + '" }',
                    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 استفاده کنید.

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