Getting Started With Blazor Using ASP.NET Core

Getting Started with Blazor

Create a Sample Calculator Using Blazor

@page "/calculator"  
  
<h1>Basic Calculator Demo Using Blazor</h1>  
<hr />  
<div>  
    <div class="row">  
        <div class="col-sm-3">  
            <p>First Number</p>  
        </div>  
        <div class="col-sm-4">  
            <input placeholder="Enter First Number" @bind(num1)>  
        </div>  
    </div>  
    <br />  
    <div class="row">  
        <div class="col-sm-3">  
            <p>Second Number</p>  
        </div>  
        <div class="col-sm-4">  
            <input placeholder="Enter Second Number" @bind(num2)>  
        </div>  
    </div>  
    <br />  
    <div class="row">  
        <div class="col-sm-3">  
            <p>Result</p>  
        </div>  
        <div class="col-sm-4">  
            <input readonly @bind(finalresult)>  
        </div>  
    </div>  
    <br />  
    <div class="row">  
        <div class="col-sm-2">  
            <button @onclick(AddNumbers) class="btn">Add (+)</button>  
        </div>  
        <div class="col-sm-2">  
            <button @onclick(SubtractNumbers) class="btn btn-primary">Subtract (−)</button>  
        </div>  
        <div class="col-sm-2">  
            <button @onclick(MultiplyNumbers) class="btn btn-success ">Multiply (X)</button>  
        </div>  
        <div class="col-sm-2">  
            <button @onclick(DivideNumbers) class="btn btn-info">Divide (X)</button>  
        </div>  
    </div>  
</div>  
  
@functions {  
  
string num1;  
string num2;  
string finalresult;  
  
void AddNumbers()  
{  
    finalresult = (Convert.ToDouble(num1) + Convert.ToDouble(num2)).ToString();  
}  
  
void SubtractNumbers()  
{  
    finalresult = (Convert.ToDouble(num1) - Convert.ToDouble(num2)).ToString();  
}  
  
void MultiplyNumbers()  
{  
    finalresult = (Convert.ToDouble(num1) * Convert.ToDouble(num2)).ToString();  
}  
  
void DivideNumbers()  
{  
    if (Convert.ToDouble(num2) != 0)  
    {  
        finalresult = (Convert.ToDouble(num1) / Convert.ToDouble(num2)).ToString();  
    }  
  
    else  
    {  
        finalresult = "Cannot Divide by Zero";  
    }  
}  
}  

Let’s understand this code. On the top, we are defining the route of this page using @page directive. So in this application, if we append “/calculator” to base URL then we will be redirected to this page.

Then we have defined the HTML section to read two numbers from the user and display the result in another textbox. The attribute “@bind” is used to bind the value entered in the textbox to the variables we have defined. We also created four buttons to perform our basic arithmetic operations. We are calling our business logic methods on button click.

<div class='main-nav'>  
    <div class='navbar navbar-inverse'>  
        <div class='navbar-header'>  
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>  
                <span class='sr-only'>Toggle navigation</span>  
                <span class='icon-bar'></span>  
                <span class='icon-bar'></span>  
                <span class='icon-bar'></span>  
            </button>  
            <a class='navbar-brand' href='/'>BlazorDemo</a>  
        </div>  
        <div class='clearfix'></div>  
        <div class='navbar-collapse collapse'>  
            <ul class='nav navbar-nav'>  
                <li>  
                    <NavLink href="/" Match=NavLinkMatch.All>  
                        <span class='glyphicon glyphicon-home'></span> Home  
                    </NavLink>  
                </li>  
                <li>    
                    <NavLink href="/counter">  
                        <span class='glyphicon glyphicon-education'></span> Counter  
                    </NavLink>  
                </li>  
                <li>  
                    <NavLink href="/fetchdata">  
                        <span class='glyphicon glyphicon-th-list'></span> Fetch data  
                    </NavLink>  
                </li>  
                <li>  
                    <NavLink href="/calculator">  
                        <span class='glyphicon glyphicon-th-list'></span> Calculator  
                    </NavLink>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div>  

Execution Demo 

Launch the application. You can see a “Calculator” link in the navigation menu on the left. Click on it to navigate to our calculator page. Notice the URL, it has /calculator appended to it.

 

 

Let's perform add operation. Input two numbers and click on Add(+) button. You can see the addition result in the Result textbox.

 

 

Now try to perform division on two numbers. You can get the result in Result textbox. If you try to perform division by Zero, you will get an error message "Cannot Divide by Zero".

 

 

Similarly, try other operations and see the result.

Conclusion

We learned about the new .NET framework – Blazor. We have also created a simple calculator application using Blazor and performed arithmetic operations on it.
You can also fork this application on Github. Try this new framework and let me know what you think of it in the comments section below.