DEV Community

Hòa Nguyễn Coder
Hòa Nguyễn Coder

Posted on

ASP.NET MVC 5 - Multiple Comment

Today, I'm share the article build a Multiple Comment. I using RenderAction in ASP.NET MVC 5
Example Description:

foreach(var item in Comment){

    //content parent
    <label>@item.content</label>

    //foreach content child
    forach(var item2 in Comment){

        <label>@item.content</label>
    }

}
Enter fullscreen mode Exit fullscreen mode

First, We need create project ASP.NET MVC 5, you can see the article again

After then, create Comment.ts file in Models folder. The following code below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC5_ViewCompoment.Models
{
    public class Comment
    {
        public int id { get; set; }
        public string content { get; set; }
        public int parent { get; set; }

    }
}
Enter fullscreen mode Exit fullscreen mode

Okay, Comment.cs file data configuration , continue you create HomeController.cs in Controllers directory

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC5_ViewCompoment.Models;
namespace MVC5_ViewCompoment.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        List<Comment> _cmt = new List<Comment>();
        public HomeController()
        {

            _cmt.Add(new Comment() { id = 1, content = "Cmt A", parent = 0 });
            _cmt.Add(new Comment() { id = 2, content = "reply Cmt A", parent = 1 });
            _cmt.Add(new Comment() { id = 3, content = "reply Cmt A", parent = 2 });
            _cmt.Add(new Comment() { id = 4, content = "Cmt B", parent = 0 });
            _cmt.Add(new Comment() { id = 5, content = "reply Cmt B", parent = 4 });

        }
        public ActionResult Index()
        {
            ViewBag.data = _cmt;
            return View();
        }

        [ChildActionOnly]
        public ActionResult _ChildComment(int id)
        {
            var data = _cmt.Where(s => s.parent == id).ToList();
            return PartialView("_ChildComment", data);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • You need using path to Models folder, after then you can call Comment.cs
  • Create List<Comment> _cmt = new List<Comment>() , add data to List

Continue, We open Index.cshtml file in Views/Home modify it the following code below

@model List<MVC5_ViewCompoment.Models.Comment>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@foreach (var item in ViewBag.data)
{
   if (item.parent == 0)
    {
        <div class="comment_parent" style="width:100%;background:#808080">
            <label>@item.content</label>
            @{Html.RenderAction("_ChildComment", "Home", new { id = item.id });}
        </div>
    }

}
Enter fullscreen mode Exit fullscreen mode

In Index.cshtml file, you seen it call RenderAction to _ChildComment, So you need create _ChildComment.cshtml file in Views/Shared folder

@model IEnumerable<MVC5_ViewCompoment.Models.Comment>
@foreach (var item in Model)
{
    <div class="comment_child" style="width:100%;padding-left:50px;background:#d5d5d5;">
        <label>@item.content</label>
        @{Html.RenderAction("_ChildComment", "Home", new { id = item.id });}
    </div>
}
Enter fullscreen mode Exit fullscreen mode

_ChildComment.cshtml retrieve data from Controller
Demo:
ASP.NET MVC 5 Multiple Comment - https://hoanguyenit.com
The Article : ASP.NET MVC 5 Multiple Comment

Latest comments (0)