Often we want to display a table with large amounts of data. If we want to use Razor syntax and MVC rather than server controls with paging, there are a few different solutions. I like this one for straightforward navigation through a long list of items sorted alphabetically.
<!-- Model information, page title, layout, etc omitted for brevity -->
@{
//At the top of the page I initialize a variable to an empty string to represent the first letter of the name property in my model object.
var lastInitital = "";
}
<body>
<!-- First I create my table headers in a separate table so they stay put. -->
<table class="tableList">
<tr><th colspan="5">
</th></tr>
<tr>
<th style="width:15%;">
Name
</th>
<th>
Category
</th>
</tr>
<!-- in the second row of the table headers table I include the partial page that has my alphabethical links in it (see below) -->
<tr><th colspan="5" style="background:tan; text-align:center;">
@RenderPage("~/Views/Shared/_AlphaLinks.cshtml")
</th></tr>
</table>
<!-- Next I put the data in a new table with the same CSS class, inside a div whose style sets overflow to "scroll" -->
<div id="tableBody">
<table class="tableList">
@foreach (var item in Model)
{
<td style="width:auto;">
@* The first link is just a "Top" link. *@
<a id="Top"></a>
@* Here I look to see if the first letter of the name of the current item in the loop matches the value of lastInitial.
At the start, it won't, so I add a link with the id of the first letter of the name *@
@if (item.Name.Substring(0,1) != lastInitital)
{
<a id="@item.Name.Substring(0,1).ToUpper()"></a>
}
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
@*Before going to the next iteration of the loop, I set the value of lastInitial to the first letter of the name. So it will start with "A",
and when it checks at the beginning of the loop, they will match, so no anchor will be added until the first letter goes to "B"
NOTE: This only works if you have sorted alphabetically on the field yu are checking! *@
lastInitital = item.Name.Substring(0,1).ToUpper();
}
</body>
</html>
The partial page is just a list of alphabet hyperlinks. Since I expect to use it in many places, I put it in a partial page. The page contents are:
<a href="#Top">Top</a> | <a href="#A">A</a> | <a href="#B">B</a> | <a href="#C">C</a> | <a href="#D">D</a> | <a href="#E">E</a> | <a href="#F">F</a> | <a href="#G">G</a> | <a href="#H">H</a> | <a href="#I">I</a> | <a href="#J">J</a> | <a href="#K">K</a> | <a href="#L">L</a> | <a href="#M">M</a> | <a href="#N">N</a> | <a href="#O">O</a> | <a href="#P">P</a> | <a href="#Q">Q</a> | <a href="#R">R</a> | <a href="#S">S</a> | <a href="#T">T</a> | <a href="#U">U</a> | <a href="#V">V</a> | <a href="#W">W</a> | <a href="#X">X</a> | <a href="#Y">Y</a> | <a href="#Z">Z</a>
That’s all it takes! Now I can jump to the first item beginning with the selected letter. My next approach will build a link-list dynamically with a parameter for how many letters I want to use, so I can generate only those links that are representative of the data content, and can break up long sections like AAA-AMA, AMB-AZZ, etc.
LZM
