Hello Friends, Here I am going to show you how to post data using Angular Js Services. We have learned what exactly the Services are in Angular Js

Introduction:

In this example, I am going to show you how to post data using Angular Js Services. This application will simply accept FirstName, LastName, and Gender from the user and Return the Full Name( FirstName+LastName) as a response.

How to Post Data using Angular JS Services?

Step 1- Open Visual Studio and  Create an ASP.NET MVC application called PostOperationUsingServices. A basic application will be created.

Step 2- Right Click on the Model and create a Class called User. Write the following code in User class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PostOperationUsingServices.Models
{
 public class User
 {
 public string FirstName { get; set; }
 public string LastName { get; set; }
 public string Gender { get; set; }
 }
}

Here you can see I have created three properties FirstName, LastName, and Gender in User class.

Step 3- Goto Controller folder and Open HomeController.cs file and write the following code.

public JsonResult PostExample(User objUser)
{
string sName = objUser.FirstName + " " + objUser.LastName;
return Json(sName, JsonRequestBehavior.AllowGet);
}

Step 4- Now right click on the solution explorer and create a folder called AppJS.

Step 5- Right Click on the AppJS folder and create a JavaScript file Services.Js and write the following code.

var app = angular.module('myapp', []);

//The service with the get method. 
app.service('MyServices', function ($http) {
this.postData = function (objUser) {
var resp = $http({
method: "post",
url: "/Home/PostExample",
data: objUser
});
return resp;
};
});

Step 6- Right Click on the AppJS folder and create a JavaScript file Controller.Js and write the following code.

app.controller('appctrl', function ($scope, MyServices) {
$scope.AddEmployee = function () {
$scope.User = {};
$scope.User.FirstName = $scope.FirstName;
$scope.User.LastName = $scope.LastName;
$scope.User.Gender = $scope.Gender;
 
var vResp = MyServices.postData($scope.User);
vResp.then(function (res) {
alert(res.data);
}, function (err) {
$scope.Message = "Call failed" + err.status + " " + err.statusText;
});
};

});

Step 7- Goto Views>Home and open Index.cshtml file and replace the content with the following one.

@{
ViewBag.Title = "Home Page";
Layout = null;
}
<html>
<head>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<title>
Post Operationg Angular JS Services in ASP.NET MVC
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<script src="~/AppJS/Services.js"></script>
<script src="~/AppJS/Controller.js"></script>


</head>
<body>
<div ng-app="myapp" ng-controller="appctrl" class="container">
<div class="panel-body">
<div class="panel-title">
<h2>
Post Data using Angular JS Service
</h2>

</div>
<br />
<div class="row">
<div class="col-md-2">
<label>First Name</label>
</div>
<div class="col-md-4">
<input type="text" ng-model="FirstName" class="form-control" />
</div>

</div>
<br />
<div class="row">
<div class="col-md-2">
<label>Last Name</label>
</div>
<div class="col-md-4">
<input type="text" ng-model="LastName" class="form-control" />
</div>

</div>
<br />
<div class="row">
<div class="col-md-2">
<label>Gender</label>
</div>
<div class="col-md-4">
<select class="form-control" ng-model="Gender">
<option value="">
Please Select
</option>
<option value="Male">
Male
</option>
<option value="Male">
Female
</option>
</select>
</div>

</div>
<br />
<div class="row">
<div class="col-md-6" style="text-align:right">
<input type="button" class="btn btn-primary" value="Post" ng-click="AddEmployee();" />
</div>
</div>
</div>
</div>
</body>
</html>

Output:

Post Data

Fill the Textboxes and Click on the Post Button.

Post Data

Download Source Code

View More:

Conclusion:

I hope you love my this post about How to Post Data using  Angular JS Services. I would like to have your Feedback, Comments, and Suggestions.

Thank You.

Leave a Comment