Image of a computer screen displaying code in a dark room.

BLOG

Using AJAX and MVC for Filtering and Paging a Directory

Learn how to build a dynamic resource directory with AJAX and MVC, featuring filtering and paging for a seamless user experience.

June 5, 2025

Reading time: 8 min

OUR EXPERTISE

CMS & Custom Development

Chad Heinle

VP of Consulting, High Monkey

When building a website or application, you can use AJAX (Asynchronous JavaScript and XML) to make your page update smoothly without needing to reload the entire thing. You can also use MVC (Model-View-Controller), which is a design pattern to organize your code. By combining AJAX with MVC, you can create a smooth experience for users while using the back-end code to provide the data.Here’s how you can build a resource directory that allows users to filter results and move between different pages of data (paging):

Steps:

1. Create HTML templates for returned data
2. Create a paging zone to manage page links
3. Handle the initial page load
4. Manage actions for filtering and paging

Step 1: Create HTML templates for returned data

Instead of writing all the HTML code in your JavaScript file, you can create a simple structure in your HTML file. This structure can be hidden from users using a display:none style. Your JavaScript will find this structure and use it to fill in the data without users seeing the template itself.

Example:<div id="directory-template" style="display: none">
<p class="resource-title">[TITLE]</p>
<p>[DESCRIPTION]
<br />
<a href="[URL]" class="btn">Learn more<span class="hide-visual"> about [TITLE]</span></a>
</p>
</div>In this template, the placeholders like [TITLE], [DESCRIPTION], and [URL] will be replaced by real data when the page loads.

Step 2: Create a paging zone to manage page links

You’ll need a section on your webpage where users can click on different pages of results. This section is a simple HTML div that you’ll fill with page numbers after the results are loaded.

Example:<div class="paging-group"></div>

Step 3: handle the initial page load

When the page first loads, you need to check if the user came from a filtered link (for example, from a search result). You can do this by checking the query string (the part of the URL that carries data like filters or page numbers).

For instance, you can check for a filter in the URL like this:if (HttpContext.Current.Request.QueryString["filterStatement"] != null)
{
// Code to handle filter
}This method also works for paging:if (HttpContext.Current.Request.QueryString["page"] != null)
{
// Code to handle paging
}Once you know if there are filters or page numbers in the URL, you can request the right data from the server. You also need to figure out how many pages of results there are based on how many items are on each page.

Example:
<ul>
@for (int i = 0; i < numPages; i++)
{
string pageText = (i + 1).ToString();
string current = "";
if (i == currentPage)
{
current = "current";
}
<li>
<a href="#" data-page="@i" class="page-link @current">@pageText</a>
</li>
}
</ul>

Step 4: Manage actions for filtering and paging

JavaScript can handle actions like filtering and paging. This way, when a user changes a filter or clicks on a different page number, your webpage updates without reloading. You need to set up event handlers for these actions.

For filtering, you can use checkboxes like this:$('.input').change(function ()
{
filterDirectory();
});For paging, you’ll grab the page number that the user clicked on:$('.page-link').on('click', function(){
var pageClicked = $(this).attr('data-page');
filterDirectory(pageClicked);
});In the function that filters the directory, you collect the filter options and page number, then build a URL to send the data to the server.function filterPageDirectory(page = 0) {
var filterStatement = "";
var inputGroups = [];
$('.input:checked').each(function(index,obj) {
var value = $(this).val();
inputGroups.push(value);
});

var queryFilter = "?filterStatement=" + filterStatement + "&page=" + page; var urlendpoint = "/api/resources" + queryFilter;

// Make an AJAX call to the server
}The server will return the data in JSON format (a way of sending data), which you can use to update the HTML template with the new results.

now you're set

By following these steps, you can create a smooth and user-friendly resource directory that allows for both filtering and paging. Using AJAX and MVC together not only enhances performance but also provides a better experience for your users.

Whether you’re building a small project or a large-scale application, these techniques will help streamline your data handling and presentation.

Latest Blogs

Image of code on a computer screen in a dark room.

OUR EXPERTISE

| CMS & Custom Development