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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Mar 28, 2019 07:39 PM
Forum: AngularJS
Answer: 2
Views: 6963
Sample Code: Download

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.

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

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

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

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Mar 29, 2019 02:16 AM
Report

Hi skp,

Refering the below article i have created an example.

Check this example. Now please take its reference and correct your code.

HTML

Default Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <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('Default.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">
    <div ng-controller="LoginController">
        <form name="loginform">
        <div style="color: red">
            {{message}}</div>
        <div style="max-width: 400px;">
            <label for="Name">
                User Name</label>
            <input type="text" ng-model="Username" name="Name" class="form-control" required />
            <br />
            <label for="Password">
                Password</label>
            <input type="password" ng-model="Password" name="Password" class="form-control" required/>
            <br />
            <input type="submit" ng-click="submit()" class="btn btn-primary" value="Login" />
        </div>
        </form>
    </div>
</body>
</html>

Success Page

<div>Login Success.</div>

Namespaces

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Code

[WebMethod]
public static string ValidateUser(string username, string password)
{
    string status = "";
    int userId = 0;
    string constr = ConfigurationManager.ConnectionStrings["constr"].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;
}

VB.Net

<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 = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = 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()
        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

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Apr 02, 2019 06:31 AM
Report

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

[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

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

Responsive Bootstrap Login Form Tutorial with example in ASP.Net

Company

Explore

Follow us

Contact Us