Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I group HTML List Items in an ASP.NET MVC View?

I have this code in a view

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

now I need to group List Items by its first character, like

A
 -Apple
 -Ant

C
 -Car

S
 -Sky
 -Sea
 -Sun

How can I achieve this?

like image 260
Nalaka526 Avatar asked Jul 07 '12 16:07

Nalaka526


People also ask

What is sorting in MVC?

Sorting enables you to sort data in the Ascending or Descending order. To sort a column, click the column header. To enable sorting in the Grid, set the AllowSorting to true.

What is PagedList MVC?

PagedList. mvc is a package for paging and sorting for ASP.NET MVC. PagedList package installs a PagedList collection type and extension methods for IQueryable and IEnumerable collections.

How can use pagination in ASP NET MVC?

After generating database for performing paging you have to download PagedList. MVC from NuGet Package manager, so go to the NuGet Package Manager and then install PagedList. MVC. Now add a controller with name EmployeeController and write the following code.


1 Answers

How can I achieve this?

Very easy. The answer, as in the 99.99% of the questions in the asp.net-mvc tag is always the same: use view models.

I assume that you have the following domain model:

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

So as always you start by defining a view model that will meet the requirements you want to implement in this view (which is grouping a list of Tag domain models by the first letter of their Name property and display a link):

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

then you will obviously have a controller whose responsibility is to query your DAL layer in order to fetch the domain model, build a view model and finally pass this view model to the view:

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

and finally a view:

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

which will obviously give the desired result:

enter image description here

So next time you encounter some difficulty or problem in ASP.NET MVC tell to yourself: I must use a view model. See, problem solved.

like image 51
Darin Dimitrov Avatar answered Oct 12 '22 23:10

Darin Dimitrov