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

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...

9 comments

  1. i was searching for this code,
    Thanks for providing,.
    AngularJs development companies

    ReplyDelete
  2. Very informative, keep posting such good articles, it really helps to know about things. php training in jalandhar

    ReplyDelete
  3. Thanks for give me this information really this product is very effective.

    Angularjs 2 Development Company

    ReplyDelete
  4. I should say that your blog is having really nice article,
    javascript image editor

    ReplyDelete
  5. {{message}} expression is not working

    ReplyDelete
  6. Thanks ,Nice article.............

    ReplyDelete
  7. Amazing Blog! This is the most useful post, those who are looking for study related information. Vinay Hari Education Consultant in Jalandhar

    ReplyDelete
  8. Hey Gyss Check out this...

    Softpro Learning Center (SLC)is the training wing of Softpro India Computer Technologies Pvt.
    Limited. SLC established itself in the year 2008.
    SLC offer an intensive and extensive range of training/internship programs for B.Tech, BCA, MCA & Diploma students.
    Softpro Learning Center is a best institute in Lucknow extends in depth knowledge of technology like .Net, Java, PHP and Android and also an opportunity to practically apply their fundamentals. SLC’s objective is to provide skilled manpower to support the vast development programs.

    ReplyDelete