Create a Login App with ASP.NET on Ubuntu 22.04

Here’s a step-by-step guide to create a simple login form using ASP.NET Core (C#) and MS SQL Server with VS Code and Linux:

  1. Install .NET SDK If you haven’t already, install the .NET SDK for your Linux distribution. You can find instructions on the official Microsoft website.check your dotnet version
    [codesyntax lang=”bash”]

    [/codesyntax]
  2. Create a new ASP.NET Core project Open a terminal and run:

    [codesyntax lang=”bash”]

    [/codesyntax]

    Go to the project directory ‘LoginApp’ with ‘cd LoginApp’

  3. Install required NuGet packages Run the following commands:
    [codesyntax lang=”bash”]

    [/codesyntax]

    Make sure the version is match in LoginApp.csproj
    [codesyntax lang=”csharp”]

    [/codesyntax]

  4. Set up the database connection Open appsettings.json and add the connection string:
    [codesyntax lang=”text”]

    [/codesyntax]
    Note: I need to add ‘TrustServerCertificate=True;’

  5. Create ApplicationDbContext Create a new file ApplicationDbContext.cs
    [codesyntax lang=”csharp”]

    [/codesyntax]

  6. Update Program.cs Replace the content of Program.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  7. Create Login Model Create Models/LoginModel.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  8. Create Account Controller Create Controllers/AccountController.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  9. Create Login View Create Views/Account/Login.cshtml:
    [codesyntax lang=”html4strict”]

    [/codesyntax]

  10. Set up the database. Create a new database ‘LoginApp’
  11. Add a test user Create DbInitializer.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]
    Note: it’ll create a new dummy user with
    email: admin@example.com
    password: Admin123!

  12. Run the application Execute:

  13. Navigate to http://localhost:5000/Account/Login in your browser.
  14. create some navigation menus (login, logout, etc) on the homepage
    Create a new file called _NavBar.cshtml in the Views/Shared folder with the following content:
    [codesyntax lang=”html4strict”]

    [/codesyntax]

    Now, let’s include this partial view in your layout file. Open the Views/Shared/_Layout.cshtml file and add the following line just after the opening <body> tag:
    [codesyntax lang=”html4strict”]

    [/codesyntax]
    Note: I need to remove the default <header> tag to use the new partial navbar

  15. create controller for account logout
    modify Controllers/AccountController.cs
    [codesyntax lang=”csharp”]

    [/codesyntax]

    Now, let’s update the _NavBar.cshtml partial view to use a form for the logout action, as it should be a POST request. Update the logout link in the _NavBar.cshtml file like this:
    [codesyntax lang=”html4strict”]


    [/codesyntax]
    at the end of this file, add this javascript
    [codesyntax lang=”html4strict”]

    [/codesyntax]
  16. Add controller for registration and forgot password?

Developing ASP.NET Core Project With VS Code – Razor Pages

ref: https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.2&tabs=visual-studio-code

Create a Razor Pages web app
Type in the terminal

Open it on VSCode

After the status bar’s OmniSharp flame icon turns green, a dialog asks Required assets to build and debug are missing from ‘RazorPagesMovie’. Add them? Select Yes.

A .vscode directory, containing launch.json and tasks.json files, is added to the project’s root directory.

Run the app
On the VSCode, open the terminal by pressing CTRL + ~
then type

NOTE: I FOUND THIS COMMAND: ‘dotnet dev-certs https –trust’ IS NOT WORKING
Then Press Ctrl-F5 to run without the debugger. It’ll open the browser automatically with this url: https://localhost:5001/

Add a data model
Add a folder named Models.
Add a class to the Models folder named Movie.cs.
Add the following properties to the Movie class:

Add a database context class
Add the following RazorPagesMovieContext class to the Data folder:

Add a database connection string
Add a connection string to the appsettings.json file as shown in the following highlighted code:

Add required NuGet packages
Run the following .NET Core CLI command to add SQLite and CodeGeneration.Design to the project:

The Microsoft.VisualStudio.Web.CodeGeneration.Design package is required for scaffolding.

Register the database context
Add the following using statements at the top of Startup.cs:

Register the database context with the dependency injection container in Startup.cs in ConfigureServices function:

Build the project (‘dotnet build’) to verify there are no compilation errors.

 

Scaffold the movie model
In this section, the movie model is scaffolded. That is, the scaffolding tool produces pages for Create, Read, Update, and Delete (CRUD) operations for the movie model.
Install the scaffolding tool:

Run the scaffolding tool to create CRUD for model ‘Movie’:

The scaffold process creates and updates the following files:

Files created
Pages/Movies: Create, Delete, Details, Edit, and Index.
Data/RazorPagesMovieContext.cs
File updated
Startup.cs
The created and updated files are explained in the next section.