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

Last Reply one year ago By dharmendr

Posted one year 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 one year ago.
Posted one year ago

Hi skp,

Refering the below article i have created an example.

Responsive Bootstrap Login Form Tutorial with example in ASP.Net

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

C#

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

C#

[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