Binary To Decimal Using Blazor

Before reading this article, I recommend looking at my blog, Application Ideas for Beginner, Intermediate and Advanced using Blazor.

Binary To Decimal Converter will be a converter that takes binary numbers from input strings and converts them to their decimal value. And we will add the ability to convert back from decimals to binary numbers.

Tier: 1-Beginner

The binary is the number system all digital computers are based on. Therefore it's important for developers to understand binary, or base 2, mathematics. The purpose of Binary To Decimal Converter is to provide practice and understanding of how binary calculations.

Binary To Decimal Converter allows the user to enter strings of up to 8 binary digits, 0's and 1's, in any sequence and then displays its decimal equivalent.

Binary To Decimal Converter allows the user to enter strings of decimal numbers and then displays its binary equivalent.

Contents

• Introducing MudBlazor
• Tech stack
• Setting up the project  
• Installing and Configuring MudBlazor
• Building the UI with MudBlazor components
• Unit test
• Conclusion

Introducing MudBlazor

MudBlazor is "a Material Design Component framework" for Blazor to ease up the web development framework without struggling with CSS and javascript if you're looking for Date pickers, progress bars, Ratings, etc.

MudBlazor has your back, and nearly all components use just C# (no Javascript, except where it's strictly necessary). The vision of MudBlazor is to keep it clean, simple, and with a highly customizable modern design. No Javascript, just Blazor, and CSS. The team has documented the library in a very understandable way. You can check the documentation here.

Tech stack

• Visual Studio 2022
• .NET 6
• Blazor wasm
• xUnit
• bUnit

Setting up the project  

Open the Visual Studio and search for Blazor App. Click on the Next button,

Define the project name, path, and solution name. Click on the Create button,

After that, a new window will pop up to choose the target framework (.Net 6.0) from the dropdown and ensure "Configure the Https" is checked.

Installing and Configuring the MudBlazor

Open up the package manager console and try running the following command to install the MudBlazor in our project.

Install-Package MudBlazor

After the package is installed, open up the startup.cs file and try adding the services inside the ConfigureServices() method, adding all the common services required by the MudBlazor component.

services.AddMudServices();

We need to add the references of CSS and js files of MudBlazor inside the wwwroot /index.html  page,

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

 

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Here we need to import the MudBlazor package inside the _Imports.razor file,

@using MudBlazor

Once after that, we need to add the providers we consume from the MudBlazor package. Open up the Shared/MainLayout.razor and add the below code. 

<MudThemeProvider />

Building the UI with MudBlazor components

To have the logic in place, we have to create a c# class in ViewModels/Beginner/BinaryToDecimalConverterViewModel.cs

using Microsoft.AspNetCore.Components;
using MudBlazor;
namespace SmallApplications_Blazor.ViewModels.Beginner {
    public class BinaryToDecimalConverterViewModel {
        public string ? Binary {
            get;
            set;
        }
        public string ? Decimal {
            get;
            set;
        }
        public string ? ReturnMessage {
            get;
            private set;
        }
        public bool HasError => !string.IsNullOrEmpty(ReturnMessage);
        public void ConvertDecimal() {
            try {
                ReturnMessage = string.Empty;
                if (string.IsNullOrEmpty(Binary)) throw new FormatException();
                Decimal = Convert.ToInt32(Binary, 2).ToString();
            } catch {
                ReturnMessage = "Binary must be a valid number with only 0s and 1s.";
            }
        }
        public void ConvertBinary() {
            try {
                ReturnMessage = string.Empty;
                if (string.IsNullOrEmpty(Decimal)) throw new FormatException();
                int number = Convert.ToInt32(Decimal);
                Binary = Convert.ToString(number, 2);
            } catch {
                ReturnMessage = "Decimal must be a valid number with only digits 0-9.";
            }
        }
        public void Reset() {
            Decimal = string.Empty;
            Binary = string.Empty;
            ReturnMessage = string.Empty;
        }
    }
}

Here is a brief description of the above code snippet

• Binary holds the binary number.
• Decimal holds the integer number.
• ReturnMessage is a display message to show whenever an error happens in the conversion. 
• ConvertDecimal( ) method takes the Binary property, converts it to an integer, and stores it as a string in the Decimal property.
• ConvertBinary( ) method does the reverse. 

To have the UI in place, we have to create a Razor component in the Pages/Beginner/BinaryToDecimalConverter.razor. 

@page "/Beginner/binaryToDecimal"
@using SmallApplications_Blazor.ViewModels.Beginner;

<PageTitle>BinaryToDecimal</PageTitle>

<MudAlert Severity="Severity.Info" Elevation="5">
	Bin2Dec allows the user to enter strings of binary digits, 0's and 1's, in any sequence and then displays its decimal equivalent.
</MudAlert>
<br />
<MudAlert Severity="Severity.Info" Elevation="5">
	Bin2Dec allows the user to enter strings of decimal number and then displays its binary equivalent.
