How to Visualize sorting algorithm using Blazor

Microsoft’s Blazor is a cutting-edge technology for creating applications that run on the web. Blazor supports both a server-based and a client-based rendering model. In this article, I will demonstrate how to animate a sorting algorithm, precisely bubble sort so that you can use it in your projects.

I will assume that we are familiar with the Blazor application before we move on to implementing the sorting.

<div class="container">
    <div class="d-flex flex-row">
        @for (int i = 0; i < @Items.Length; i++)
        {

            @if(Items[i].IsSorted==false){
            <div class="@Items[i].CssClass"  style="height:@(Items[i].Value*20)px;width:10px">@Items[i].Value</div>
            }else{
                 <div class="alert alert-warning col-md-2"  style="height:@(Items[i].Value*20)px;width:10px">@Items[i].Value</div>
            }

        }
    </div>
    <div class="row">
      
        <div class="col-md-4 alert alert-success">@compareText</div>
        @if (swapped)
        {
            <div class="alert alert-success col-md-4">@swapText</div>
        }else{
            <div class="alert alert-success col-md-4">No Swap</div>
        }
    </div>
</div>
@code{

        private string swapText = "";
        private string compareText = "";
        private Item[]? Items { get;set;}
        private Random rand = new Random();
        private bool swapped = false;
        protected override void OnInitialized()
        {
            Items = Enumerable.Range(1, 10).Select((v, i) => new Item()
            {

                Value = rand.Next(1, 10)

            }).ToArray();

            Sort();
        }


        private async Task Sort()
        {

            for (int j = 0; j < Items.Length; j++)
            {

                for (int i = 0; i < Items.Length - 1; i++)
                {

                    Items.UpdateClass(i, "alert alert-danger col-md-2");
                    Items.UpdateClass(i + 1, "alert alert-success col-md-2");
                    await Task.Delay(200);
                    compareText = $"compareing  {Items[i + 1].Value} and {Items[i].Value} ";
                    if (Items[i].Value > Items[i + 1].Value)
                    {

                        swapText = $"Swapping   {Items[i + 1].Value} and {Items[i].Value}";
                        (Items[i].Value, Items[i + 1].Value) = (Items[i + 1].Value, Items[i].Value);
                        swapped = true;
                        StateHasChanged();
                        swapText = "";
                    }
                    compareText = "";
                    swapped = false;
                    Items.UpdateClass(i, "alert alert-dark col-md-2");
                    Items.UpdateClass(i + 1, "alert alert-dark col-md-2");
                }
                Items[Items.Length - j - 1].IsSorted = true;
                StateHasChanged();
            }

        }
}

Let’s understand the code. The main logic is inside the Sort method. There is nothing special about the code. It’s a simple c# code for sorting the array. The only tricky thing is updating the CSS class before comparing the array item and then updating the CSS class when there is a swap. Now the role of blazor is involved when we are changing the CSS class; we are forcing blazor to re-render the UI by calling the StateHasChanged method.
Lastly, I am updating the index of the previous item to sorted and updating the CSS class to the final state.

In the code, I am using one Item class shown below and one extension method to update the CSS class of the corresponding array item.

Item.cs

  public class Item
    { public bool IsSorted { get; set; } = false;
        public int Value { get; set; }
        public string CssClass { get; set; } = "alert alert-dark";
    }

CssExtensions.cs

  public static class CssExtensions
    {
         public static void UpdateClass(this Item[] items, int index, string className)
        {
            items[index].CssClass = className;
        }
    }

Live Demo

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru