Gallery
Share
Explore

f23 MO2033 Project Calculator ASP.NET Web Application


Phase 1: Environment Setup

Step 1: Installations

Make sure you have the latest version of Visual Studio Code installed.
Install the .NET 5 SDK or later.
Install the C# extension for Visual Studio Code from the marketplace to get C# support.
Install the ASP.NET and web development workload.

Step 2: Create a new ASP.NET Web Application

Open Visual Studio Code and open a new terminal.
Navigate to your desired directory and enter:
dotnet new webapp -o CalculatorWebApp
Navigate into the project folder CalculatorWebApp.
Open the project in Visual Studio Code:
code .

Step 3: Explore the Project Structure

Familiarize yourself with the generated folders and files:
Pages/: Contains Razor pages for the web application.
wwwroot/: Contains static files like JavaScript, CSS, and images.
appsettings.json: Configuration settings for the app.
Program.cs: Entry point for the application.
Startup.cs: Configures services and the app's request pipeline.

Phase 2: Developing the Web Application

Step 4: Define the Razor Page for the Calculator

Navigate to the Pages folder.
Create a new Razor Page Calculator.cshtml and its code-behind Calculator.cshtml.cs.

Step 5: Design the Calculator Page (Calculator.cshtml)

Define the layout with HTML forms to take two numbers and an operator.
Add an input field for the first number, second number, operator selection, and a submit button.
Add a placeholder where the result will be displayed.

Step 6: Implement the Backend Logic (Calculator.cshtml.cs)

In the code-behind, create model properties for the input fields and result.
Define a method to perform calculation based on the input numbers and the selected operator.
Ensure that the method handles the calculation when the form is submitted.

Step 7: Update the Startup.cs File

Make sure the ConfigureServices and Configure methods are configured properly to use Razor Pages.

Phase 3: Building and Testing the Application

Step 8: Run the Application

Open a terminal in Visual Studio Code.
Navigate to your project folder if not already there.
Run the project using:
dotnet watch run
Open a web browser and go to https://localhost:5001/Calculator.

Step 9: Test the Calculator

Enter numbers and an operator in the web form.
Click the submit button to see the calculation result.

Step 10: Debugging

If the calculator isn't functioning correctly, use Visual Studio Code's debugging tools to diagnose and fix issues.

Phase 4: Final Touches and Submission

Step 11: Error Handling and Validation

Add error handling to the backend logic to prevent invalid operations.
Implement input validation in the Razor Page form.

Step 12: Styling

Use CSS to style the Calculator page with an appealing and user-friendly interface.

Step 13: Documentation and Comments

Document your code with comments describing the functionality and logic.

Step 14: Submission

Ensure that the application functions as expected.
Clean up the project directory from unnecessary files.
Zip the entire project folder and submit according to your course guidelines.

Phase 5: Example Code Implementation

Due to the complexity and length of the code, we will not be able to present the entire implementation detail here, but I can provide a scaffold for the HTML and back-end logic. Would you like me to proceed with that?

Let’s start with a high-level scaffold of both the Razor page for the HTML front end and the C# code-behind. This outline will serve as a starting point for the calculator ASP.NET web application.

Calculator.cshtml


@page
@model CalculatorWebApp.Pages.CalculatorModel

<h2>Calculator</h2>

<form method="post">
<div>
<label for="FirstNumber">First Number:</label>
<input type="text" id="FirstNumber" name="FirstNumber" />
</div>
<div>
<label for="SecondNumber">Second Number:</label>
<input type="text" id="SecondNumber" name="SecondNumber" />
</div>
<div>
<label for="Operator">Operator:</label>
<select id="Operator" name="Operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<div>
<input type="submit" value="Calculate" />
</div>
</form>

@if (Model.CalculationPerformed)
{
<div>
<h3>Result:</h3>
<p>@Model.Result</p>
</div>
}
In the above Razor page, there are input fields for the first number, the second number, and the operator. Upon submission, the page will also display the result if a calculation has been performed.

Calculator.cshtml.cs


