Building a Quote Management Application: A Step-by-Step Guide

Introduction

This blog will guide you through creating a basic quote management application using ASP.NET Core. It’s an excellent project for beginners to learn web development fundamentals.

1. Personalizing the Index View

First, personalize the application’s landing page. Open the Index.cshtml file in the Views/Home directory and replace the placeholder text with your name and student ID.

<!-- Inside Index.cshtml -->
<h1>Welcome to the Quote Management Application!</h1>
<p>Developed by: [Your Name], Student ID: [Your Student ID]</p>

2. Creating the Quote Class

Create a Quote class in the Models directory with these properties:

// In Models/Quote.cs
public class Quote
{
    public int Id { get; set; }
    public string Text { get; set; }
    public string Author { get; set; }
    public int Rating { get; set; }
    public string Description { get; set; }
}

3. Adding the DisplayText Function

Enhance the Quote class by adding a DisplayText function to provide a shorter version of the quote.

// Inside Quote.cs
public string DisplayText
{
    get
    {
        return Text.Length > 16 ? Text.Substring(0, 16) + "..." : Text;
    }
}

4. Adding Validation to the Quote Class

Add data annotations for validation in the Quote class:

// In Models/Quote.cs
using System.ComponentModel.DataAnnotations;

public class Quote
{
    // ... Other properties

    [Required]
    public string Text { get; set; }

    [Required]
    public string Author { get; set; }

    [Required]
    [Range(1, 5)]
    public int Rating { get; set; }

    // ... Rest of the class
}

5. Setting Up the Database Context

Implement the QuotesDbContext class in the Data directory to manage database interactions:

// In Data/QuotesDbContext.cs
using Microsoft.EntityFrameworkCore;

public class QuotesDbContext : DbContext
{
    public DbSet<Quote> Quotes { get; set; }

    public QuotesDbContext(DbContextOptions<QuotesDbContext> options)
        : base(options)
    {
    }

    // ... Other configurations
}

6. Seeding Data with QuotesDbContext

Use the OnModelCreating method to seed the database with initial data:

// In Data/QuotesDbContext.cs
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    modelBuilder.Entity<Quote>().HasData(
        new Quote { Id = 1, Text = "Sample Quote 1", Author = "Author 1", Rating = 5 },
        // ... Add more seed data
    );
}

7. Implementing CRUD Operations

Modifying the Controller

Implement CRUD methods in the QuotesController. Here’s an example for the Create operation:

// In Controllers/QuotesController.cs
public IActionResult Create(Quote quote)
{
    if (ModelState.IsValid)
    {
        _context?.Add(quote);
        _context?.SaveChanges();

        TempData["LastActionMessage"] = $"The Quote \\"{quote.DisplayText}\\" created successfully!";
        return RedirectToAction("Index");
    }

    return View(quote);
}

Creating the Views

Create views for each CRUD operation. Here’s an example for the Create view:

<!-- In Views/Quotes/Create.cshtml -->
@model YourNamespace.Models.QuoteModel

<h2>Create a New Quote</h2>

<form asp-action="Create">
  <div>
    <label asp-for="Text"></label>
    <input asp-for="Text" />
    <span asp-validation-for="Text"></span>
  </div>
  <!-- Additional fields for Author, Rating, and Description -->
  <button type="submit">Create Quote</button>
</form>

8. Implementing TempData for Feedback Messages

Use TempData in your controller for user feedback:

// In Controllers/QuotesController.cs
public IActionResult Create(Quote quote)
{
    // ... The rest of the method
    TempData["LastActionMessage"] = $"The Quote \\"{quote.DisplayText}\\" created successfully!";
    // ... The rest of the method
}