Video summary

C# Asp.net core Mvc Net 5 Create a TO DO LIST App html css | Javascript Add Alertify Part 3

Main summary

Key takeaways

Technology

Overview

This video is Part 3 of a tutorial series where the creator builds an ASP.NET Core MVC (.NET 5) To-Do List app. In this part, the focus is on:

  • Improving the UI with CSS
  • Adding Alertify toast notifications for CRUD operations (add, edit, delete)

It builds on earlier parts that already implemented basic add/remove functionality.

What’s Added / Changed in This Part

CSS / UI Styling Improvements

  • The creator updates the table header and overall styling by copying CSS from a GitHub source.
  • Key detail: after adding the CSS, matching CSS classes must be applied in the Razor/HTML.
    • For example:
      • Add a class to the th elements (referred to as a title class).
      • Add a class (e.g., new todo) to specific header elements to apply the intended styling.

Alertify Notifications for CRUD Operations

The app displays toast-style notifications after:

  • Add → “item has been added”
  • Edit → “item has been updated”
  • Delete → “item has been deleted”

The creator also demonstrates that notifications continue to work alongside other features like search and editing/deleting.

Alertify Integration Steps (Tech Features)

Install Alertify via CDN

  • Adds Alertify CSS and JavaScript CDN links.
  • Includes jQuery CDN, which is required for the scripts to function.

Client-Side Functions Using a Form/Temp Variable

  • On the Index page, the creator adds a JavaScript function that uses variables tied to form submission (via something like TempData/tempData passed to the page).
  • They use conditional checks such as:
    • If save is not blank → show alertify.success(...) for add/edit
    • If delete is not blank → show alertify.error(...) for delete

Troubleshooting Highlight

Notifications initially didn’t show due to mismatched variable names between the view and controller, such as:

  • Confusing field names (e.g., edit vs save)
  • Case sensitivity issues
  • Using incorrect variable names (e.g., dell vs delete)

After correcting naming (and ensuring error is called for delete when appropriate), the notifications worked properly.

Outcome Demonstrated

The finished UI includes styled headings and working Alertify popups after:

  • Adding a task
  • Editing a task
  • Deleting a task

The creator emphasizes this part is “simple” and “fast”, focused mainly on visual polish + user feedback.

Main Sources / Speakers

  • Speaker: The tutorial creator (no name provided in subtitles; subtitles mention “hello guys welcome back…”).
  • Primary referenced source:
    • The creator’s GitHub repository (linked in the video)
    • Their YouTube channel for Part 1 and Part 2 of the Alertify-related To-Do List series.

Original video