Asp.Net Core MVC Login Form Using Ms SQL, Entity Framework, C#.Net

How to create a login form and validate the user login detail from MS SQL server database table in asp.net core 8 mvc using C#.Net, entity framework.
In today's article I will show you a tutorial with an example how you can create a login form in asp.net core 8 mvc application using MS SQL server using c#.net. So, in this article I will show how you can validate user from database and display the appropriate message to user. If user enter correct detail on that case, he will be redirected to the success page otherwise he will get an error message.  So, for this article first we will create a new table in SQL server database and add some dummy login details.

Employee login detail

After creating table, we will create a new asp.net core mvc application using c#.net and add a model class file. In this model class file, we will add the below mention code in it.

public class EmployeeLogin
{
    public string LoginId { get; set; }
    public string Password { get; set; }
} 
In above code I have defined two properties of string type. Here one is for login id and second one is for password. Now let's add a controller file and add a HttpGet method in it.  
 [HttpGet]
public IActionResult Index()
{
    return View();
} 
Above controller action method of httpget type will act as a page load. Now let's create view(.cshtml) and add the below code in it. 
 @model EmployeeLogin
@{
	ViewData["Title"] = "Home Page";
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
	<span>
		@if (ViewBag.LoginStatus == 0)
		{
			<span style="color:red;font-weight:bold;">Invalid User Id...</span>
			<br />
		}
	</span>
	<span>Login Id: </span>

	@Html.TextBoxFor(m => m.LoginId, new { @class = "form-control" })
	<br />
	<span>Password: </span>

	@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
	<br />
	<input type="submit" value="Login" />
} 
In above code i have first defined the model class file. After that i have defined the form tag in view by using Html.BeginForm. After that I have used a view to check if the value is "0" in view on that case display the "Invalid user id" message.  Next to message I have used Html.TextBoxFor for login is and Html.PasswordFor to enter the password. In last line submit button have been used to post the user entered value and get it at controller end. to bind the control, I have lambda expression to get the property and bind it with the property. Now let's create the HttpPost method.
[HttpPost]
public IActionResult Index(EmployeeLogin employeeLogin)
{
    EmployeeContext employeeContext = new EmployeeContext();
    var data = employeeContext.EmpLogins
.Where(m=>m.LoginId== employeeLogin.LoginId && m.Password== employeeLogin.Password)
.FirstOrDefault(); if (data == null) { ViewBag.LoginStatus = 0; } else { return RedirectToAction("SuccessPage"); } return View(); }
In above HttpPost method I have taken the EmployeeLogin model class as a parameter in the Index method. In Index action result i have created the object of DBcontext. With the help of  DBContext we will be able to connect to database with entity framework with our .net core mvc application. Now i have used EmpLogins table where we are having user and password stored. After validation if we are able to get some value, we consider that the provided detail is correct otherwise provided login detail is not correct. As per status i have passed the status. On correct detail I have redirected user to success page. Plese refer the success page.
public IActionResult SuccessPage()
{
    return View();
} 
Now create the view for success page. 
@{
    ViewData["Title"] = "SuccessPage";
}

<h1>Success Page after login..</h1> 
Now we have done let's run the code and check.
Login form in asp.net core mvc
Now add wrong detail click on login button.

Login form fail
Here I have added wrong login detail. Let's put a break point in controller httppost method and click on login button. Ones we click on login button we will be able to get user added detail at controller end.
Data at Controller End
In above code we can see that we are able to get the login detail at controller end. Now let's check after verifying what we are going to get. 
Null in Linq
Here in above code we are getting null because the user is not available.  Press F5 to check the final output.
Invalid Login Detail in Asp.net Core MVC

Now let's enter correct login detail and check the output.

Login Detail in Asp.net Core MVC

Now click on login button. 
Admin login detail
Here we are able to get the user entered login detail. Now let's move to next line and check what we get after validation from the database.
User Detail from Database

Here we are able to get the matching record from the database, so it proves user entered detail is correct. Now let's press F5 to check the output. User will be redirected to success page.

Login Success Page
Please let me know your view in comment. Thanks

Post a Comment