1. ASP.NET MVC 5 Hello World
  2. ASP.NET MVC 5 Create Shared Layout Razor & ViewStart
  3. ASP.NET MVC 5 Install Bootstrap
  4. ASP.NET MVC 5 Using DBContext Connect Database
  5. ASP.NET MVC 5 CRUD Tutorial With Example For Beginners
  6. Pagination For Search Results ASP.NET MVC 5
  7. ASP.NET MVC 5 Ajax Pagination For Search Results
  8. ASP.NET MVC 5 Render Sections with RenderSection
  9. ASP.NET MVC 5 Html.Partial & Html.RenderPartial
  10. ASP.NET MVC 5 Html.Action and Html.RenderAction
  11. ASP.NET MVC 5 LinQ to SQL
  12. ASP.NET MVC 5 FORM VALIDATION
  13. ASP.NET MVC 5 Partial View with Ajax Form
  14. ASP.NET MVC 5 Login and Register
  15. ASP.NET MVC 5 Repository Pattern
  16. ASP.NET MVC 5 Stored Procedure
  17. ASP.NET MVC 5 - Multiple Comment
  18. Build Angular + ASP.NET MVC 5
  19. Build Web API using Angular with ASP.NET MVC5 (Part 1)
  20. Build Web API using Angular with ASP.NET MVC 5 (Part 2)

ASP.NET MVC 5 - Multiple Comment

min read

Cũng khá lâu rồi không viết bài viết chia sẻ với mọi người! trong thời gian đó mình cũng nghiên cứu và tìm hiểu cái mới để có cái chia sẻ với anh em chơi
Hôm này mình chia sẻ với ae cách sử dụng RenderAction trong ASP MVC 5. Sử dụng RenderAction rất tuyệt nhé ae
Ví dụ: Bạn có xây dựng một multile comment trong website mỗi vòng foreach bạn chèn idParent cha để tìm xem các con của nó có chứa idParent cha này không, nếu có thì show ra
Mô tả code như sau:

foreach(item in Comment){

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

	//foreach content child
	forach(item2 in Comment){
		
		<label>@item.content</label>
	}

}

Đầu tiên bạn tạo cho mình một project ASP MVC 5, các bạn có thể xem lại các bài trước nhé để tạo project
+ ASP.NET MVC 5 Hello World
+ ASP.NET MVC 5 Render Sections with RenderSection

Sau khi các bạn tạo xong, tạo cho mình file Comment.cs trong thư mục Models như sau:

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; }

    }
}

File Comment.cs trên dùng ta cấu hình thuộc tính dữ liệu, tiếp theo các bạn tạo file HomeController.cs trong thư mục Controlles như sau:

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);
        }
    }
}

Trong file trên mình using đường dẫn Models vô để có thể sử dụng file Comment.cs
Bạn tạo cho mình cái mảng List<Comment> _cmt = new List<Comment>() dùng để chèn dữ liệu 
Đoạn code trên mình ta sẽ cần tạo file _ChildComment.cshtml trong thư mục Views/Shared/_ChildComment.cshtml để nhận dữ liệu trả về từ Controllers

public ActionResult _ChildComment(int id)
{
            var data = _cmt.Where(s => s.parent == id).ToList();
            return PartialView("_ChildComment", data);
}

Đoạn code này mình tìm kiếm các dữ liệu con, mà id cha đường chèn vào để tìm kiếm, bạn hãy xem lại dữ liệu được khởi tạo trong mảng List trên để hình dung ra
Giờ là bước ta cần show dữ liệu ra file index.cshtml và file _ChildComment.cshtml

File index.cshtml

@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>
    }

}

Đầu tiên ta dùng foreach để lập dữ liệu ra. Tiếp đó ta xét rằng, nếu parent==0 mới show ra nhé, là lấy các dữ liệu cha show ra trước
Nếu parrent==0, thì ta sẽ gọi tới Html.RenderAction("_ChildComment", "Home", new { id = item.id }) và chèn id cha của nó vào để gọi lấy các dữ liệu con ra

File Views/Shared/_ChildComment.cshtml

@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>
}

Tại file _ChildComment.cshtml ta nhận dữ liệu từ controllers trả về, ta cũng dùng foreach để lập dữ liệu ra, và ta tiếp tục chèn id con vào Html.RenderAction("_ChildComment", "Home", new { id = item.id }) để lấy các con cháu chít gì của nó nửa ::)
Cứ như vậy bạn Multile comment bao nhiêu cũng được hết!

Demo:

ASP MVC5 - Multiple Comment
 

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)