Introduction

Hey, In this tutorial we are going to create Advance Login Form in asp.net Using c# with validation. This tutorial will show you how you can validate user by an input. The user will enter there Username and password in the textbox field. First, we validate user on their credential and then proceed to login. In this tutorial, we first create a design and then create a database. we will insert some values into this database to validate the user.

This is the advanced design of login page. we had created a social login icon. Using this icon you can redirect a user to log in by using social links. we just had used facebook and google plus. You can either log in using username and password or using facebook and google plus. Follow all the steps to create this login page.

So let’s get started…

Step 1:-

First, you need to create a project in visual studio. we are using VS2015. after you create asp.net project add image folder in that project. In this image, you just need to add some images which we use in this tutorial. you can download this images from this download link.

After you download all these images. Place this images in the stock folder. To create the stock folder in the project and insert this images into this folder.

Step 2:-

Create login.aspx and Style.css file in the root directory. In login.aspx file adds a title of your page and link style.css file.

After you link style.css file. You just need to create login page design. Jump into the body section of our page and insert design code.

Import this code into <body> tag of login.aspx file.

When importing this code to login.aspx file make sure you change <img> tag source attribute. In <img> tag we have used our project image file location. you just need to change it to your image location.

Step 3:-

Create Style.css file in root directory. Using style.css file we will style our asp.net login page. So import this code into the style.css file.

You will see there is a section class in the style.css file. You just need to change the background image property. Change URL to your image file location.

Create Database

So now you Login page design is ready. Now you need to create Mysql database. Right-click on the project and select SQL Server Database. The prompted window will ask you to create app data folder in project or not. Just click on yes if you want to add the database to app data folder.

Double-click on the database file and select table folder. right-click on it and select new query. here you need to insert some code to create a table.

Import this code to create table

Execute this command. This will create login table in your database. Now we want to insert some values to validate the user. So this code will insert values in your table.

Execute this command. this command will insert Akshay Kashyap values in uname and password field.

Step 1:-

Insert SQL Data source just before the closing <body> tag. Using SQL data source you will link your database table to the project. so we will insert it by drag and drop. Go to design tab of the page. you will find design tab on the left-bottom side of the editor.

Then Click on the small icon on the right side of SQL data source and select configure the data source. The following image will show the process.

Select Database file and click on next.

Click next. You will see the connection string then again click on next. On this window click on * checkbox and then click on next.

After this click on Finish button. Now you are connected database file to your project.

Step 2:-

Now go back to your login.aspx page. right-click on it and select view code. So here we want to add login page c# code to validate the user with Credentials. On the top of the page add some namespace to access connection classes.

Step 3:-

After this import this code just after page load method. this code is a method which validates user then the user clicks on the submit button. we already had created the button on-click event so we just want to add this code just after the page load method.

Step 4:-

If you want to redirect the user to another page then create home.aspx file in the root directory. When the user clicks on the submit button user will redirect to the home page and if the user enters wrong information then the user will get an error message.

Import this code into home.aspx file.

We are creating a simple home page with only one title. You can create your own homepage with your design.

That’s it.

Your asp.net login form using C# with validation is ready to run now. Run this project and add user credential and then click on submit button. you will redirect to the homepage. if your information username or password was incorrect then you will get an error message to re-enter username and password.

If you don’t want to follow all these steps you can just copy following code and paste it into the specified files.