Simple Login Form In AngularJS & MVC

Satheesh Elumalai
Feb 13, 2017
43.5k
0
6
Article

Step 1

Click New Project in the Start page or in the File menu.

In the New Project dialog, click Web in the left pane and Web Application in the middle pane.

Step 2

Right click on controller folder > add > click on controller > now enter the name of the controller.

Select Empty MVC controller > Add new controller into controller folder.

Follow the image given below.

Step 3

Right click on controller folder > add > click on controller >add->class for LoginController.

Step 4

Install Angularjs package. Here, I have explained about installing AngularJS package. You can download AngularJS.

You can add the project solution on Visual Studio. Follow the steps......Go to Solution Explorer> right click on the project solution > click on manage NuGet package > search text online "angularjs" > click to Install.

Step 5

Add three new JavaScript files (module.js, controller.js and Service.js) on "AngulrJs" folder under Script folder.

Go to solution explorer > Right click on "Angularjs" folder under Script folder > add > select JavaScript file > enter the name of the file > Add ->Now, lets move on. Write the code given below for the particluar file.

LoginController & LoginService in JS file creation.

Step 6

Now, the time has come to set up Angular JS Module, Service and Controller. Thus, create a folder with name “Angular” inside the Content folder for the clean code.

Afterwards, add three JavaScript files inside "Angular" folder create.

module.js
Loginservice.js
Logincontroller.js

module.js

We will first initialize and register our Application by creating a new Angular module.

var LoginApp = angular.module(' MyApp ',[]);

A module is a collection of Services, Directives, Controllers, filters, and configuration information.

Logincontroller.js

controller.js file is use to show the data on the view.

LoginApp.controller('LoginController', ['$scope', ' MyService 'function($scope, MyService) {
$scope.submit = function() {
var UserData = {
Email: $scope.Email,
Password: $scope.Password,
}
MyService.LoginValidate(UserData).then(function(pl) {
//result data
alert(pl.data);
});
}
}]);

Loginservice.js

This JavaScript file "factory.js" for fetching the data from the database and provide it to the controller.

angular.module('LoginApp').service('LoginService', function($http) {
this.LoginValidate = function(UserData) {
var result = $http({
method: "Post",
url: --XXXXXXXXXXXXXXXXXXX’ //pass UserData values to class file
data: save
});
return result;
}
});

Step 7

Add new action into Controller to get view from login, in which I have added "LoginView" action into Logincontroller. Please write the code given below.

Add class Logincontoller add values to the database to send & verify the data.

public ViewResult LoginForm() {
return View();
}
//pass and check tha value
public JsonResult Loginvalidate(Userdata) {
HttpClient client = new HttpClient();
string _url = ConfigurationManager.AppSettings["webapibaseurl"];
client.BaseAddress = new Uri(_url);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
MediaTypeFormatter jsonFormatter = new JsonMediaTypeFormatter();
HttpResponseMessage response = client.GetAsync(“URL”).Result;
string content1 = response.Content.ReadAsStringAsync().Result;
if (response.StatusCode.ToString() == "OK") {
return Json(content1, JsonRequestBehavior.AllowGet);
}

Step 8

Add view for "LoginView" Action

Right click on Index action method > Add view > Enter view name > Add ->LoginForm

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/Angular/Module.js"></script>
<script src="~/Scripts/Angular/Logincontroller.js"></script>
<script src="~/Scripts/Angular/Loginservice.js"></script>
</head>
<body ng-app=" LoginApp ">
<div ng-controller="LoginController">
<form name="loginform">
<div style="color:green">{{message}}</div>
<table>
<tr>
<td>User Name</td>
<td><input type="text" ng-model="Email" name="Email" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" ng-model="Password" name="Pin" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" ng-click="submit()" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Step 9

Add new action into controller, which helps in redirecting to the other page. After user login, I have added "Index" action into Logincontroller. Please write the code given below.