ASP.NET Core 6.0 - Comments Workflow

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.

Users With Comments Project and Article Series

The ASP.NET Core 6.0 - Users With Comments Project (UWCP) implements public member profiles and a moderated comment workflow from user submission to admin publication. I started with the ASP.NET Core 6.0 - Users With Device 2FA Project (UWD2FAP) which implements WebAuthn, also known as FIDO2, instead of authenticator apps. The latest version of the UWCP is published at Preview. KenHaggerty. Com. I encourage you to register and submit a comment. Details, screenshots, and related articles can be found at ASP.NET Core 6.0 - Users With Comments Project. The details page includes the version change log.

Visual Studio 2022 (VS 2022) is required to develop .NET 6 and ASP.NET Core 6.0 applications. .NET 6 and ASP.NET Core 6.0 are Long Term Support (LTS) releases and will be supported until November 08, 2024. .NET 5 is a Current release and will be supported until May 08, 2022. .NET 3.1 is a LTS release and will be supported until December 3, 2022. See .NET and .NET Core release lifecycle.

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.

Login To Comment.
Login To Comment Mobile.
Submit Comment.
Submit Comment Mobile.

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

Comment Submitted.
Comment Submitted Mobile.

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.

Comment Submitted Email.
Comment Submitted Email Mobile.

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

Admin Comment Control.
Admin Comment Control Mobile.

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

Edit Comment.
Edit Comment Mobile.

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

Hidden Comment.
Hidden Comment Mobile.

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

Moderator Comment.
Moderator Comment Mobile.

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

Comment Approved.
Comment Approved Mobile.

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