asp.net-mvc - ASP.NET MVC ビューで HTML リスト項目をグループ化するにはどうすればよいですか?

Question

ビューにこのコードがあります

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

次のように、リスト項目を最初の文字でグループ化する必要があります

A
 -Apple
 -Ant

C
 -Car

S
 -Sky
 -Sea
 -Sun

どうすればこれを達成できますか？

Answer 1

どうすればこれを達成できますか？

非常に簡単。asp.net-mvcタグの 99.99% の質問と同じように、答えは常に同じです:ビュー モデルを使用します。

次のドメイン モデルがあると仮定します。

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

したがって、いつものように、このビューに実装したい要件を満たすビュー モデルを定義することから始めます (Tagドメイン モデルのリストをプロパティの最初の文字でグループ化しName、リンクを表示します)。

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

次に、ドメイン モデルをフェッチし、ビュー モデルを構築し、最後にこのビュー モデルをビューに渡すために、DAL レイヤーにクエリを実行する役割を担うコントローラーが明らかにあります。

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

そして最後にビュー：

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

これにより、明らかに望ましい結果が得られます。

次回、ASP.NET MVC で問題が発生した場合は、ビュー モデルを使用する必要があると自分に言い聞かせてください。ほら、問題は解決しました。