ASP.NET MVC使用angularjs实现登陆功能

发布时间: 2017/8/18 16:36:21

步骤 1

创建一个空的MVC项目

首先,打开你的Visual Studio-File-新建-Project-ASP.NET Web应用程序并单击OK。现在,选择MVC和OK。
现在,您已经创建了基本的项目结构。
你可以点击下面的截图来帮助你。





您将拥有下面给出的目录.

步骤 2

安装Angular包

在你的项目中安装这个Angular包,如下面的截图所示.



步骤 3

在视图文件夹loginpage中,将下面的代码粘贴到login.cshtml中.

    @{  
        ViewBag.Title = "Login Using Angular";  
    }  
    <h2>Login Using Angular</h2>  
      
    <div ng-controller="LoginController">  
        <form name="myForm" novalidate ng-submit="LoginForm()">  
            <div style="color:green">{{msg}}</div>  
            <table ng-show="!IsLoggedIn" class="table table-horizontal">  
                <tr>  
                    <td>Email/UserName :</td>  
                    <td>  
                        <input type="email" ng-model="UserModel.Email" name="UserEmail" ng-class="Submited?'ng-dirty':''" required autofocus class="form-control"/>  
                        <span style="color:red" ng-show="(myForm.UserEmail.$dirty || Submited ) && myForm.UserEmail.$error.required">Please enter Email</span>  
                        <span style="color:red" ng-show="myForm.UserEmail.$error.email">Email is not valid</span>  
                    </td>  
                </tr>  
                <tr>  
                    <td>Password :</td>  
                    <td>  
                        <input type="password" ng-model="UserModel.Password" name="UserPassword" ng-class="Submited?'ng-dirty':''" required autofocus class="form-control"/>  
                        <span style="color:red" ng-show="(myForm.UserPassword.$dirty || Submited) && myForm.UserPassword.$error.required">Password Required</span>  
                    </td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td>  
                        <input type="submit" value="submit" class="btn btn-success" />  
                    </td>  
                </tr>  
            </table>  
        </form>  
    </div>  
    @section scripts{  
        <script src="~/Scripts/LoginController.js"></script>  
    }

我们必须创建一个JavaScript login controller并添加它的引用,如下所示.

<script src="~/Scripts/LoginController.js"></script>

步骤 4

添加 Javascript Controllor

在Module.js文件里添加一个Angular模块并添加下面给出的代码.

    (function () {  
        var myApp = angular.module("myApp",[]);  
    })();

现在,为Angular控制器和工厂方法添加另一个脚本文件.

右键单击脚本文件夹——添加LoginController.js并编写下面的代码.

    angular.module('myApp').controller('LoginController', function ($scope, LoginService) {  
      
            //initilize user data object  
            $scope.LoginData = {  
                Email: '',  
                Password:''  
            }  
            $scope.msg = "";  
            $scope.Submited = false;  
            $scope.IsLoggedIn = false;  
            $scope.IsFormValid = false;  
      
            //Check whether the form is valid or not using $watch  
            $scope.$watch("myForm.$valid", function (TrueOrFalse) {  
                $scope.IsFormValid = TrueOrFalse;   //returns true if form valid  
            });  
      
            $scope.LoginForm = function () {  
                $scope.Submited = true;  
                if ($scope.IsFormValid) {  
                    LoginService.getUserDetails($scope.UserModel).then(function (d) {  
                        debugger;  
                        if (d.data.Email != null) {  
                            debugger;  
                            $scope.IsLoggedIn = true;  
                            $scope.msg = "You successfully Loggedin Mr/Ms " +d.data.FullName;  
                        }  
                        else {  
                            alert("Invalid credentials buddy! try again");  
                        }  
                    });  
                }  
            }  
        })  
        .factory("LoginService", function ($http) {  
            //initilize factory object.  
            var fact = {};  
            fact.getUserDetails = function (d) {  
                debugger;  
                return $http({  
                    url: '/Home/VerifyUser,  
                    method: 'POST',  
                    data:JSON.stringify(d),  
                    headers: { 'content-type': 'application/json' }  
                });  
            };  
            return fact;  
        });

步骤 5

HomeController中添加新的Action方法到verifyuser.

    public ActionResult VerifyUser (UserModel obj)  
            {  
                DatabaseEntities db = new DatabaseEntities();  
                var user = db.Users.Where(x => x.Email.Equals(obj.Email) && x.Password.Equals(obj.Password)).FirstOrDefault();  
                return new JsonResult {Data=user,JsonRequestBehavior=JsonRequestBehavior.AllowGet };  
            }

步骤 6

添加一个模型类到解决方案

右击Models --> 添加 --> 类 并命名为UserModel.cs.

你可以添加usermodel,如下所示.

namespace LoginUsingAngular.Models  
{  
    public class UserModel  
    {  
        public string Email { get; set; }  
        public string Password { get; set; }  
    }  
}

官方微信
官方QQ群
31647020