</MudAlert>
<br />
<div class="d-flex justify-center">
	<MudPaper Class="pa-8" Elevation="5">
		<MudTextField T="string"
					  Label="Binary"
					  Placeholder="Enter binary number"
					  @bind-Value="vm.Binary" />
		<MudTextField T="string"
					  Label="Decimal"
					  Placeholder="Enter decimal number"
					  @bind-Value="vm.Decimal" />
		<MudButton Class="mt-5"
				   Variant="Variant.Filled"
				   Color="Color.Primary"
				   OnClick="vm.ConvertDecimal">
			Convert to Decimal
		</MudButton>
		<MudButton Class="mt-5"
				   Variant="Variant.Filled"
				   Color="Color.Secondary"
				   OnClick="vm.ConvertBinary">
			Convert to Binary
		</MudButton>
		<MudButton Class="mt-5"
				   Variant="Variant.Filled"
				   OnClick="vm.Reset">
			Reset
		</MudButton>
	</MudPaper>
</div>
@if (vm.HasError)
{
	<MudAlert Class="mb-6 mt-5"
		  Severity="Severity.Error"
		  Elevation="20"
		  Variant="Variant.Filled">@vm.ReturnMessage</MudAlert>
}
@code {
	public BinaryToDecimalConverterViewModel vm = new BinaryToDecimalConverterViewModel();
}

Line 1: Routing the page.

Line  2: Importing the files.

Line 4 - 42: Text fields, buttons to Convert and Reset.

Line 43- 49: Serction to show or not Error Message

Adding the page routing in a new card in the Beginner/Main_Beginner razor page

<MudCard Elevation="5">
		<MudCardHeader>
			<CardHeaderContent>
				<MudText Style="color: #448AFF" Typo="Typo.h6">Bin2Dec</MudText>
				<MudText Typo="Typo.body2">Binary-to-Decimal number converter</MudText>
			</CardHeaderContent>
			<CardHeaderActions>
				<MudIconButton Icon="@Icons.Material.Filled.ArrowCircleRight"
							   Size="Size.Large"
							   Color="Color.Tertiary"
							   Href="/Beginner/binaryToDecimal" />
			</CardHeaderActions>
		</MudCardHeader>
</MudCard>

Final Output

At this point, we can build and run the project locally. Enter some binary data into the input element and click the 'Covert to Decimal' button to see the result (and convert back as well).

Unit test

We will finish this article by creating some tests to verify the functionalities.

Let's start by creating a test project SmallApplications_Blazor.Tests within the same solution.

With the separate BinaryToDecimalConverterViewModel class, it is easy to unit test the logic. Create a ViewModels/Beginner/BinaryToDecimalConverterViewModelTests

using SmallApplications_Blazor.Pages.Beginner;
using SmallApplications_Blazor.ViewModels.Beginner;
using Xunit;
namespace SmallApplications_Blazor.Tests.ViewModels {
    public class BinaryToDecimalConverterViewModelTests {
        private
        const string binaryErrorMessage = "Binary must be a valid number with only 0s and 1s.";
        private
        const string decimalErrorMessage = "Decimal must be a valid number with only digits 0-9.";
        [Fact]
        public void Construction() {
                // arrange
                // act
                var vm = new BinaryToDecimalConverterViewModel();
                // assert
                Assert.NotNull(vm);
                Assert.Null(vm.Binary);
                Assert.Null(vm.Decimal);
                Assert.Null(vm.ReturnMessage);
            }
            [Theory]
            [InlineData("101", "5", "")]
            [InlineData("11011010", "218", "")]
            [InlineData("", null, binaryErrorMessage)]
            [InlineData("102", null, binaryErrorMessage)]
        public void ConvertDecimal_WithBinaryString(string initialBinary, string expectedDecimal, string expectedErrorMessage) {
                // arrange
                var vm = new BinaryToDecimalConverterViewModel {
                    Binary = initialBinary
                };
                // act
                vm.ConvertDecimal();
                // assert
                Assert.Equal(expectedDecimal, vm.Decimal);
                Assert.Equal(expectedErrorMessage, vm.ReturnMessage);
            }
            [Theory]
            [InlineData("5", "101", "")]
            [InlineData("186", "10111010", "")]
            [InlineData("", null, decimalErrorMessage)]
            [InlineData("102l", null, decimalErrorMessage)]
        public void ConvertBinary_WithDecimalString(string initialDecimal, string expectedBinary, string expectedErrorMessage) {
            // arrange
            var vm = new BinaryToDecimalConverterViewModel {
                Decimal = initialDecimal
            };
            // act
            vm.ConvertBinary();
            // assert
            Assert.Equal(expectedBinary, vm.Binary);
            Assert.Equal(expectedErrorMessage, vm.ReturnMessage);
        }
    }
}

We notice the xUnit [Fact] and [Theory] attributes that are on each method. These attributes are used by the xUnit test runner to discover the unit tests in our class. [Fact] is for a single test method. [Theory] is used to define a method with variations that are run for each [InlineData] attribute on that same method. The method signature of [InlineData] must match the test method's signature, and that data is passed into the method for each test.

All of the unit tests conform to the same outline: arrange (setup the requirements for the test), act (perform the test on the method), and assert (validate the state after the method is tested). This helps other developers, and ourselves understand the intent of the tests.

Conclusion

I hope this article helps you understand the implementation of Binary To Decimal Converter with .NET 6, Blazor wasm and MudBlazor.

Thank you for reading; please let me know your questions, thoughts, or feedback in the comments section. I appreciate your feedback and encouragement.

The source code is available on the following repository GitHub.

This is an open-source project, and contributors are what makes such a project with rich features to learn, inspire, and motivate. Any contributions you make are greatly appreciated. Fork the Project to add a new application.

Happy Documenting!