using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CalculatorWebApp.Pages
{
public class CalculatorModel : PageModel
{
[BindProperty]
public double FirstNumber { get; set; }
[BindProperty]
public double SecondNumber { get; set; }
[BindProperty]
public string Operator { get; set; }
public double Result { get; set; }
public bool CalculationPerformed { get; set; }
public void OnPost()
{
CalculationPerformed = true;
switch (Operator)
{
case "+":
Result = FirstNumber + SecondNumber;
break;
case "-":
Result = FirstNumber - SecondNumber;
break;
case "*":
Result = FirstNumber * SecondNumber;
break;
case "/":
// Be sure to handle division by zero
if (SecondNumber != 0)
{
Result = FirstNumber / SecondNumber;
}
else
{
ModelState.AddModelError("SecondNumber", "Cannot divide by zero.");
}
break;
default:
CalculationPerformed = false; // Handle the case when the operator is not recognized
break;
}
}
}
}
In this code-behind file Calculator.cshtml.cs, we define properties that are bound to the form inputs. When the form is submitted (OnPost), we perform the calculation based on the selected operator and then display the result on the page.
This high-level outline provides the basic structure of the calculator functionality. To have a fully functional ASP.NET web application Calculator, students will need to ensure the setup of their development environment as described in the previous instruction sheet and follow through with the steps, filling in the necessary details for each part of the application.

ok

I will provide a high-level scaffold of both the Razor page for the HTML front end and the C# code-behind. This outline will serve as a starting point for the calculator ASP.NET web application.

Calculator.cshtml

@page
@model CalculatorWebApp.Pages.CalculatorModel

<h2>Calculator</h2>

<form method="post">
<div>
<label for="FirstNumber">First Number:</label>
<input type="text" id="FirstNumber" name="FirstNumber" />
</div>
<div>
<label for="SecondNumber">Second Number:</label>
<input type="text" id="SecondNumber" name="SecondNumber" />
</div>
<div>
<label for="Operator">Operator:</label>
<select id="Operator" name="Operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<div>
<input type="submit" value="Calculate" />
</div>
</form>

@if (Model.CalculationPerformed)
{
<div>
<h3>Result:</h3>
<p>@Model.Result</p>
</div>
}
In the above Razor page, there are input fields for the first number, the second number, and the operator. Upon submission, the page will also display the result if a calculation has been performed.

Calculator.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CalculatorWebApp.Pages
{
public class CalculatorModel : PageModel
{
[BindProperty]
public double FirstNumber { get; set; }
[BindProperty]
public double SecondNumber { get; set; }
[BindProperty]
public string Operator { get; set; }
public double Result { get; set; }
public bool CalculationPerformed { get; set; }
public void OnPost()
{
CalculationPerformed = true;
switch (Operator)
{
case "+":
Result = FirstNumber + SecondNumber;
break;
case "-":
Result = FirstNumber - SecondNumber;
break;
case "*":
Result = FirstNumber * SecondNumber;
break;
case "/":
// Be sure to handle division by zero
if (SecondNumber != 0)
{
Result = FirstNumber / SecondNumber;
}
else
{
ModelState.AddModelError("SecondNumber", "Cannot divide by zero.");
}
break;
default:
CalculationPerformed = false; // Handle the case when the operator is not recognized
break;
}
}
}
}
In this code-behind file Calculator.cshtml.cs, we define properties that are bound to the form inputs. When the form is submitted (OnPost), we perform the calculation based on the selected operator and then display the result on the page.
This high-level outline provides the basic structure of the calculator functionality.
To have a fully functional ASP.NET web application Calculator, students will need to ensure the setup of their development environment as described in the previous instruction sheets and follow through with the steps, filling in the necessary details for each part of the application.

ok

The provided high-level outline requires a few enhancements and simplifications to ensure it is easy for first-term students to understand and use as a basis for building a C# ASP.NET web application calculator. Below is a revised version of the calculator application with detailed explanations and improvements:

Improvements Made:
Added ErrorMessage property to display error messages directly on the page.
Provided a more detailed comment for division by zero error handling.
Added necessary HTML attributes asp-for to correctly bind form inputs to the model.
Ensured that the result is displayed only if the calculation is performed without errors.
Simplified the switch statement by removing the default case since the valid operators are enforced by the dropdown list.
Added minimal CSS for better user interface layout.
Updated Code for Calculator.cshtml (Razor Page Front End):

@page
@model CalculatorWebApp.Pages.CalculatorModel

<h2>Calculator</h2>

<style>
.calculator-container div {
margin-bottom: 10px;
}
</style>

<form method="post">
<div class="calculator-container">
<div>
<label for="FirstNumber">First Number:</label>
<input type="text" id="FirstNumber" name="FirstNumber" asp-for="FirstNumber" />
</div>
<div>
<label for="SecondNumber">Second Number:</label>
<input type="text" id="SecondNumber" name="SecondNumber" asp-for="SecondNumber" />
</div>
<div>
<label for="Operator">Operator:</label>
<select id="Operator" name="Operator" asp-for="Operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<div>
<input type="submit" value="Calculate" />
</div>
<div>
<span asp-validation-for="SecondNumber" class="text-danger"></span>
</div>
</div>
</form>

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.