matteskolin


Visual Studio Tips

Run to Cursor for Easy Debugging in Visual Studio

Posted by matteskolin on

This post is for Visual Studio, to learn how to do this in Visual Studio Code, go here. https://blueprogrammer.com/2021/03/27/run-to-cursor-for-easy-debugging-in-visual-studio-code/

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.

Visual Studio Tips

Tutorial – Paging in .NET Core MVC Part 1

Posted by matteskolin on

github for code used in this tutorial –

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.

https://github.com/hieudole/PagedList.Core.Mvc – ideas for the tag helper
https://github.com/troygoode/PagedList – sql paging implementation – calculating the metadata such as total count, number of pages, and querying the database.

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

PageCount
TotalItemCount
PageNumber
PageSize
HasPreviousPage
HasNextPage
IsFirstPage
IsLastPage
FirstItemOnPage
LastItemOnPage

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.

Next we will add the controller and the view

Adding the Controller and View

        PageCount
        TotalItemCount 
        PageNumber 
        PageSize 
        HasPreviousPage
        HasNextPage
        IsFirstPage
        IsLastPage
        FirstItemOnPage 
        LastItemOnPage 

Adding the Controller And the View

//HomeController.cs
using Microsoft.AspNetCore.Mvc;
using DotNetPaging.Examples.Models;

namespace DotNetPaging.Examples.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index([FromQuery]int? page)
        {
            var pageNumber = page == null || page < 0 ? 1 : page.Value;
            var pageSize = 5;

            var onePage = DataSet.StringDataSet.ToPagedList(pageNumber,pageSize);

           var indexViewModel = new HomeIndex_VM(); 
           indexViewModel.OnePageOfData = onePage;

            return View(indexViewModel);
        }
    }
}

In Our view we are using the pager tag helper.

@using DotNetPaging;
@model DotNetPaging.Examples.Models.HomeIndex_VM
@{
    ViewData["Title"] = "DotNetPaging - Examples";
}

<h1>Paging</h1>
<p><h6>Full Pager</h6><pager class="pager-container" list="@Model.OnePageOfData" options="@PagedListRenderOptions.Bootstrap4Full" asp-action="Index" asp-controller="Home"  /></p>

<table class="table">
    @foreach(var item in @Model.OnePageOfData)
    {
        <tr>
            <td>
                @item
            </td>
        </tr>
    }
</table>

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.

<nav class="pager-container">
   <ul class="pagination">
      <li class="page-item disabled"><a class="page-link" tabindex="-1">First</a></li>
      <li class="page-item disabled"><a class="page-link" rel="prev" tabindex="-1">Previous</a></li>
      <li class="page-item active"><span class="page-link">1</span></li>
      <li class="page-item"><a class="page-link" href="/?page=2">2</a></li>
      <li class="page-item"><a class="page-link" href="/?page=3">3</a></li>
      <li class="page-item"><a class="page-link" href="/?page=2" rel="next">Next</a></li>
      <li class="page-item"><a class="page-link" href="/?page=20">Last</a></li>
   </ul>
</nav>

Code available on github





Part 2 will be adding a randomize button to the




Will add to this post as I continue building this project.

More to Come!

Maybe we should consider building this as a View Component instead of a tag helper… to be determined

Really want to add random – ordering to the paging so that we can see fresh items.. that are burried in the middle of the list…