Comments with replies won't show properly (ASP.NET MVC) - asp.net-mvc

Question

(Reposted question, since the other one was put on hold and then edited but not reopened)
I have a problem with showing comment replies in my comment section on my website. I have made it so there is a Original Comment and that comment can have subcomment (replies) and the way I have set up my code it does work, but if there are 2 original comments and 1 reply on in one section, then it shows the reply og both of them, even though I've coded it to only show on a specific original comment.
Comment model:
namespace ComicbookWebpage.Models
{
public class ComicComment
{
public int Id { get; set; }
public string Comment { get; set; }
public DateTime Posted { get; set; }
public string UserId { get; set; }
public virtual ApplicationUser User { get; set; }
public int ComicId { get; set; }
public Comic Comic { get; set; }
public List<SubComicComment> SubComicComments { get; set; }
}
}
SubComment model (reply):
namespace ComicbookWebpage.Models
{
public class SubComicComment
{
public int Id { get; set; }
public string CommentText { get; set; }
public DateTime Posted { get; set; }
public SubComicComment() {
Posted = DateTime.Now;
}
public string UserId { get; set; }
public ApplicationUser User { get; set; }
public int ComicId { get; set; }
public Comic Comic { get; set; }
public int OriginalCommentId { get; set; }
public ComicComment ComicComment { get; set; }
}
}
Here's my viewmodel I use for all my data (vm):
namespace ComicbookWebpage.Models.ViewModels
{
public class ComicVM
{
public Comic Comic { get; set; }
public Series Series { get; set; }
public List<ComicComment> ComicComments { get; set; }
public List<SubComicComment> SubComicComments { get; set; }
}
}
So as you can see there is an "OriginalCommentId" in my subcomments table, so that I can tell my subcomments what original comment they belong to, so they're only shown under that specific comment. But the problem is like I said above that it shows my subcomment under 2 different original comments on the same page, if the page has 2 original comments, here's an image:
(Image) Comments in view (Browser SS)
On the right side of every comment, you can see an ID, it's the ID that the comment has and you can clearly see that the ID 9 has a subcomment with ID 2, which is totally wrong according to my coding. Because I'm telling my list to render the data where the original comment id is the same as subcomment's OriginalCommentId, so they should both have ID 9, but the subcomment has ID 2 for some reason...
Here's the controller code (Look at vm.SubComicComments):
public ActionResult Comic(int id)
{
ComicVM vm = new ComicVM();
vm.Comic = db.Comics.Include(m => m.Series).Where(m => m.Id == id).FirstOrDefault();
vm.Series = db.Series.FirstOrDefault();
vm.ComicComments = db.ComicComments.Where(m => m.Comic.Id == id).ToList();
vm.SubComicComments = db.SubComicComments.Where(m => m.ComicId == id && m.ComicComment.Id == m.OriginalCommentId).ToList();
db.Users.ToList();
return View(vm);
}
And here's the view code:
#using Microsoft.AspNet.Identity
#using System.Data.Entity;
#model ComicbookWebpage.Models.ViewModels.ComicVM
#{
ViewBag.Title = #Model.Comic.Title;
}
<a class="btn btn-default" href="/Series/Details/#Model.Comic.SeriesId"><i class="glyphicon glyphicon-menu-left"></i> Back</a>
<hr />
<h5><b>Title:</b> #Model.Comic.Title</h5>
<h5><b>Series:</b> #Model.Comic.Series.Title</h5>
<h5><b>Pages:</b> #Model.Comic.PageAmount</h5>
<hr />
<h4><i class="glyphicon glyphicon-comment"></i> Leave a comment:</h4>
<br />
#if (User.Identity.IsAuthenticated)
{
<div class="col-sm-1">
<div class="thumbnail">
<img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">
</div><!-- /thumbnail -->
</div><!-- /col-sm-1 -->
<div class="col-sm-5">
<form action="/Series/Comic/#Model.Comic.Id" method="post">
<input type="hidden" name="Posted" value="#DateTime.Now" />
<input type="hidden" name="UserId" value="#User.Identity.GetUserId()" required />
<input type="hidden" name="ComicId" value="#Model.Comic.Id" />
<textarea class="form-control form-text" type="text" name="Comment" placeholder="Type your comment..." required></textarea>
<br />
<button type="submit" class="btn bg-dark">Send</button>
</form>
</div><!-- /col-sm-5 -->
}
else
{
<h5>You have to be logged in to post a comment.</h5>
<p>Click here to login</p>
}
<div class="row">
<div class="col-md-12">
#if (Model.ComicComments.Count > 0)
{
<h4>(#Model.ComicComments.Count) Comments:</h4>
}
else
{
<h4>0 Comments:</h4>
<p>There are currently no comments posted on this comic book.</p>
}
</div>
</div>
#foreach (var Comment in Model.ComicComments.Where(m => m.ComicId == m.Comic.Id))
{
<div class="comments-container">
<ul id="comments-list" class="comments-list">
<li>
<div class="comment-main-level">
<!-- Avatar -->
<div class="comment-avatar"><img src="https://i9.photobucket.com/albums/a88/creaticode/avatar_1_zps8e1c80cd.jpg" alt=""></div>
<!-- Contenedor del Comentario -->
<div class="comment-box">
<div class="comment-head">
<h6 class="comment-name by-author">#Comment.User.UserName</h6>
<span>posted on #Comment.Posted.ToShortDateString()</span><i>ID: #Comment.Id</i>
</div>
<div class="comment-content">
#Comment.Comment
</div>
</div>
</div>
<!-- Respuestas de los comentarios -->
<ul class="comments-list reply-list">
#if (Model.SubComicComments.Count > 0)
{
foreach (var SubComment in Model.SubComicComments.Where(m => m.OriginalCommentId == m.ComicComment.Id))
{
<li>
<!-- Avatar -->
<div class="comment-avatar"><img src="https://i9.photobucket.com/albums/a88/creaticode/avatar_2_zps7de12f8b.jpg" alt=""></div>
<!-- Contenedor del Comentario -->
<div class="comment-box">
<div class="comment-head">
<h6 class="comment-name">#SubComment.User.UserName</h6>
<span>posted on #SubComment.Posted.ToShortDateString()</span><i>ID: #SubComment.OriginalCommentId</i>
</div>
<div class="comment-content">
#SubComment.CommentText
</div>
</div>
</li>
}
}
</ul>
</li>
</ul>
</div>
}
If you guys can figure out what the heck is wrong here, I would appreciate it. To me the code is pretty logical and should work, but it doesn't, and I've tried so many things but no luck.
Thank you in advance.

Answer 1

For your SubComments foreach statement:
foreach (var SubComment in Model.SubComicComments.Where(m => m.OriginalCommentId == m.ComicComment.Id))
Should be:
foreach (var SubComment in Model.SubComicComments.Where(m => m.OriginalCommentId == Comment.Id))
No? You want to check SubComment.OriginalCommentId against the id in the Comment variable declared in your enclosing Comments iteration.
As an aside, in your first foreach statement, I don't think the where clause is doing anything:
#foreach (var Comment in Model.ComicComments.Where(m => m.ComicId == m.Comic.Id))
ComicID == Comid.Id should always be true as long as your includes have loaded...