Create Login form with bootstrap in asp.net for beginners using C#.NET and VB.NET

Create Login form with bootstrap in asp.net for beginners using C#.NET and VB.NET

Sairam N 9 years ago

Introduction:

Hi guys.. this is Sairam, In this post I will explain How to create a login page in asp.net with Bootstrap using  c#.net and vb.net.

 Description:
  • Create the SQL Server database and create table MDB_Memberlogin.



     CREATE TABLE [dbo].[MDB_Memberlogin](
        [sno] [int] IDENTITY(1,1) NOT NULL,
        [name] [varchar](50) NULL,
        [pwd] [varchar](50) NULL,
        [mobile] [varchar](20) NULL,
        [status] [char](1) NULL,
        [regdt] [smalldatetime] NULL
      )

login table in sqlserver
login table in sqlserver
In design  headder part add the bootstrap css and js shown in below. 
<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

In the login.aspx page write below code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="index.aspx.cs"Inherits="index"%>
 
 
    <title>ASPDOTNET SAIRAM-Loginpage demo</title>
     
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
 
<form id="form1" runat="server">
        <div style="max-width: 600px;">
            <div class="panel panel-default">
                <div class="panel-heading h4 text-primary text-center">
Login panel</div>
<div class="panel-body">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="txtmobile">Mobile No</label>
                            <div class="col-sm-10">
                                <asp:textbox class="form-control" id="txtmobile" placeholder="Enter Mobile No" runat="server"></asp:textbox>
                            </div>
</div>
<div class="form-group">
                            <label class="col-sm-2 control-label" for="txtpwd">Password</label>
                            <div class="col-sm-10">
                                <asp:textbox class="form-control" id="txtpwd" placeholder="Enter Password" runat="server" textmode="Password"></asp:textbox>
                            </div>
</div>
<div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <asp:label cssclass="label label-danger" id="lblmsg" runat="server"></asp:label>
                            </div>
</div>
<div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <asp:button cssclass="btn btn-success" id="btnLogin" onclick="btnLogin_Click" runat="server" text="Submit">
                            </asp:button></div>
</div>
</div>
</div>
</div>
</div>
</form>

and inside the double click event of the login button write following code in Login.aspx.cs

C# Code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class login : System.Web.UI.Page
{

    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionIEATDOTNET"].ToString());
    SqlCommand cmd = new SqlCommand();
    SqlDataReader dr;
    protected void btnLogin_Click(object sender, EventArgs e)
    {
        cmd.Connection = con;
        con.Open();
        cmd.CommandText = "select sno,name from MDB_Memberlogin where mobile=@mobileno and pwd=@pwd and status='A'";
        cmd.Parameters.AddWithValue("@mobileno", txtmobile.Text.Replace("'", ""));
        cmd.Parameters.AddWithValue("@pwd", txtpwd.Text.Replace("'", ""));
        dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                Session["name"] = dr["name"].ToString();

                Response.Redirect("page2.aspx");
            }
        }
        else
        {
            lblmsg.Text = "Invalid Mobile/password";
        }
        dr.Close();
        con.Close();
    }
}

VB.NET Code:


Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.UI.WebControls
Imports System.Web.UI
Imports System.Web
Imports System.Linq
Imports System.Collections.Generic
Imports System

Public Partial Class login
 Inherits System.Web.UI.Page

 Private con As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("ConnectionIEATDOTNET").ToString())
 Private cmd As New SqlCommand()
 Private dr As SqlDataReader
 Protected Sub btnLogin_Click(sender As Object, e As EventArgs)
  cmd.Connection = con
  con.Open()
  cmd.CommandText = "select sno,name from MDB_Memberlogin where mobile=@mobileno and pwd=@pwd and status='A'"
  cmd.Parameters.AddWithValue("@mobileno", txtmobile.Text.Replace("'", ""))
  cmd.Parameters.AddWithValue("@pwd", txtpwd.Text.Replace("'", ""))
  dr = cmd.ExecuteReader()
  If dr.HasRows Then
   While dr.Read()
    Session("name") = dr("name").ToString()
   
    Response.Redirect("page2.aspx")
   End While
  Else
   lblmsg.Text = "Invalid Mobile/password"
  End If
  dr.Close()
  con.Close()
 End Sub
End Class


In page2.aspx of page_load event, write the following code
add label in design page


<asp:Label ID="Label1" runat="server" CssClass="h2 text-primary"></asp:Label>

in code behind of page2.aspx.cs page
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class page2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack == false)
        {
            Label1.Text = "Welcom to Mr/Mrs " + Session["name"];
        }
    }
}


In Web.Config file
?
1
2
3
4
5
6
7
8
<configuration>
  <connectionstrings>
    <add connectionstring="Data Source=.;Initial Catalog=MyDataBook;Integrated Security=true" name="ConnectionIEATDOTNET" providername="System.Data.SqlClient">
  </add></connectionstrings>
  <system .web="">
    <compilation debug="true" targetframework="4.0">
  </compilation></system>
</configuration>


Result:
Login page demo result
Login demo using bootstrap in asp.net


Share the effort and feel free to post comments/suggestions. I love it to hear from you.

EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Subscribe to: Post Comments (Atom)