In this article I will explain with an example, how to pass (send) Model data to AngularJS Controller in ASP.Net Core.
Note: For beginners in ASP.Net Core 7, please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

Configuring the JSON Serializer setting

In order to configure the JSON serializer settings in ASP.Net Core 7, please refer my article ASP.Net Core 7: Changing the default Camel Case JSON Output.
 
 

Model

The Model class consists of the following porperties.
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

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

This Action method handles the call made from the AngularJS AJAX function from the View.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
 
Then, the current DateTime is assigned to the DateTime property of the PersonModel class object.
Note: The FromBody attribute is used for model-binding the data sent from AngularJS $http service.
 
Finally, the PersonModel class object is returned back to the View in JSON format.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod([FromBody]PersonModel person)
    {
        person.DateTime = DateTime.Now.ToString();
        return Json(person);
    }
}
 
 

View

Inside the View, the following script file is inherited.
1. angular.min.js
 
The HTML of the View consists of:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
TextBox – For capturing user input.
The HTML TextBox has been assigned with an AngularJS ng-model directive.
Note: If you want to learn more about ng-model directive, please refer my article Using ng-model directive in AngularJS.
 
Button – For displaying message.
The INPUT Button has been assigned with the following AngularJS directive.
ng-click – Called when user clicks the Button.
When the Button is clicked, the ButtonClick function is executed.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
Inside the ButtonClick function, the $http service is used to make an AJAX call to the Controller’s Action method. The $http service has following properties and events.

Properties

1. method – The method type of HTTP Request i.e. GET or POST. Here it is set to POST.
2. url – URL of the Controller’s Action method.
3. datatype – The format of the data i.e. XML or JSON. Here it is set as JSON.
4. data – The parameters to be sent to the Controller’s Action method.
5. headers – List of headers to be specified for the HTTP Request.
 

Event Handlers

1. success – This event handler is triggered once the AJAX call is successfully executed.
2. error – This event handler is triggered when the AJAX call encounters an error.
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.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert Box.
 
@{
    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.5.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 person = '{"Name": "' + $scope.Name + '" }';
            var post = $http({
                method: "POST",
                url: "/Home/AjaxMethod",
                dataType: 'json',
                data: person,
                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">
        <input type="text" ng-model="Name"/>
        <input type="button" value="Get Current Time" ng-click="ButtonClick()" />
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net Core: Pass (Send) Model data to AngularJS Controller
 
 

Downloads

Download Code