This article describes the UWCP's moderated comment workflow from user submission to admin publication. I will assume you have downloaded the ASP.NET Core 6.0 - Users With Comments Project.

I developed a comments feature for KenHaggerty.Com over three years ago, right after I had successfully published the first couple of articles. As I started to refactor the comments feature, I realized I had too much code in too many places. I usually make big changes when I refactor a feature, I try to apply new knowledge and lessons learned. I didn't want comments to delay loading the entity content. I developed the Comments ApiController which allows loading comments from JavaScript after the page is loaded.

The UWCP implements mock entities based on 3 articles from the series to demonstrate the portability of the comments feature. The entity properties are stored in a list of MockEntity in AppSettings.cs. The public Entity page requires a titleSlug parameter. The list of MockEntity is queried by titleSlug to retrieve the entity's Id and Title. The title slug configured as a page route is more SEO friendly than an id query string. Comments can be submitted on the first two articles. The third demonstrates the CommentsClosed property.

MockEntity.cs

public class MockEntity
{
    [Key]
    public int Id { get; set; }
    [Required]
    [StringLength(128)]
    public string Title { get; set; } = string.Empty;
    [Required]
    [StringLength(128)]
    public string TitleSlug { get; set; } = string.Empty;
    public bool CommentsClosed { get; set; }
}

AppSettings.cs

public static class AppSettings
{
    ...
    /// <summary>
    /// Mock Entities. Used to demonstrate comment sets.
    /// </summary>
    public static readonly List<MockEntity> Entities = new()
    {
        new MockEntity { Id = 1, Title = "Users With Comments Project - Member Profile", TitleSlug = "users-with-comments-project-member-profile", CommentsClosed = false },
        new MockEntity { Id = 2, Title = "Users With Comments Project - API Implementation", TitleSlug = "users-with-comments-project-api-implementation", CommentsClosed = false },
        new MockEntity { Id = 3, Title = "Users With Comments Project - API Authorization", TitleSlug = "users-with-comments-project-api-authorization", CommentsClosed = true },
    };
    ...

The Comments ApiController and partial views implement public, control, and filtered comment lists. I developed a partial view which renders the UI to post a comment. The view requests the user to log in or register to comment.

After a comment is submitted, the view renders a success message and informs the user of the comment approval email.

The comments Api implements a POST method which stores the comment and emails a new comment submitted message to the administrator or the entity owner.

The link browses the admin > entity > comments page which implements the comment control partial view. The link includes a comment id hash which highlights the comment. e.g., /admin/entities/comments?entityId=1#commentId-1906

While the comment is unapproved, the Hide, Edit, and Approve buttons are enabled.

While the comment is hidden, the Delete and Show buttons are enabled.

The comment control page includes the comment post partial view which allows the moderator to respond.

When the comment is approved, the Email Approval button is enabled.

The Email Approval command emails a comment approved message to the commenter.

The link includes a comment id hash which highlights the comment.