Programming Tutorials

C Sharp MVC Razor code for a login screen and its controller

By: Niraj in csharp Tutorials on 2023-03-22  

Here are the steps to create a login screen in a CSHTML view file and the associated controller code in C#:

Step 1: Create a login form in a CSHTML view file In your CSHTML view file (e.g. Login.cshtml), you can create a login form using HTML and Razor syntax:

@model LoginViewModel
<form method="post" asp-action="Login">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="submit" value="Log in" />
</form>

This form has two fields for the user to enter their username and password, and a submit button to submit the form.

Step 2: Create a LoginViewModel to represent the form fields Create a LoginViewModel class to represent the form fields:

public class LoginViewModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

This class will be used to bind the form fields to the controller action.

Step 3: Create a Login action in the controller In your controller (e.g. AccountController.cs), create a Login action to handle the form submission:

[HttpGet]
public IActionResult Login()
{
    return View();
}

[HttpPost]
public IActionResult Login(LoginViewModel model)
{
    // TODO: Check the user's credentials and authenticate the user
    if (model.Username == "admin" && model.Password == "password")
    {
        return RedirectToAction("Index", "Home");
    }
    else
    {
        ModelState.AddModelError("", "Invalid login attempt");
        return View(model);
    }
}

The first Login action handles the GET request and returns the Login view. The second Login action handles the POST request and checks the user's credentials. If the user's credentials are valid, the action redirects to the Home controller's Index action. If the credentials are invalid, it adds a model error and returns the Login view with the invalid model.

Step 4: Render the validation errors in the view In the Login.cshtml view, add the following code to render the validation errors if the user's login attempt is invalid:

@model LoginViewModel
<form method="post" asp-action="Login">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="@Model.Username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="submit" value="Log in" />
    <br />
    <span asp-validation-summary="All" class="text-danger"></span>
    <span asp-validation-for="Username" class="text-danger"></span>
    <span asp-validation-for="Password" class="text-danger"></span>
</form>

This code will render any validation errors in the view, including a summary of all errors and any errors associated with the username and password fields.

That's it! You now have a basic login screen and controller in C#. Of course, you will need to modify this code to fit your specific needs and integrate it into your application accordingly.