Come si raggruppano gli elementi dell'elenco HTML in una vista MVC ASP.NET?

Question

Ho questo codice nella vista

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

Ora ho bisogno di List Group I prodotti che per il suo primo carattere, come

A 
-Apple 
-Ant 

C 
-Car 

S 
-Sky 
-Sea 
-Sun 

Come posso raggiungere questo obiettivo?

Answer 1

Come posso ottenere questo risultato?

Molto facile. La risposta, come nel 99,99% delle domande nel tag asp.net-mvc è sempre la stessa: utilizza i modelli di visualizzazione.

Suppongo che avete il seguente modello di dominio:

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

Quindi, come sempre si inizia definendo un modello di vista in grado di soddisfare i requisiti si desidera implementare in questo punto di vista (che è il raggruppamento di un elenco di Tag modelli di dominio da parte della prima lettera del loro proprietà Name e visualizzare un link):

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

quindi si, ovviamente, avere un controller cui responsabilità è di interrogare il livello dAL al fine di recuperare il dominio m odel, costruire un modello vista ed infine passano questo modello prospettiva della vista:

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

ed infine una vista:

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

che ovviamente dare il risultato desiderato:

Quindi la prossima volta che incontri qualche difficoltà o problema in ASP.NET MVC racconta a te stesso: Devo usare un modello di vista. Vedi, problema risolto.