locked
Angular js login and registration form using asp.net RRS feed

  • Question

  • User-471420332 posted

    I am very new to angular js trying to develop login and registration form using asp.net framework,

    user will register and after that user will login and user will get him mypage. 

    Wednesday, October 3, 2018 7:19 AM

Answers

  • User61956409 posted

    Hi mazhar khan,

    I am very new to angular js trying to develop login and registration form using asp.net framework

    You can refer to the following example to achieve your requirement.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    </head>
    <body>
        <div class="container" ng-app="myApp" ng-controller="myCtrl">
            <form name="form">
                <div class="form-group">
                    <label for="name" class="cols-sm-2 control-label">Your Name</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" name="name" id="name" ng-model="name" placeholder="Enter your Name" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="cols-sm-2 control-label">Your Email</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" name="email" id="email" ng-model="email" placeholder="Enter your Email" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="cols-sm-2 control-label">Password</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                            <input type="password" class="form-control" name="password" id="password" ng-model="password" placeholder="Enter your Password" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                            <input type="password" class="form-control" name="confirm" id="confirm" ng-model="confirm" placeholder="Confirm your Password" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <button type="button" class="btn btn-primary btn-lg btn-block login-button" ng-click="register()">Register</button>
                </div>
            </form>
        </div>
    </body>
    </html>
    <script>
        var app = angular.module('myApp', []);
    
        app.controller('myCtrl', function ($scope, $http) {
            $scope.name = "";
            $scope.email = "";
            $scope.password = "";
            $scope.confirm = "";
    
            $scope.register = function () {
                if ($scope.form.$valid) {
                    if ($scope.password == $scope.confirm) {
                        var userinfo = { "name": $scope.name, "email": $scope.email, "password": $scope.password };
                        //alert(JSON.stringify(userinfo));
                        $http({
                            url: '/Home/RegisterUser',
                            method: 'POST',
                            data: JSON.stringify(userinfo),
                            headers: {
                                'content-type': 'application/json'
                            }
                        }).then(function (response) {
                            alert("Register successfully!");
                            });
    
                    } else {
                        alert("Password not match!");
                    }
                } else {
                    alert("Please provide required information!");
                }
            }
        })
    </script>

    Test Result:

    Besides, you had better to get started with AngularJS before you develop web client application using AngularJS.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 4, 2018 5:21 AM
  • User61956409 posted

    Hi mazhar khan,

    Can you share how you are storing data using this below URL because i am very new to this. I have sql server 2008 database to stored my thing

    My backend service for storing user registration information is simple, but you can refer to it to achieve your requirement based on your scenario and requirement.

    [HttpPost]
    public ActionResult RegisterUser(UserInfo user)
    {
        string connection_string = $"{connection_string_here}";
        SqlConnection conn = new SqlConnection(connection_string);
     
        string query = "Insert Into dbo.UserInfo ([Name], [Email], [PWD]) " +
                "VALUES (@name, @email, @pwd)";
    
        SqlCommand comm = new SqlCommand(query, conn);
        comm.Parameters.AddWithValue("@name", user.name);
        comm.Parameters.AddWithValue("@email", user.email);
        comm.Parameters.AddWithValue("@pwd", user.password);
    
        conn.Open();
        int f = comm.ExecuteNonQuery();
        conn.Close();
    
        string res = "failed";
        if (f > 0)
        {
            res = "ok";
        }
    
        return new JsonResult
        {
            Data = res
        };
    }
    
    public class UserInfo
    {
        public string name { get; set; }
        public string email
        {
            get;
            set;
        }
        public string password
        {
            get;
            set;
        }
    }

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 5, 2018 5:36 AM

All replies

  • User-471420332 posted

    The example which you given is not using asp.net na, please give more to get fast start.

    Wednesday, October 3, 2018 12:35 PM
  • User61956409 posted

    Hi mazhar khan,

    I am very new to angular js trying to develop login and registration form using asp.net framework

    You can refer to the following example to achieve your requirement.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    </head>
    <body>
        <div class="container" ng-app="myApp" ng-controller="myCtrl">
            <form name="form">
                <div class="form-group">
                    <label for="name" class="cols-sm-2 control-label">Your Name</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" name="name" id="name" ng-model="name" placeholder="Enter your Name" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="cols-sm-2 control-label">Your Email</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" name="email" id="email" ng-model="email" placeholder="Enter your Email" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="cols-sm-2 control-label">Password</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                            <input type="password" class="form-control" name="password" id="password" ng-model="password" placeholder="Enter your Password" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                            <input type="password" class="form-control" name="confirm" id="confirm" ng-model="confirm" placeholder="Confirm your Password" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <button type="button" class="btn btn-primary btn-lg btn-block login-button" ng-click="register()">Register</button>
                </div>
            </form>
        </div>
    </body>
    </html>
    <script>
        var app = angular.module('myApp', []);
    
        app.controller('myCtrl', function ($scope, $http) {
            $scope.name = "";
            $scope.email = "";
            $scope.password = "";
            $scope.confirm = "";
    
            $scope.register = function () {
                if ($scope.form.$valid) {
                    if ($scope.password == $scope.confirm) {
                        var userinfo = { "name": $scope.name, "email": $scope.email, "password": $scope.password };
                        //alert(JSON.stringify(userinfo));
                        $http({
                            url: '/Home/RegisterUser',
                            method: 'POST',
                            data: JSON.stringify(userinfo),
                            headers: {
                                'content-type': 'application/json'
                            }
                        }).then(function (response) {
                            alert("Register successfully!");
                            });
    
                    } else {
                        alert("Password not match!");
                    }
                } else {
                    alert("Please provide required information!");
                }
            }
        })
    </script>

    Test Result:

    Besides, you had better to get started with AngularJS before you develop web client application using AngularJS.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 4, 2018 5:21 AM
  • User-471420332 posted

    Can you share how you are storing data using this below URL because i am very new to this. I have sql server 2008 database to stored my thing, please suggest i have us web api or webservice. And also please share your code.

    '/Home/RegisterUser'

    Thank you for your valuable reply

    Thursday, October 4, 2018 12:16 PM
  • User61956409 posted

    Hi mazhar khan,

    Can you share how you are storing data using this below URL because i am very new to this. I have sql server 2008 database to stored my thing

    My backend service for storing user registration information is simple, but you can refer to it to achieve your requirement based on your scenario and requirement.

    [HttpPost]
    public ActionResult RegisterUser(UserInfo user)
    {
        string connection_string = $"{connection_string_here}";
        SqlConnection conn = new SqlConnection(connection_string);
     
        string query = "Insert Into dbo.UserInfo ([Name], [Email], [PWD]) " +
                "VALUES (@name, @email, @pwd)";
    
        SqlCommand comm = new SqlCommand(query, conn);
        comm.Parameters.AddWithValue("@name", user.name);
        comm.Parameters.AddWithValue("@email", user.email);
        comm.Parameters.AddWithValue("@pwd", user.password);
    
        conn.Open();
        int f = comm.ExecuteNonQuery();
        conn.Close();
    
        string res = "failed";
        if (f > 0)
        {
            res = "ok";
        }
    
        return new JsonResult
        {
            Data = res
        };
    }
    
    public class UserInfo
    {
        public string name { get; set; }
        public string email
        {
            get;
            set;
        }
        public string password
        {
            get;
            set;
        }
    }

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 5, 2018 5:36 AM