Sunday, 17 January 2016

Create Login form using Angularjs in mvc4

Create Login page using Angularjs in asp.net mvc4. In this post, i would like to create login Page using Angularjs in Asp.net mvc4 ... thumbnail 1 summary

02:57

Create Login page using Angularjs in asp.net mvc4.

In this post, i would like to create login Page using Angularjs in Asp.net mvc4

step-1 :-
Create table into database

open database > Right click on table > add new table > add column name > save > enter table name > ok
here, i have used one table like below..

step-2:-
Create Entity data model

Here i have explained about how to create entity data model. click here

step-3:-
Add new controller into controller folder

Right click on controller folder > add > click on controller > now Enter name of controller > select Empty mvc controller > Add

Step-4:-
Now add new action into controller for return data into database

here i have added action "GetLogin"..please write this following code.....

public ActionResult GetLogin(Registration d)
{
    using (LoginEntities _LoginEntities = new LoginEntities())
    {
        var user = _LoginEntities.Registrations.Where(u => u.Email == d.Email && u.Password == d.Password).FirstOrDefault();
       if (user != null)
       {
           Session["UserId"] = user.RegistrationId.ToString();
           Session["Email"] = user.Email.ToString();
           Session["UserName"] = user.FName.ToString() + "" + user.LName.ToString();
           return new JsonResult { Data = user, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
      }
     else
     {
         return null;
     }
  }
}

step-5:-
Install angularjs package. here i have explained about install angularjs package

step-6:-
add a new three javascript file(module.js, controller.js and factory.js) on "AngulrJs" folder under Script folder

Go to solution explorer > Right click on "Angularjs" folder under Script folder > add > select javascript file > enter name of the file > Add
Now, lets move on write the following code for particluar file....

Module.Js :-

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

Controller.js :-

app.controller('LoginController', function ($scope, Loginfactory) {
   $scope.Login = '';

   $scope.submit = function () {
       var responsePromise = Loginfactory.GetUser($scope.login);
       responsePromise.then(function (successData) {
       if (successData.data.Email != null && successData.data.Password != null)
       {
           // Here "/Login" is Controller name for redirect to other page after login user...
           window.location.href = "/Login"
       }
       else {
            $scope.message = "User or password does not match!";
       }
   });
  }
});

factory.js :-

app.factory('Loginfactory', function ($http) {

return {
      GetUser: function (_Registration) {
      return $http({
           url: "/Login/GetLogin",
           method: "POST",
           data: { d: _Registration }
       });
    },
  };
});

step-7:-
Add new action into controller for get view from login
here i have added "LoginView" action into Logincontroller. please write following code.

public ActionResult LoginView()
{
     return View();
}

step-8:-
Add view for "LoginView" Action
Right click on Index action method > Add view > Enter view name > Add

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
      <meta name="viewport" content="width=device-width" />
      <title>Login</title>
      <script src="~/Scripts/angular.min.js"></script>
      <script src="~/Scripts/Angular/Module.js"></script>
      <script src="~/Scripts/Angular/controller.js"></script>
      <script src="~/Scripts/Angular/factory.js"></script>
</head>
<body ng-app="myapp">
    <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="login.Email" name="Email" /></td>
      </tr>
      <tr>
           <td>Password</td>
           <td><input type="text" ng-model="login.Password" name="Password" /></td>
      </tr>
      <tr>
           <td></td>
           <td><input type="submit" value="Login" ng-click="submit()" /></td>
      </tr>
   </table>
  </form>
</div>
</body>
</html>

step-9:-
Add new action into controller for redirect to other page after user login
here i have added "Index" action into Logincontroller. please write following code.

public ActionResult Index()
{ 
    if (Session["Email"] != null)
    {
       return View();
    }
    else
    {
        return RedirectToAction("LoginView");
    }
}

step-9:-
Add a view for "Index" Action
this view page can display after user login. please write following code.

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
     <script src="~/Scripts/angular.min.js"></script>
</head>
<body>

<div ng-if="@Session["UserId"] == 0">
     Welcome @Session["UserName"].ToString();
</div>

</body>
</html>

Now run this application...........

Thnx for watching.....please share with your friends...
any query write comment below...

Angularjs