Làm cách nào để nhóm các mục danh sách HTML trong chế độ xem ASP.NET MVC?

Question

Tôi có mã này trong một cái nhìn

<ul> 
    @foreach (var tag in Model) 
    { 
     <li><a href="/Post/Tag/@tag.Id">@tag.Name</a></li> 
    } 
</ul> 

bây giờ tôi cần phải Danh sách nhóm Items bởi ký tự đầu tiên của nó, giống như

A 
-Apple 
-Ant 

C 
-Car 

S 
-Sky 
-Sea 
-Sun 

Làm thế nào tôi có thể đạt được điều này?

Answer 1

Tôi làm cách nào để đạt được điều này?

Rất dễ. Câu trả lời, như trong 99.99% câu hỏi trong thẻ asp.net-mvc luôn giống nhau: sử dụng các kiểu xem.

Tôi cho rằng bạn có mô hình miền sau:

public class Tag 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

Vì vậy, như mọi khi bạn bắt đầu bằng cách định nghĩa một mô hình điểm cho rằng sẽ đáp ứng yêu cầu bạn muốn thực hiện trong quan điểm này (được nhóm một danh sách các Tag mô hình miền bằng chữ cái đầu tiên của tài sản Name của họ và hiển thị một liên kết):

public class TagViewModel 
{ 
    public string Letter { get; set; } 
    public IEnumerable<Tag> Tags { get; set; } 
} 

sau đó bạn sẽ rõ ràng là có một bộ điều khiển có trách nhiệm là để truy vấn lớp DAL của bạn để lấy m miền odel, xây dựng mô hình điểm và cuối cùng vượt qua mô hình này nhằm quan điểm:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     // Get the domain model 
     var tags = new[] 
     { 
      // Guess this comes from a database or something 
      new Tag { Id = 1, Name = "Apple" }, 
      new Tag { Id = 2, Name = "Ant" }, 
      new Tag { Id = 3, Name = "Car" }, 
      new Tag { Id = 4, Name = "Sky" }, 
      new Tag { Id = 5, Name = "Sea" }, 
      new Tag { Id = 6, Name = "Sun" }, 
     }; 

     // now build the view model: 
     var model = tags.GroupBy(t => t.Name.Substring(0, 1)).Select(g => new TagViewModel 
     { 
      Letter = g.Key, 
      Tags = g 
     }); 

     return View(model); 
    } 
} 

và cuối cùng là một cái nhìn:

@model IEnumerable<TagViewModel> 

@foreach (var item in Model) 
{ 
    <h2>@item.Letter</h2> 
    <ul> 
     @foreach (var tag in item.Tags) 
     { 
      <li> 
       <!-- Please notice the usage of an HTML helper to generate 
        the anchor instead of the hardcoded url shown in your 
        question which is very bad 
       --> 
       @Html.ActionLink(
        tag.Name, 
        "Post", 
        "Tag", 
        new { id = tag.Id }, 
        null 
       ) 
      </li> 
     } 
    </ul> 
} 

mà rõ ràng sẽ cho kết quả mong muốn:

Vì vậy, lần sau, bạn gặp phải một số khó khăn hoặc vấn đề trong ASP.NET MVC tự nhủ: Tôi phải sử dụng chế độ xem. Hãy xem, vấn đề đã được giải quyết.