I recently discovered the “Run To Cursor” command for launching the debugger in Visual Studio 2019. This will command will start the debugger and the program will execute normally until execution reaches the position of the cursor. Once this happens, break mode is triggered and the state is the same as if a breakpoint had been added at the same position.
This is very useful if you are trying to step through a programThe to find where things are going wrong. Adding breakpoints everywhere can be a bit cumbersome, as I often forget to remove them so the next time I run the program I find am hitting break points where they are not needed, slowing me down.
Starting the Debugger with “Run To Cursor”
To Start the debugger and execute the program to the current cursor position, right click on the line of code where you want the program to break, and select “Run To Cursor” from the context menu.
The CTRL + F10 shortcut is another way of accessing this command.
“Run To Cursor” with Visual Studio Code
In Visual Studio Code, the function is a bit different. There does not seem to be a simple way to start the debugger and run to the current line with a single command. However, when the debugger has already been started and a break point has been hit, the Run-To-Cursor option in the context menu does appear.
It is annoying to have to set a breakpoint first in order to use this function. A work-arround to avoid setting a break point in order to get access to the “Run to Cursor” function in Visual Studio Code is to edit the Launch.Json for the current project to change the debug configuration to stop and program entry.
When the “stopAtEntry” property is set to true, it is like setting a breakpoint at the first line of your program. The debugger will immediately go into break mode. In some cases, this may be easier than manually setting a breakpoint. Happy Debugging.
In this tutorial, we will assemble a class library that can be used to generate html markup to support paging. The UI should end up looking something like this.
The front end client code to use the library should be simple and easy to use. We are using Visual Studio Code with .NET 5, so I will implement the final result as a tag helper and possibly a view component, so we can write code like this to activate paging.
<h3>My Products</h3>
<!-- Html tag helper will be triggered by the mvc-pager-info attribute being present -->
<div mvc-pager-info="@ViewBag.pagingInfo"></div>
We need the ability to configure the number of results per page, the styling of the buttons, and the presence of next and previous buttons. The pager should be fast and not cause the database to return huge datasets beyond what is needed to display a single page.
Gathering Code Examples and Creating the Project
Instead of writing this functionality from scratch, we will use the below github repositories as sources, and combine them to something that melds nicely into a .NET 5 MVC project, however, much of this functionality can be used outside the context of MVC such as in razor pages or a console application.
Neither of the above projects has had much much maintenance or updates as of this writing. I hope to build something that works for .NET 5.
Creating the Project
Use the .NET CLI to create a new project with the MVC template. Run the below command in your powershell terminal of choice. The VS Code terminal works well for this. This creates a project structure with a .csproj file, and a basic template page with supporting files in the views, models, controllers folders.
dotnet new mvc --name MvcPaging
Random Test Data for Paging
In Order to build a pager, we first must have a test dataset that is big enough to require paging. I decided to use a list of randomly generated strings, each five characters long. This is a static class so that we can generate the data only once during our program execution, and not on every http request.
using System.Collections.Generic;
namespace DotNetPaging.Examples.Models
{
public static class DataSet{
static System.Random random = new System.Random();
public static List<string> StringDataSet {get; set;} = new List<string>();
public static void CreateDataSet(){
for(int i = 0; i< 100;i++){
var randomLetters = $"{GetLetter()}{GetLetter()}{GetLetter()}{GetLetter()}{GetLetter()}{GetLetter()}";
StringDataSet.Add(randomLetters);
}
}
public static string GetLetter()
{
// This method returns a random lowercase letter
// ... Between 'a' and 'z' inclusize.
int num = random.Next(0, 26); // Zero to 25
char let = (char)('a' + num);
return let.ToString();
}
}
}
Now that we have 100 items of data to display, we can display this data on a page and add the pager so only a subset of the results is displayed at once.
Add The Model – Introduce PagedList<T>
The Model will be very simple. It’s purpose is to pass data from the MVC Controller which we will add below, to the View. Here our Model will contain a single property of type PagedList<string>. The PagedList<T> type is inherited from IEnumerable<T>.
namespace DotNetPaging.Examples.Models{
public class HomeIndex_VM {
public IPagedList<string> OnePageOfData {get; set;}
}
}
The implementation adds metadata to describe the data, including
These properties are all calculated based on the total count of items in the database, the current page being viewed, and the number of items per page. Since I am using an existing paging library for calculating this metadata, I won’t discuss much here how the metadata is being calculated but you can see the details in the PagedList.cs file linked in the github repo at the top of this post.
The pager tag helper will build something like the below html output. The configuration of the pagedlist and the paged list meta data which has been previously calculated will determine how this html is constructed. The tag helper will generate the appropriate number of links, along with the next , previous, last, and first buttons.