C# Aspnet Core mvc NET 5 Learn how to Create a TodoList and Bootstrap in a hour

Main ideas / lesson conveyed

• The video walks through building a simple responsive To-Do List web app using C# + ASP.NET Core MVC (.NET 5).
• It uses Bootstrap for styling and responsiveness.
• It uses SQLite (via EF Core) for persistence.
• It demonstrates full CRUD operations:
  • List (Index)
  • Create
  • Edit/Update
  • Delete
• It also adds a header area that includes an image and a live-updating date string rendered via JavaScript (day/month/year formatting).

---

Step-by-step methodology / instructions

1) Start from a starter ASP.NET Core project

• Obtain a “startup/basic template” project from the creator’s GitHub repository.
• Key expectations of the template:
  • Database already connected
  • Includes basic structure such as:
    • models
    • controller
    • data context
    • connected data

2) Configure database connection (SQLite)

• Use a connection string (SQLite in the video).
• The connection string is referenced from the template’s startup/project configuration.
• Confirm the project is using the intended DB provider (SQLite).

3) Create the model (entity) for To-Do items

• Create a class named something like To-do list (the video uses a class like to-do list / ToDoList).
• Add fields:
  • Id (identifier)
  • Content (string)
• Add validation:
  • Mark Content as required using data annotations (e.g., [Required])
• Import needed namespaces for annotations (data annotations).

4) Add EF Core migration and update the database

Run:

• add-migration ... (example name used: Models init / to do list)
• update-database

This creates the table for the To-Do list model.

5) Create the controller for MVC actions

• Create a controller such as ToDoListController (the video calls it “to do list controller”).
• Make the controller inherit from Controller.
• Inject the EF Core database context:
  • Import the application DB context.
  • Create a private field like _context.
• Implement actions:

5a) Index action (list all To-Do items)

• Signature: async ActionResult / Task<ActionResult>
• Fetch all items:
  • await _context.ToDoList.ToListAsync()
• Return the view with the model list.

5b) Create actions (GET + POST)

• GET Create

  • Return an empty view for entering a new item.

• POST Create

  • Decorate with [HttpPost] and make it async.
  • Accept a bound model (e.g., ToDoList item).
  • Validate:
    • If ModelState.IsValid:
      • _context.Add(item)
      • await _context.SaveChangesAsync()
      • Set TempData["Success"] message
      • Redirect to Index

5c) Edit actions (GET + POST)

• GET Edit

  • Accept id
  • Retrieve the specific item:
    • await _context.ToDoList.FirstOrDefaultAsync(m => m.Id == id)
  • If item not found:
    • return an error message via TempData and/or show a failure path
  • If found:
    • return the edit view with the item.

• POST Edit

  • Decorate with [HttpPost]
  • Accept id and updated model (or at least accept the model)
  • Validate with ModelState.IsValid
  • Update:
    • _context.Update(item)
    • await _context.SaveChangesAsync()
  • Set TempData["Success"]
  • Redirect to Index

5d) Delete action

• The video uses a GET Delete style action:
  • Signature: async ActionResult
  • Accept id
  • Retrieve item by id
  • If not found:
    • Set TempData["Error"] message
  • Else:
    • _context.ToDoList.Remove(item)
    • await _context.SaveChangesAsync()
    • Set TempData["Success"]
    • Redirect to Index

6) Create views and connect them to the controller

• Create:
  • Index.cshtml, Create.cshtml, Edit.cshtml
• Put them in a folder matching the controller name:
  • e.g., Views/ToDoList/Index.cshtml
• Use the correct view names matching actions (Index, Create, Edit).

7) Build the Index page using Bootstrap table

• Add a Bootstrap-styled table to display items.
• Table columns:
  • Content
  • Actions (Edit/Delete buttons)
• Add a “Create” button near the top using tag helpers like:
  • asp-action="Create"
• For each item in the list, render:
  • item.Content
  • Edit button:
    • asp-action="Edit"
    • asp-route-id="@item.Id"
  • Delete button:
    • asp-action="Delete"
    • asp-route-id="@item.Id"

8) Install and link Bootstrap

• Create/use the static files folder (the video mentions wwwroot).
• Copy/link Bootstrap from a client-side library.
• Ensure the layout links Bootstrap:
  • Include Bootstrap CSS in the shared layout so it applies site-wide.
• Refresh and verify styling.

9) Add a header image and date text (JS + CSS)

In Index (or layout/partial), create a header section containing:

• A container with an image background
• An element (e.g., with id date) to display the current date

Add JavaScript:

• Use document.getElementById("date")
• Set innerHTML from new Date() localized output
• Use toLocaleDateString("en-US", options) with formatting options like:
  • weekdays: long
  • months: short
  • date: numeric

Ensure the layout renders scripts:

• In layout: @RenderSection("scripts", required: false)

Add CSS:

• Style the header container:
  • height (e.g., 300px)
  • background image with background-size, background-repeat, position
• Style the date label:
  • position: absolute (bottom/left)
  • color white
  • font sizing, padding, font-family
  • border-radius for rounded appearance
• Place CSS in a css folder and link it from the layout.

10) Create the Create page UI

• Create Create.cshtml:
  • Form posts to asp-action="Create"
  • Input uses asp-for="Content"
  • Validation display:
    • asp-validation-for="Content"
  • Submit button (e.g., value “Create”)
  • “Back to list” link:
    • asp-action="Index"

11) Create the Edit page UI

• Create Edit.cshtml:
  • Similar to Create, but:
    • form posts to Edit
    • include hidden input for Id so updates affect the correct record:
      • <input type="hidden" asp-for="Id" />
• After saving, redirect back to Index.

12) Verify responsiveness and CRUD behavior

• Add multiple items and confirm:
  • validation works (required content)
  • edit updates content correctly
  • delete removes items
  • UI updates without layout breaking
• Test on different window sizes (the video checks responsiveness via browser view/console).

---

Speakers / sources featured

• Speaker: Unnamed YouTube creator/instructor (referred to as “guys” / “hello youtube people” in subtitles)
• Source of starter code: The instructor’s GitHub repository (specific account not named in the subtitles)

Libraries/tools referenced

• ASP.NET Core MVC (.NET 5)
• Entity Framework Core (EF Core)
• SQLite
• Bootstrap
• JavaScript (for date formatting)
• Data annotations (for [Required] validation)