Responsive Bootstrap Login Form with Database Connection using AngularJS in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

I'm designing a login form and some bootstrap is added to make it look attractive.

When an user enter their username and password, it must go to the database and check whether the username is available or not.

If available, it must redirect to the next page showing all the user credentials like username and if it's not available in the database , it must display a popup error message. The database connection should be made through c# code.

login.css :

.register {
    /* background: -webkit-linear-gradient(left,  #1143a6, #00c6ff); */
    margin-top: 5%;
    padding: 3%;
}

.login-panel {
    width: 50%;
    min-width: 300px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    /* border-top-left-radius: 15% 50%;
    border-bottom-left-radius: 15% 50%; */
}

.login-panel1 input {
    border: 1px solid #1143a6;
    border-radius: 1.5rem;
    padding: 1%;
    width: 60%;
    background: #f8f9fa;
    font-weight: bold;
    color: #383d41;
    margin-top: 3%;
    margin-bottom: 3%;
    cursor: pointer;
}

.login-heading {
    text-align: center;
    color: #1143a6;
    padding-bottom: 10px;
}

login.aspx :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <link rel="stylesheet" href="login.css">
    <style>
        body {
            background: -webkit-linear-gradient(left, #1143a6, #00c6ff);
        }
    </style>
    <script>
        var LoginApp = angular.module('LoginApp', []);
        LoginApp.controller('LoginController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
            $scope.submit = function () {
                var UserData = { username: $scope.Username, password: $scope.Password }
                $http.post('login.aspx/ValidateUser', UserData)
                .success(function (data, status, headers, config) {
                    if (data.d != "") {
                        $scope.message = data.d;
                    } else {
                        $window.location.href = 'success.aspx';
                    }
                }).error(function (data, status, headers, config) {
                    $scope.message = data.d;
                });
            }
        }]);
    </script>
</head>
<body>
    <section class="container ">
        <div class="main_cont register">
            <div class="login-panel">
                <h3 class="login-heading"></h3>
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="Username" name="Name" placeholder="Username" value="" autocomplete="off" required/>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" ng-model="Password" name="Password" placeholder="Password" value="" autocomplete="off" required/>
                        </div>
                        <div class="float-right">
                            <input type="submit" class="btn btn-primary" ng-click="submit()" value="Login" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

login.aspx.cs :

public partial class login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       
    }

    [WebMethod]
    public static string ValidateUser(string username, string password)
    {
        string status = "";
        int userId = 0;
        string constr = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("Validate_User"))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@Username", username);
                cmd.Parameters.AddWithValue("@Password", password);
                cmd.Connection = con;
                con.Open();
                userId = Convert.ToInt32(cmd.ExecuteScalar());
                con.Close();
            }
            switch (userId)
            {
                case -1:
                    status = "Username and/or password is incorrect.";
                    break;
                case -2:
                    status = "Account has not been activated.";
                    break;
                default:
                    break;
            }
        }
        return status;
    }
}

success.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="success.aspx.cs" Inherits="View_success" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <link rel="stylesheet" href="login.css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Login successful!</h2>
    </div>
    </form>
</body>
</html>

Regards

skp

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months ago

Hi skp,

As per the provided details you have not assigned ng-app & ng-controller directive to Html or body.

You also need to use input type button instead of submit.

Rest the code is ok and working.

Check the updated sample.

HTML

Login.aspx

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link type="text/css" rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <link rel="stylesheet" href="login.css" />
    <style type="text/css">
        body
        {
            background: -webkit-linear-gradient(left, #1143a6, #00c6ff);
        }
    </style>
    <script type="text/javascript">
        var LoginApp = angular.module('LoginApp', []);
        LoginApp.controller('LoginController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
            $scope.submit = function () {
                var UserData = { username: $scope.Username, password: $scope.Password }
                $http
                .post('Login.aspx/ValidateUser', UserData)
                .success(function (data, status, headers, config) {
                    if (data.d != "") {
                        $scope.message = data.d;
                    } else {
                        $window.location.href = 'success.aspx';
                    }
                }).error(function (data, status, headers, config) {
                    $scope.message = data.d;
                });
            }
        } ]);
    </script>
</head>
<body ng-app="LoginApp" ng-controller="LoginController">
    <section class="container"> 
        <div class="main_cont register">
            <div class="login-panel">
                <h3 class="login-heading"></h3>
                <div class="row">                        
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="Username" name="Name" placeholder="Username" value="" autocomplete="off" required/>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" ng-model="Password" name="Password" placeholder="Password" value="" autocomplete="off" required/>
                        </div>
                        <div class="float-right">
                            <input type="button" class="btn btn-primary" ng-click="submit()" value="Login" />
                            <div style="color: red">{{message}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Success.aspx

<h2>Login successful!</h2>

Code

Login.aspx

C#

[System.Web.Services.WebMethod]
public static string ValidateUser(string username, string password)
{
    string status = "";
    int userId = 0;
    string constr = System.Configuration.ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
    using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(constr))
    {
        using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand("Validate_User"))
        {
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Username", username);
            cmd.Parameters.AddWithValue("@Password", password);
            cmd.Connection = con;
            con.Open();
            userId = Convert.ToInt32(cmd.ExecuteScalar());
            con.Close();
        }
        switch (userId)
        {
            case -1:
                status = "Username and/or password is incorrect.";
                break;
            case -2:
                status = "Account has not been activated.";
                break;
            default:
                break;
        }
    }
    return status;
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function ValidateUser(ByVal username As String, ByVal password As String) As String
    Dim status As String = ""
    Dim userId As Integer = 0
    Dim constr As String = System.Configuration.ConfigurationManager.ConnectionStrings("ERPConnectionString").ConnectionString
    Using con As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(constr)
        Using cmd As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand("Validate_User")
            cmd.CommandType = System.Data.CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@Username", username)
            cmd.Parameters.AddWithValue("@Password", password)
            cmd.Connection = con
            con.Open()
            userId = Convert.ToInt32(cmd.ExecuteScalar())
            con.Close()
        End Using
        Select Case userId
            Case -1
                status = "Username and/or password is incorrect."
            Case -2
                status = "Account has not been activated."
            Case Else
        End Select
    End Using

    Return status
End Function

Screenshot