In this article, I will be explaining how to create a simple Web Calculator using .NET Core.

What is ASP.NET Core and why do we use it?

  • Easy to develop Web Pages as well as Web APIs.
  • Integration of modern frameworks and development workflows.
  • Easy to integrate with Azure.
  • Natural dependency injection support.
  • Large hosting variety, like on IIS, Apache, Docker, or self-host in your own process.
  • A wide range of tools that simplifies web development.
  • Multi-platform, so you may build and run on Windows, macOS, and Linux.
  • Open-source and with a powerful community.

We are using a single controller with two Action Results - one for the first HttpGet and another to calculate the operation on the server side. Here is the code.
public class HomeController : Controller 

    [HttpGet] 
    public IActionResult Index() 
    { 
        return View(); 
    } 
 
    [HttpPost] 
    public IActionResult Index( Operation model ) 
    { 
        if ( model.OperationType == OperationType.Addition ) 
            model.Result = model.NumberA + model.NumberB; 
        return View( model ); 
    } 


This is the View,
@model Operation 
<form asp-controller="Home" asp-action="Index" method="post" > 
    <div class="form-group"> 
        <div class="row"> 
            <label asp-for="NumberA" class="col-lg-2"></label> 
            <input type="number" asp-for="NumberA" class="col-lg-2" /> 
        </div> 
        <div class="row"> 
            <label asp-for="NumberB" class="col-lg-2"></label> 
            <input type="number" asp-for="NumberB" class="col-lg-2" /> 
        </div> 
        <div class="row"> 
            <label asp-for="OperationType" class="col-lg-2"></label> 
            <select asp-for="OperationType" class="col-lg-2" asp-items="Html.GetEnumSelectList<OperationType>()"> 
                <option selected="selected" value="">Select</option> 
            </select> 
        </div> 
        <div class="row"> 
            <label asp-for="Result" class="col-lg-2"></label> 
            <input type="number" disabled="disabled" class="col-lg-2" asp-for="Result" /> 
        </div> 
        <div class="row"> 
            <input type="submit" value="Submit" asp-action="Index" /> 
        </div> 
    </div> 
</form> 


View Result in the browser.


This is the model used in here.

public class Operation 

    [Display( Name = "First Number" )] 
    public double NumberA { get; set; } 
 
    [Display( Name = "Second Number" )] 
    public double NumberB { get; set; } 
 
    [Display( Name = "Result" )] 
    public double Result { get; set; } 
 
    [Display( Name = "Operation" )] 
    public OperationType OperationType { get; set; } 


public enum OperationType 

    Addition, 
    Multiplication, 
    Division, 
    Subtraction 


Right now, only addition is implemented.

You can implement multiplication, division, and subtraction as well. I will publish these methods in my next article.

Congratulations, you have successfully created your Web Calculator using .NET Core.

HostForLIFE.eu ASP.NET Core 2.2.1 Hosting
European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.