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

فراخوانی MVC Controller از AngularJS با استفاده از AJAX و JSON در ASP.Net MVC
0 0
فراخوانی MVC Controller از AngularJS با استفاده از AJAX و JSON در ASP.Net MVC

با سلام خدمت کاربران گرامی در این مقاله،نحوه ارتباط با MVC Controller از AngularJS  با استفاده از AJAX و JSON در ASP.Net MVC 5 Razor با مثال توضیح خواهیم داد.
روش عملیات Controller با استفاده از سرویس AngularJS $ http با AJAX و JSON از View در ASP.Net MVC 5 Razor نامیده می شود.

Model :

در زیر یک کلاس مدل به نام PersonModel با دو خصوصیت یعنی Name و 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
در داخل این روش داده ها  به سادگی به View بازگردانده می شود.

 روش  کار با AngularJS AJAX
در این روش   ساخته شده از عملکرد AngularJS AJAX را از View انجام می دهد.
توجه :
روش  زیر اقدام به ارتباط AJAX می کند و از این رو نوع بازگشت به JsonResult تنظیم می شود .
ارزش پارامتر Name به ویژگی Name از شی PersonalModel همراه با CurrentTime Current اختصاص داده شده و در نهایت شیء PersonModel به عنوان JSON به عملکرد AngularJS 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 اضافه کنید.
Markup View HTML شامل یک HTML DIV است که دستورات AngularJS توسط ng-app و ng-controller تعریف شده است.
HTML DIV شامل HTML TextBox و یک دکمه است. دکمه توسط دستور AngularJS ng کلیک کنید . وقتی Button کلیک می شود، تابع ButtonClick اجرا می شود.
در داخل تابع ButtonClick ، سرویس $ http برای ارتباط  AJAX به روش Action Controller استفاده می شود.

http دارای ویژگی ها و روش های زیر است :
خصوصیات
1. روش متد HTTP درخواست یعنی GET یا POST.
2. url - آدرس روش Controller
3. dataType - فرمت داده ها یعنی XML یا JSON.
4. data - پارامترهایی که باید به روش Action Controller ارسال شوند.
5. headers - لیست هدر ها برای درخواست HTTP مشخص می شود.
 رویداد Handler
1. موفقیت ( success)- این رویداد پردازنده هنگامی که فراخوانی AJAX با موفقیت اجرا می شود، فعال می شود.
2. خطا (error) - این رویداد پردازنده زمانی رخ می دهد که تماس AJAX با یک خطا مواجه می شود.
پاسخ دریافت شده از فراخوانی ajax در قالب json با موافیت در رویداد $http service  دریافت می شود و نتیجه با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.ButtonClick = function () {
            var post = $http({
                method: "POST",
                url: "/Home/AjaxMethod",
                dataType: 'json',
                data: { name: $scope.Name },
                headers: { "Content-Type": "application/json" }
            });
 
            post.success(function (data, status) {
                $window.alert("Hello: " + data.Name + " .\nCurrent Date and Time: " + data.DateTime);
            });
 
            post.error(function (data, status) {
                $window.alert(data.Message);
            });
        }
    });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Name:
        <input type="text" ng-model="Name"/>
        <br/>
        <br/>
        <input type="button" value="Submit" ng-click="ButtonClick()"/>
    </div>
</body>
</html>


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

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