Most modern-day websites have login functionality to authenticate users. With the help of this functionality, website owners can provide unique features to only specific users.
For example, only registered users on Facebook can like or comment on other people’s posts. So, if you want to implement the login functionality in your ASP.net website, you have landed on the right page.
In this tutorial, you will learn how to create a simple ASP.net login page using C# with SQL database. Before proceeding with the tutorial, ensure you have set up MS Visual Studio.
I am using the Visual Studio Ultimate 2011 version for this tutorial, and if you are using any other version, you might have to make some adjustments in the web.config file. If there is any issue, comment, and I will assist you.
Previously, we also covered how to create an ASP.net registration page. You can check it out if you want to implement a user registration process.
Steps to create ASP.net login page:
Step 1. Creating an empty ASP.NET website.
Step 2. Designing the Login web page.
Step 3. Creating SQL database.
Step 4. Configuring web.config file.
Step 5. Coding ASP.Net login form
Let’s get started and see how it is done.
How To Create a Login Page in Asp.net Using C# with SQL Database
1. Creating an empty ASP.NET website
Open Visual Studio and create an empty ASP.net website project. Use the shortcut Control+Shift+N to open the dialog box, as shown in the screenshot below. Name your project and click on the OK button to continue.
After you click the OK button, Visual Studio will create the solution files and folders for your ASP.net, including the Web.config file, which we will edit later to connect our database.
2. Designing the Login web page
After your ASP.net website project is up and running inside Visual Studio, you have to add a web form to your project, which will be your login page. Hit Control+Shift+A to quickly open the dialog box from where you can select to add a web form.
Once you add a web form, you can design a simple login page, as seen in the screenshot below. If you want to make it more stylish, use CSS or any front-end framework.
I haven’t done any designing part to keep it simple for tutorial purposes. I recommend you check out Bootstrap, a front-end component library to build responsive, mobile-first projects on the web.
To design your login page, insert a table and drag and drop UI components from the Toolbox (Control + W) to the Design window.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CodeItBro-Login.aspx.cs" Inherits="CodeItBro.CodeItBro_Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
width: 216px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="auto-style1">
<tr>
<td class="auto-style2">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/codeitbro-blog-logo.png" Height="53px" Width="210px" />
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="Label1" runat="server" Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Login" />
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Label ID="Label3" runat="server" Text="Label" Visible="False"></asp:Label>
</td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
3. Creating a SQL database
After designing the login page, let’s create and add an SQL database to our project. To add an SQL database to your ASP.net website, use the Control + Shift + A shortcut and select SQL database from the dialog box.
Visual Studio will show a prompt to create a folder app_data. Click on the OK button to add the SQL database. Now, you can see your SQL database from the Server Explorer toolbar, as shown in the screenshot below.
Now, let’s add a table, UserDetails, from where we will match the users’ credentials. To add the table, right-click on the Tables menu in the Server Explorer and select the Add New Table option.
After that, Visual Studio will open a tab where you can write an SQL query to create the table. If you don’t want to write the SQL query, specify table fields and data tables on the Table Design tab, as seen in the screenshot below.
Click on the Update button, and Visual Studio will then display a dialog box displaying the script to make changes in the database. Accept the changes, and your website database will create the table UserDetails.
4. Configuring web.config file
In this step, we will configure the web.config file to let our ASP.net website project connect with the SQL database.
Before configuring the web.config file, you need to copy the connection string of your SQL database. For this, go to the properties of your database from the Server Explorer, as you can see in the screenshot below.
Your connection string will look something similar to this.
Data Source=(LocalDB)\v11.0;AttachDbFilename="c:\users\dell\documents\visual studio 2012\Projects\CodeItBro\CodeItBro\App_Data\Database1.mdf";Integrated Security=True
Now, add the code below to your web.config file. Add this code between <configuration></configuration> tag.
<connectionStrings>
<add name="dbconnection" connectionString="Paste Your Connection String"/>
</connectionStrings>
After adding this code, you can move on to the next step to write the logic for your login page.
5. Coding ASP.Net login form
Double-click on the Login button (on the Design tab) to open the C Sharp file of your Login page. Now, add these namespaces in your C# code.
using System.Configuration; using System.Data; using System.Data.SqlClient;
After adding these namespaces, add the code below inside the scope of protected void Button1_Click(object sender, EventArgs e).
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserDetails where Email =@Email and Password=@Password", con);
cmd.Parameters.AddWithValue("@Email", TextBox1.Text);
cmd.Parameters.AddWithValue("@Password", TextBox2.Text);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
Response.Redirect("LoginPage.aspx");
}
else
{
Label3.Visible = true;
Label3.Text = "Wrong Details";
}
Do note that Button1 is the ID of your login button, and if you have changed the button ID, the function’s name will change accordingly.
In this code, we create an SQL query and pass the user’s entered values, i.e., Email and Password, to see whether that record exists in the UserDetails table.
Users will be redirected to the specified web page if that record exists. If not, they will see an error message in the GIF above this tutorial.
Final Words
By following these steps in this tutorial, you will better understand how a login page works in ASP.net using the SQL Server database.
In case you have any doubts related to the steps, then shoot an email at codeitbro@gmail.com or leave a comment. I will try to assist you in any way I can. 🙂
