ASP.NET Core MVC CRUD Operations using .NET 8 and Entity Framework Core - MVC For Beginners Tutorial

Introduction

In this tutorial, you will learn how to create a complete ASP.NET Core MVC application with CRUD (Create, Read, Update, Delete) operations using .NET 8 and Entity Framework Core. This beginner-friendly guide will take you through the process of setting up a student management app, which will allow you to manage student records stored in a SQL Server database. You will also gain insights into using the Model-View-Controller architecture and Bootstrap for styling your web application.

Step 1: Create a New ASP.NET Core MVC Project

1. Open Visual Studio 2022.
2. Create a new project by selecting "Create a new project."
3. Choose "ASP.NET Core Web App (Model-View-Controller)" from the template options.
4. Configure the project:
   • Name the project StudentPortal.Web.
   • Set the solution name to StudentPortal.
   • Choose .NET 8 as the target framework.
5. Click on "Create" to generate the project.

Step 2: Install Entity Framework Core Packages

1. Stop the application if it's running.
2. Right-click on the project in Solution Explorer and select "Manage NuGet Packages."
3. In the "Browse" section, search for and install the following packages:
   • Microsoft.EntityFrameworkCore.SqlServer
   • Microsoft.EntityFrameworkCore.Tools

Step 3: Create the Application Database Context

1. In the project, create a new folder named Data.
2. Right-click on the Data folder and add a new class called ApplicationDbContext.
3. Modify the class to inherit from DbContext:

   using Microsoft.EntityFrameworkCore;
   
   public class ApplicationDbContext : DbContext
   {
       public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }
   
       public DbSet<Student> Students { get; set; }
   }
   

Step 4: Define the Student Entity

1. Create a new folder called Entities within the Models folder.
2. Add a class named Student to the Entities folder:

   public class Student
   {
       public Guid Id { get; set; }
       public string Name { get; set; }
       public string Email { get; set; }
       public string Phone { get; set; }
       public bool Subscribed { get; set; }
   }
   

Step 5: Configure the Database Connection

1. Open the appsettings.json file and add a connection string:

   "ConnectionStrings": {
       "StudentPortal": "Server=.;Database=StudentPortalDB;Trusted_Connection=True;"
   }
   

2. In Program.cs, inject the ApplicationDbContext:

   builder.Services.AddDbContext<ApplicationDbContext>(options =>
       options.UseSqlServer(builder.Configuration.GetConnectionString("StudentPortal")));
   

Step 6: Create the Database and Initial Migration

1. Open the Package Manager Console (Tools -> NuGet Package Manager -> Package Manager Console).
2. Run the following commands:

   Add-Migration InitialCreate
   Update-Database
   

3. This will create the database and the Students table.

Step 7: Create the Students Controller

1. In the Controllers folder, add a new controller named StudentsController.
2. Define the necessary action methods for CRUD operations:
   • Add: To create a new student.
   • List: To display all students.
   • Edit: To update a student's information.
   • Delete: To remove a student.

Step 8: Implement the Add Student View

1. Right-click on the Views folder and create a new folder named Students.
2. Inside the Students folder, create a view named Add.cshtml:

   <h1>Add Student</h1>
   <form asp-action="Add">
       <div>
           <label asp-for="Name"></label>
           <input asp-for="Name" />
       </div>
       <div>
           <label asp-for="Email"></label>
           <input asp-for="Email" />
       </div>
       <div>
           <label asp-for="Phone"></label>
           <input asp-for="Phone" />
       </div>
       <div>
           <label asp-for="Subscribed"></label>
           <input asp-for="Subscribed" type="checkbox" />
       </div>
       <button type="submit">Save</button>
   </form>
   

Step 9: Implement the List Students View

1. Create another view named List.cshtml in the Students folder:

   <h1>All Students</h1>
   <table>
       <thead>
           <tr>
               <th>ID</th>
               <th>Name</th>
               <th>Email</th>
               <th>Actions</th>
           </tr>
       </thead>
       <tbody>
           @foreach (var student in Model)
           {
               <tr>
                   <td>@student.Id</td>
                   <td>@student.Name</td>
                   <td>@student.Email</td>
                   <td>
                       <a asp-action="Edit" asp-route-id="@student.Id">Edit</a>
                       <a asp-action="Delete" asp-route-id="@student.Id">Delete</a>
                   </td>
               </tr>
           }
       </tbody>
   </table>
   

Step 10: Implement Edit and Delete Functionality

1. Add the necessary logic in the StudentsController to handle editing and deleting records.
2. Create the views Edit.cshtml and Delete.cshtml to facilitate user interaction.

Conclusion

Congratulations! You have successfully created a CRUD application using ASP.NET Core MVC with Entity Framework Core and SQL Server. This tutorial covered creating a project, configuring the database context, and implementing essential CRUD operations. As a next step, you can explore adding authentication, improving UI with Bootstrap, or deploying your application to a web server. Happy coding!