Call MVC Controller from AngularJS using AJAX and JSON in ASP.Net MVC

In this VIDEO, I will explain with an example, how to call MVC Controller from AngularJS using AJAX and JSON in ASP.Net MVC5 Razor.

The Controller action method will be called using AngularJS $http service with AJAX and JSON from View in ASP.Net MVC 5 Razor.

Following is a Model class named PersonModel with two properties i.e. Name and DateTime.

The Controller consists of two Action methods.

Action method for handling GET operation
Inside this Action method, simply the View is returned.

Action method for handling AngularJS AJAX operation
This Action method handles the call made from the AngularJS AJAX function from the View.

The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the AngularJS AJAX function.

The View HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.

The HTML DIV consists of an HTML TextBox and a Button. The Button has been assigned AngularJS ng-click directive. When the Button is clicked, the ButtonClick function is executed.

Inside the ButtonClick function, the $http service is used to make an AJAX call to the Controller’s Action method.

Properties and Event Handler

The response from the AJAX call is received in JSON format inside the Success event handler of the $http service and the result is displayed using JavaScript Alert Message Box.