Adding A Comments Feature with ASP.NET Core

Since starting this blog I've had a few readers email me comments on posts. There are loads of third-party comment widgets you can drop in (like a <script> tag) so you don't have to build any backend at all. I wanted to build my own mostly for the learning. Right now it's just a file-based store, but I want to move it to a database once I've had a proper play with it.

Why Did I Build My Own Comments System?

Building it myself rather than using a hosted solution like Disqus gives me:

• Full control: I own and store the comments
• Custom UI: I can style it to match the site
• No external dependency: it still works if a third-party goes down
• Learning: I get better at ASP.NET Core by actually building stuff

How I wired it up (high level)

This is the rough shape of what I built.

1. Create a Comment Model

I defined what I wanted a comment to look like:

public class Comment
{
    public int Id { get; set; }
    public string Author { get; set; }
    public string Content { get; set; }
    public DateTime PostedAt { get; set; }
    public string PostId { get; set; }
}

2. Update my ViewModel for Blog Posts with Comments

So the view can render both the post and its comments, I wrapped them together in a ViewModel:

public class BlogPostViewModel
{
    public BlogPost Post { get; set; }
    public List<Comment> Comments { get; set; }
}

3. Implementing my Comment Service

This handles storing and loading comments:

public class CommentService
{
    private readonly string _basePath = "App_Data/comments";

    public List<Comment> GetComments(string postTitle)
    {
        // Retrieves comments for a post from JSON file or returns empty list if file doesn't exist
    }

    public void AddComment(Comment comment)
    {
        // Adds a new comment to the post's comment list with timestamp and ID, then saves all comments to JSON file
    }
}

4. Updated My Blog Controller

I tweaked the controller to include comments when loading a post, and to save them on submit:

[Route("blog")]
public class BlogController : Controller
{
    private readonly BlogService _blogService;
    private readonly CommentService _commentService;

    public BlogController(BlogService blogService, CommentService commentService)
    {
        _blogService = blogService;
        _commentService = commentService;
    }

    [HttpGet("{slug}")]
    public IActionResult Post(string slug)
    {
        // Retrieves a blog post and its comments by slug, then displays them using the BlogPostViewModel
    }

    [HttpPost("comment")]
    public IActionResult PostComment(Comment comment)
    {
        // Handles comment submission by saving it to the comment service and redirecting back to the blog post
    }
}

5. Updated My Blog Post View

Finally, I added a comments section under the post and a simple form to submit new ones.

What's next?

Now I have a basic system working I'm thinking about a few improvements:

1. Database storage: Move from JSON files to a proper DB
2. Anti-spam: Add a CAPTCHA or a honeypot field (new to me)
3. Moderation: Add an approval step before comments show
4. Notifications: Email me when new comments land

Where did I go wrong?

If you try this yourself, here are two things that tripped me up:

• Model type mismatch: my Razor @model didn't match what the controller returned after I renamed things
• Port conflicts: I tried to run on port 80 and something else was already there

Conclusion

Building a comments system for my blog was easier than I expected, but still a nice win. The main thing I wanted was learning and control, and I got both.

There are obviously third-party options, but if you want to learn, building a small one yourself is a great excuse.

Let me know what you think below.