Alphabetical Paging in ASP.NET MVC

Hi,

Here's an example of creating an alphabetical paging in ASP.NET MVC. This is a VB.NET version of Mikesdotnetting alphabetical paging in asp.net mvc. I use AdventureWorks database instead of Northwind. Other changes are reflected in the User Interface (View) and Model. If your going to perform this tutorial using ASP.NET MVC 4 (VS 2012) make sure to add Bootstrap in your project using Nuget.

Steps:

1. Create an ASP.NET MVC 5 project using VS 2013
2. Install AdventureWorks Database in your Server
3. Add an ADO.NET Entity framework that points to AdventureWorks database
*AdventureWorksEntities.edmx
Tables:
- Production.Product
- Production.ProductSubCategory
4. The files involved are the following:

- ProductModel.vb
- HtmlHelpers.vb
- HomeController.vb
- AlphabeticalPagingViewModel.vb
- Index.vbhtml

See solution structure below:

Attachment 129981


5. Source Code

ProductModel.vb

Code:

---

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web


Public Class ProductModel
    Public Property ProductID() As Integer
        Get
            Return m_ProductID
        End Get
        Set(value As Integer)
            m_ProductID = Value
        End Set
    End Property
    Private m_ProductID As Integer


    Public Property ProductNumber() As String
        Get
            Return m_ProductNumber
        End Get
        Set(value As String)
            m_ProductNumber = Value
        End Set
    End Property
    Private m_ProductNumber As String


    Public Property ProductName() As String
        Get
            Return m_ProductName
        End Get
        Set(value As String)
            m_ProductName = Value
        End Set
    End Property
    Private m_ProductName As String


    Public Property StandardCost() As Decimal
        Get
            Return m_StandardCost
        End Get
        Set(value As Decimal)
            m_StandardCost = value
        End Set
    End Property
    Private m_StandardCost As Decimal


    Public Property Color() As String
        Get
            Return m_Color
        End Get
        Set(value As String)
            m_Color = value
        End Set
    End Property
    Private m_Color As String


    Public Property ProductCategory() As String
        Get
            Return m_ProductCategory
        End Get
        Set(value As String)
            m_ProductCategory = value
        End Set
    End Property
    Private m_ProductCategory As String


End Class

---

HtmlHelpers.vb

Code:

---

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Text
Imports System.Web.Mvc
Imports System.Runtime.CompilerServices

'Public Class HtmlHelper
Public Module HtmlHelpers

    <Extension()>
    Public Function AlphabeticalPager(html As HtmlHelper, selectedLetter As String, firstLetters As IEnumerable(Of String), pageLink As Func(Of String, String)) As HtmlString
        Dim sb = New StringBuilder()
        Dim numbers = Enumerable.Range(0, 10).[Select](Function(i) i.ToString())
        Dim alphabet = Enumerable.Range(65, 26).[Select](Function(i) ChrW(i).ToString()).ToList()
        alphabet.Insert(0, "All")
        alphabet.Insert(1, "0-9")

        Dim ul = New TagBuilder("ul")
        ul.AddCssClass("pagination")
        ul.AddCssClass("alpha")

        For Each letter As String In alphabet
            Dim li = New TagBuilder("li")

            If firstLetters.Contains(letter) OrElse (firstLetters.Intersect(numbers).Any() AndAlso letter = "0-9") OrElse letter = "All" Then
                If selectedLetter = letter OrElse String.IsNullOrEmpty(selectedLetter) AndAlso letter = "All" Then
                    li.AddCssClass("active")
                    Dim span = New TagBuilder("span")
                    span.SetInnerText(letter)
                    li.InnerHtml = span.ToString()
                Else
                    Dim a = New TagBuilder("a")
                    a.MergeAttribute("href", pageLink(letter))
                    a.InnerHtml = letter
                    li.InnerHtml = a.ToString()
                End If
            Else
                li.AddCssClass("inactive")
                Dim span = New TagBuilder("span")
                span.SetInnerText(letter)
                li.InnerHtml = span.ToString()
            End If
            sb.Append(li.ToString())
        Next

        ul.InnerHtml = sb.ToString()
        Return New HtmlString(ul.ToString())
    End Function


End Module

---

HomeController.vb

Code:

---

