ASP.NET Core – Getting Started With Blazor

Getting Started with Blazor

To create our first Blazor application we need to install “ASP.NET Core Blazor Language Services extension” from here.

Install this extension and it will be added to your VS 2017.

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Select “ASP.NET Core Web Application” from available project types. Put the name of the project as BlazorDemo and press OK.

Create a Sample Calculator Using Blazor

We are going to create a basic calculator app. This calculator will perform addition, subtraction, multiplication, and division operations. Right click on Pages folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, select “Razor View” from templates panel. Put the name as Calculator.cshtml. Press OK.

@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";
    }
}
}

Finally, we will add the link to our “calculator” page in the navigation menu, open /Shared/NavMenu.cshtml page and put the following code into it.

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="/">BlazorTest</a>
    <button class="navbar-toggler" onclick=@ToggleNavMenu>
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/" Match=NavLinkMatch.All>
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/calculator">
                <span lass="oi oi-list-rich" aria-hidden="true"></span> Calculator
            </NavLink>
        </li>
    </ul>
</div>

@functions {
bool collapseNavMenu = true;

void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}
}

Congrats! We have created our first application using ASP.NET Core and Blazor. Let’s execute the code and see the output.

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 perform arithmetic operations on it.

Try this new framework and let me know what you think of it in the comments section below.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can check my other articles on ASP .NET Core here 

See Also

• ASP.NET Core – CRUD Using Angular 5 And Entity Framework Core
• CRUD Operations With ASP.NET Core Using Angular 5 and ADO.NET
• Getting Started With Angular 5 Using Visual Studio Code
• CRUD Operation With ASP.NET Core MVC Using Visual Studio Code and EF
• CRUD Operation With ASP.NET Core MVC Using ADO.NET and Visual Studio 2017
• CRUD Operation With ASP.NET Core MVC using Visual Studio Code and ADO.NET