Jak grupować elementy listy HTML w widoku ASP.NET MVC?

Question

Mam ten kod w widoku

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

teraz muszę lista grup pozycji przez jego pierwszego znaku, jak

A 
-Apple 
-Ant 

C 
-Car 

S 
-Sky 
-Sea 
-Sun 

W jaki sposób można to osiągnąć?

Answer 1

Jak mogę to osiągnąć?

Bardzo łatwe. Odpowiedź, jak w 99,99% pytań w tagu asp.net-mvc, jest zawsze taka sama: użyj modeli widoku.

Zakładam, że masz następujący model domeny:

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

Tak jak zawsze zacząć od zdefiniowania widoku modelu, które będą spełniać wymagania, które chcesz wprowadzić w tym widoku (który jest grupowanie listę Tag model domeny według pierwszej litery ich Name nieruchomości i wyświetli link):

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

wtedy oczywiście posiada kontroler, którego zadaniem jest zapytanie do warstwy DAL w celu sprowadzenia m domeny Odel, budowanie modelu widzenia i w końcu przejść to Widok modelu do widoku:

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

iw końcu obraz:

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

które oczywiście dać pożądanego efektu:

Więc następnym razem napotkasz pewne trudności lub problem w ASP.NET MVC powiedzieć sobie: Muszę użyć modelu widoku. Zobacz, problem rozwiązany.