Skip to main content
Logo

Create a custom A-Z listing

This article will cover how you can create a custom A-Z Listing.

With this first piece of code we are setting the default letter to be A and then checking if a user has selected a different and updating the variable accordingly.

We are then querying the database for all content all content set to shown in A-Z listings. This is to ensure editors still have control over what does and doesn’t show in the listing.

This next bit of code loops through the alphabetter and allows us to output a navigation control for users. We are doing an LINQ query which allows to check if we have any content starting with the current letter and if so, output a link so the user can filter the listing by this letter.

Next we check if the current letter in the loop matches the currentLetter variable. For this we need to convert the current letter in the loop to a string so it matches the currentLetter variable type. If they match with add a class to the a element to style the current letter. If not, then output an empty span instead so the user can click on the letter.

Finally, to filter the listing to only show content that starts with the current letter we add a simple LINQ query to our result variable

The final code might look something like this: