Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult UpdatePassword(string UserName, string OldPassword, string NewPassword)
{
// Get old password from database based on user name for compare.
if (OldPassword == "123")
{
// Code for updating new password.
return Json("Password changed Successfully.");
}
else
{
return Json("User Name Or old password does not match with our Database.");
}
}
}
View
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
$scope.IsVisible = false;
$scope.Save = function (isValid) {
if (!$scope.IsVisible) {
if (isValid) {
$http({
method: 'POST',
url: 'Home/UpdatePassword',
params: { UserName: $scope.username, OldPassword: $scope.oldpassword, NewPassword: $scope.newpassword }
}).success(function (data, status, headers, config) {
alert(data);
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
} else {
if ($scope.userForm.$error.required != undefined) {
for (var i = 0; i < $scope.userForm.$error.required.length; i++) {
$scope.userForm.$error.required[i].$pristine = false;
}
}
}
}
}
$scope.Compare = function () {
if ($scope.newpassword != $scope.confirmpassword) {
$scope.IsVisible = true;
} else {
$scope.IsVisible = false;
}
}
} ]);
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<div class="container">
<div>
<div id="wrapper" class="clearfix">
<div class="well">
<form name="userForm" novalidate>
<div class="form-horizontal">
<div class="row">
<div class="col-md-3">
<label for="UserName">
User Name</label>
<input type="text" name="username" class="form-control" ng-model="username" required />
<div ng-show="userForm.username.$error.required && !userForm.username.$pristine"
class="help-block" style="color: red">
User Name required</div>
</div>
<div class="col-md-3">
<label for="OldPassword">
Old Password</label>
<input type="text" name="oldpassword" class="form-control" ng-model="oldpassword"
required />
<div ng-show="userForm.oldpassword.$error.required && !userForm.oldpassword.$pristine"
class="help-block" style="color: red">
Enter Old Password</div>
</div>
<div class="col-md-3">
<label for="NewPassword">
New Password</label>
<input type="text" name="newpassword" class="form-control" ng-model="newpassword"
required />
<div ng-show="userForm.newpassword.$error.required && !userForm.newpassword.$pristine"
class="help-block" style="color: red">
New Password required</div>
</div>
<div class="col-md-3">
<label for="ConfirmPassword">
Confirm Password</label>
<input type="text" name="confirmpassword" class="form-control" ng-model="confirmpassword"
required ng-keyup="Compare()" />
<div ng-show="userForm.confirmpassword.$error.required && !userForm.confirmpassword.$pristine"
class="help-block" style="color: red">
Confirm New Password required</div>
<div ng-show="IsVisible" class="help-block" style="color: red">
New and Confirm Password do not match</div>
</div>
</div>
<div>
</div>
<div class="form-group" style="width: 120%; padding: 10px;">
<div class="col-md-offset-2 col-md-5">
<p>
<button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="Save(userForm.$valid)">
<span class="glyphicon glyphicon-ok"></span>Change Password</button>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
