In this tutorial, I’m gonna cover how to create a simple ASP.NET login page using C# and SQL Server database in Visual Studio 2015. Before getting started, I hope that you have already installed Visual Studio and created a new ASP.NET website project. If not, then you should do these two tasks. After that, you can follow this complete guide to designing a login page.
As we all know how a login page works i.e. users enter their login credentials and these credentials are matched up against the database. If login credentials are correct, then the user can enter the website. Otherwise, an error message is flashed. A similar ASP.NET login page will be designed in this guide.
As shown in the quick GIF below, you can see a sample ASP.NET login page created using C# and SQL Server database by me in which I logged in successfully.
Before starting, here’s an overview of what we are going to do in this guide. We will simply create an empty ASP.NET website and then add web forms, write the login code, and create a SQL Server database to store user credentials. For this, I am also assuming that you know how to work with Visual Studio and design ASP.NET web pages.
I will create 2 web forms here: one for login page design and other to show the welcome message. On the login page, the user will enter its username and password. This information will be sent in form of a SQL Query to the database. Based on the query results, appropriate actions will be taken. The 3 major steps in this process are:
- Creating the database
- Modifying the web.config file, and
- The code to validate the user information.
You can also take a look at the components of my ASP.NET website sample project. I created the following web forms to implement the login functionality in the created ASP.NET website:
- techwareguide.aspx: Design code of the login web form.
- techwareguide.aspx.cs: Code that works on the login page to validate user info from the database.
- techwareLogin.aspx: Design code of the page that will appear to the authenticated users.
- techwareLogin.aspx.cs: No code required. Leave it untouched.
- web.config (auto-generated): In this file, you have to specify the database connection string, in order to connect with database and validate user credentials. No need to create this file as it is already created by default when you will create the ASP.NET website project.
- SQL Server database: In the database, create a table called “UserInformation” and store user credentials in it.
You need to create the similar pages in your website too.
Let’s See The Steps To Create ASP.NET Login Page Using C# With Step by Step Guide:
Carefully follow the below steps:
Step 1: Create SQL Server Database:
- To add SQL database to your ASP.NET website, press “Control+Shift+A” hotkey and then choose to add a SQL Server Database.
- You can manage your database from the Server Explorer. In case, it’s not visible then toggle it from the View menu. From the Server Explorer, choose to create a new table to store the user credentials. I created a table named UserInformation with field Username and Password. Create a similar type of table and insert some dummy data in it.
Step 2: Configure Web.config File:
In this step, you need to add the database connection string in Web.config file. Follow these steps to do it successfully:
- From the Server Explorer, right-click on the database file and select “Properties“. See the screenshot below for reference.
- Now, from the Properties window, copy the data of “Connection String“, as shown below.
- Open Web.config file from the Solution Explorer and add the <connectionStrings> tag and paste the connection string, as you can see in the code snippet added below.
web.config:
<configuration> <system.web> <compilation debug="true" targetFramework="4.5.2" /> <httpRuntime targetFramework="4.5.2" /> </system.web> <connectionStrings> <add name="dbconnection" connectionString="Paste Database Connection String Here!"/> </connectionStrings> </configuration>
Step 3: Create ASP.NET Login page using C#:
To create a new website project, go to “File>New Web Site…” and select “ASP.NET Empty Web Site“. Now, add a web form to design the login page controls and another one to display the welcome message. I designed the login page in a very simple manner. I just added a logo, two labels, and text boxes to get user credentials. The two lables added by me are available to display an error message and a button, as shown below in screenshot. And in the webpage that will show a welcome message, I used a label for it. You need to do the same.
Now, double tap on the button (like login button visible in screenshot above) that will implement the login code in the login page CS (C#) file. This is really simple. First, add the 3 namespaces specified below.
- using System.Configuration;
- using System.Data;
- using System.Data.SqlClient;
After that, copy the login code snippet added below and paste it to the button click event in the CS file. Make sure that you specify the second web form name in the code below which you want to give access to validated user.
techwareguide.aspx.cs:
protected void button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserInformation where UserName =@username and Password=@password", con);
cmd.Parameters.AddWithValue("@username", 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("Name of the webpage that validated user can access");
}
else
{
Label3.Visible = true;
Label3.Text = "Wrong Details";
}
}
That’s all! Now run the login page and test the code by entering the username and password specified by you “UserInformation” table. This is how you can easily create ASP.NET login page. If everything works fine, you will see the second web form with the message when correct credentials are entered. Otherwise, an error warning will appear if they are wrong. Fortune doesn’t favor all the times, and if some exceptions occur, then feel free to contact me by posting the comments down below.
I have also attached the complete website project. You can Download ASP.NET Login Code from the link and open it in Visual Studio and check it out 🙂 Hope this guide will help. Stay tuned for more stuff like this.
