How to add a comment box below an item on an CSHTML webpage ASP .NET MVC 4

Question

I am trying to create a website that is used for blogging. I have a database connected to it and currently I only have blog posts working. I have a view that shows all of the blog posts by using the "List" type which is done through Visual Studio. Basically, it prints out all of the database entries I want to make it so other users can comment on these posts and all of the comments will be in a lower subsection of the post. I am new to web development so I am not really sure if there is a preferred way to do this.

Here is my CSHTML File

@model IEnumerable<Blogger.Models.Article>

@{
    ViewBag.Title = "ViewAllArticles";
}

<h2>View All Posted Blogs</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Content)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DatePosted)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IsAcceptingComments)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastEdited)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Content)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DatePosted)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IsAcceptingComments)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastEdited)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

Here is my model (C# Code):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Blogger.Models;

namespace Blogger.Controllers
{
    public class ArticleController : Controller
    {
        private ArticleDBEntities1 _entities = new ArticleDBEntities1();
        //
        // GET: /Article/
        public ActionResult Index()
        {
            return View(_entities.Articles.ToList());
        }

        public ActionResult Create()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create([Bind(Exclude ="Id")]Article ArticleToCreate)
        {
            try
            {
                // Insert Logic Here
                _entities.Articles.Add(ArticleToCreate);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return RedirectToAction("Index");
            }
        }

        //View All Posts from all Users
        public ActionResult ViewAllArticles()
        {
            return View(_entities.Articles.ToList());
        }

    }
}

I hope this source code can help understand what I am trying explain. I am open to all suggestions.

Answer 1

I would suggest creating a new model to support comments. You can then add a list of comments to a post and create a many to many mapping between your models. You can then have a Web method that allows the addition of comments linked to the post in question.

I will try and get some example code for you tomorrow.

Answer 2

You can separate it by making it a partial view and handle separately. It will be better not to mix things together thus keeping components loose coupled.

You have two other options. 1. Use entirely client side mechanism for the UI and comments will be handled by a WebAPI backend. 2. A third party commenting system like Disqus.

Please mark as answer if it helped you.