Imports System
Imports System.Collections.Generic

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index(selectedLetter As String) As ActionResult
        Dim model = New AlphabeticalPagingViewModel()
        model.SelectedLetter = selectedLetter


        Using context = New AdventureWorks2012Entities()


            model.FirstLetters = context.Products.GroupBy(Function(p) p.Name.Substring(0, 1)) _
                .[Select](Function(x) x.Key.ToUpper()).ToList()


            model.Products = New List(Of ProductModel)()


            If String.IsNullOrEmpty(selectedLetter) OrElse selectedLetter = "All" Then


                model.Products.AddRange((From item In context.Products
                        Group Join category In context.ProductSubcategories
                            On item.ProductSubcategoryID Equals category.ProductSubcategoryID
                        Into ProductCategory = Group
                            From category In ProductCategory.DefaultIfEmpty()
                        Select New ProductModel() With { _
                            .ProductName = item.Name, _
                            .ProductID = item.ProductID, _
                            .ProductNumber = item.ProductNumber, _
                            .Color = If((String.IsNullOrEmpty(item.Color)), "NA", item.Color), _
                            .StandardCost = item.StandardCost, _
                            .ProductCategory = If((String.IsNullOrEmpty(category.Name)), "NA", category.Name) _
                }).ToList())
            Else
                If selectedLetter = "0-9" Then
                    Dim numbers = Enumerable.Range(0, 10).[Select](Function(i) i.ToString())


                    model.Products.AddRange((From item In context.Products
                        Where (numbers.Contains(item.Name.Substring(0, 1)))
                        Group Join category In context.ProductSubcategories
                            On item.ProductSubcategoryID Equals category.ProductSubcategoryID
                        Into ProductCategory = Group
                            From category In ProductCategory.DefaultIfEmpty()
                        Select New ProductModel() With { _
                            .ProductName = item.Name, _
                            .ProductID = item.ProductID, _
                            .ProductNumber = item.ProductNumber, _
                            .Color = If((String.IsNullOrEmpty(item.Color)), "NA", item.Color), _
                            .StandardCost = item.StandardCost, _
                            .ProductCategory = If((String.IsNullOrEmpty(category.Name)), "NA", category.Name) _
                    }).ToList())


                Else
                    model.Products.AddRange((From item In context.Products
                        Where (item.Name.StartsWith(selectedLetter))
                        Group Join category In context.ProductSubcategories
                            On item.ProductSubcategoryID Equals category.ProductSubcategoryID
                        Into ProductCategory = Group
                            From category In ProductCategory.DefaultIfEmpty()
                        Select New ProductModel() With { _
                            .ProductName = item.Name, _
                            .ProductID = item.ProductID, _
                            .ProductNumber = item.ProductNumber, _
                            .Color = If((String.IsNullOrEmpty(item.Color)), "NA", item.Color), _
                            .StandardCost = item.StandardCost, _
                            .ProductCategory = If((String.IsNullOrEmpty(category.Name)), "NA", category.Name) _
                    }).ToList())
                End If
            End If


        End Using


        Return View(model)


    End Function
 
End Class

---

AlphabeticalPagingViewModel.vb

Code:

---

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web


Public Class AlphabeticalPagingViewModel


    Public Property Products() As List(Of ProductModel)
        Get
            Return m_ProductID
        End Get
        Set(value As List(Of ProductModel))
            m_ProductID = value
        End Set
    End Property
    Private m_ProductID As List(Of ProductModel)


    Public Property FirstLetters() As List(Of String)
        Get
            Return m_FirstLetters
        End Get
        Set(value As List(Of String))
            m_FirstLetters = value
        End Set
    End Property
    Private m_FirstLetters As List(Of String)


    Public Property SelectedLetter() As String
        Get
            Return m_SelectedLetter
        End Get
        Set(value As String)
            m_SelectedLetter = value
        End Set
    End Property
    Private m_SelectedLetter As String


End Class

---

Index.vbhtml

Code:

---

@Code
    ViewData("Title") = "Alphabet Based Paging"
End Code


@ModelType MVCAlphabeticPager.AlphabeticalPagingViewModel
<br />
<div class="panel panel-primary">
    <div class="panel-heading panel-head">Product Listing</div>
    <div class="panel-body">
        @Html.AlphabeticalPager(Model.SelectedLetter, Model.FirstLetters, Function(x) Url.Action("Index", New With {.selectedLetter = x}))
        <table class="table" style="margin: 4px">
            <tr>
                <th>
                    @Html.DisplayName("Product ID")
                </th>
                <th>
                    @Html.DisplayName("Product Number")
                </th>
                <th>
                    @Html.DisplayName("Product Name")
                </th>
                <th>
                    @Html.DisplayName("Standard Cost")
                </th>
                <th>
                    @Html.DisplayName("Color")
                </th>
                <th>
                    @Html.DisplayName("Category")
                </th>
            </tr>
            @For Each item In Model.Products
                Dim currentItem = item
            @<tr>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.ProductID)
                </td>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.ProductNumber)
                </td>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.ProductName)
                </td>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.StandardCost)
                </td>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.Color)
                </td>
                <td>
                    @Html.DisplayFor(Function(modelItem) currentItem.ProductCategory)
                </td>
            </tr> 
            Next


        </table>
        @Html.AlphabeticalPager(Model.SelectedLetter, Model.FirstLetters, Function(x) Url.Action("Index", New With {.selectedLetter = x}))
    </div>
</div>

---

Browser View:
Attachment 129983


:)