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

10 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. This comment has been removed by the author.

    ReplyDelete
  9. I was busy with my duties at Coursework Writing Company until I forgot to attend miss India 2010 but I am glad that a review has been posted on this site and I will be visiting it occasionally so that I can know when the 2017 edition will be held. Anyway, thanks for the continual effort to keep us updated with new information.

    ReplyDelete