ASP.NET Rekenmachine Generator
Bouw en test je eigen ASP.NET calculator met deze interactieve tool
ASP.NET Markup (ASPX)
Code-Behind (C#/VB)
JavaScript Validatie
Complete Gids: Hoe Maak Ik Een Rekenmachine in ASP.NET
Het bouwen van een rekenmachine in ASP.NET is een uitstekende manier om vertrouwd te raken met webforms, server-side processing en client-side validatie. Deze uitgebreide gids leidt je door alle stappen, van basisconcepten tot geavanceerde functionaliteit.
1. Basisconcepten van ASP.NET Rekenmachines
Een ASP.NET rekenmachine bestaat uit drie hoofdcomponenten:
- User Interface (ASPX) – De HTML-markup met invoervelden en knoppen
- Code-Behind – De server-side logica (C# of VB.NET)
- Client-Side Scripting – Optionele JavaScript voor validatie en verbeterde UX
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Calculator.aspx.cs” Inherits=”Calculator” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>ASP.NET Rekenmachine</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”txtNumber1″ runat=”server” />
<asp:TextBox ID=”txtNumber2″ runat=”server” />
<asp:DropDownList ID=”ddlOperation” runat=”server”>
<asp:ListItem Text=”+” Value=”add” />
<asp:ListItem Text=”-” Value=”subtract” />
<asp:ListItem Text=”*” Value=”multiply” />
<asp:ListItem Text=”/” Value=”divide” />
</asp:DropDownList>
<asp:Button ID=”btnCalculate” runat=”server” Text=”Bereken” OnClick=”btnCalculate_Click” />
<asp:Label ID=”lblResult” runat=”server” />
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>ASP.NET Rekenmachine</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”txtNumber1″ runat=”server” />
<asp:TextBox ID=”txtNumber2″ runat=”server” />
<asp:DropDownList ID=”ddlOperation” runat=”server”>
<asp:ListItem Text=”+” Value=”add” />
<asp:ListItem Text=”-” Value=”subtract” />
<asp:ListItem Text=”*” Value=”multiply” />
<asp:ListItem Text=”/” Value=”divide” />
</asp:DropDownList>
<asp:Button ID=”btnCalculate” runat=”server” Text=”Bereken” OnClick=”btnCalculate_Click” />
<asp:Label ID=”lblResult” runat=”server” />
</div>
</form>
</body>
</html>
2. Server-Side Logica Implementeren
De code-behind file bevat de berekeningslogica. Hier is een voorbeeld in C#:
using System;
public partial class Calculator : System.Web.UI.Page
{
protected void btnCalculate_Click(object sender, EventArgs e)
{
try
{
double num1 = Convert.ToDouble(txtNumber1.Text);
double num2 = Convert.ToDouble(txtNumber2.Text);
double result = 0;
switch (ddlOperation.SelectedValue)
{
case “add”:
result = num1 + num2;
break;
case “subtract”:
result = num1 – num2;
break;
case “multiply”:
result = num1 * num2;
break;
case “divide”:
if (num2 != 0)
result = num1 / num2;
else
lblResult.Text = “Delen door nul is niet toegestaan”;
break;
}
lblResult.Text = $”Resultaat: {result:F2}”;
}
catch (Exception ex)
{
lblResult.Text = $”Fout: {ex.Message}”;
}
}
}
public partial class Calculator : System.Web.UI.Page
{
protected void btnCalculate_Click(object sender, EventArgs e)
{
try
{
double num1 = Convert.ToDouble(txtNumber1.Text);
double num2 = Convert.ToDouble(txtNumber2.Text);
double result = 0;
switch (ddlOperation.SelectedValue)
{
case “add”:
result = num1 + num2;
break;
case “subtract”:
result = num1 – num2;
break;
case “multiply”:
result = num1 * num2;
break;
case “divide”:
if (num2 != 0)
result = num1 / num2;
else
lblResult.Text = “Delen door nul is niet toegestaan”;
break;
}
lblResult.Text = $”Resultaat: {result:F2}”;
}
catch (Exception ex)
{
lblResult.Text = $”Fout: {ex.Message}”;
}
}
}
3. Geavanceerde Functionaliteit Toevoegen
Voor een professionele rekenmachine kun je deze functies implementeren:
- Geschiedenis bijhouden – Sla eerdere berekeningen op in Session State
- Wetenschappelijke functies – Sinus, cosinus, logaritmen etc.
- Thema’s – Laat gebruikers het uiterlijk aanpassen
- API integratie – Haal wisselkoersen op voor valuta omrekenen
- Responsive design – Optimaliseer voor mobiele apparaten
| Methode | Voordelen | Nadelen | Geschikt voor |
|---|---|---|---|
| WebForms | Snelle ontwikkeling, state management | Minder controle over HTML, viewstate overhead | Snelle prototyping, interne tools |
| MVC | Betere scheiding van concerns, meer controle | Steilere leercurve, meer code nodig | Complexe applicaties, publiek gerichte tools |
| Blazor | Moderne benadering, real-time updates | Nieuwere technologie, beperkte browser ondersteuning | Interactieve web apps, single-page applicaties |
| API + JavaScript | Beste prestaties, meest flexibel | Meer complexiteit, twee codebasissen | High-performance applicaties, mobiele apps |
4. Validatie en Foutafhandeling
Robuuste validatie is essentieel voor een betrouwbare rekenmachine:
<asp:RequiredFieldValidator ID=”rfvNumber1″ runat=”server”
ControlToValidate=”txtNumber1″
ErrorMessage=”Veld 1 is verplicht”
Display=”Dynamic”
ForeColor=”Red” />
<asp:RegularExpressionValidator ID=”revNumber1″ runat=”server”
ControlToValidate=”txtNumber1″
ErrorMessage=”Ongeldig nummer formaat”
ValidationExpression=”^-?\d+\.?\d*$”
Display=”Dynamic”
ForeColor=”Red” />
<asp:RangeValidator ID=”rvNumber2″ runat=”server”
ControlToValidate=”txtNumber2″
ErrorMessage=”Getal moet tussen -1000 en 1000 zijn”
MinimumValue=”-1000″
MaximumValue=”1000″
Type=”Double”
Display=”Dynamic”
ForeColor=”Red” />
ControlToValidate=”txtNumber1″
ErrorMessage=”Veld 1 is verplicht”
Display=”Dynamic”
ForeColor=”Red” />
<asp:RegularExpressionValidator ID=”revNumber1″ runat=”server”
ControlToValidate=”txtNumber1″
ErrorMessage=”Ongeldig nummer formaat”
ValidationExpression=”^-?\d+\.?\d*$”
Display=”Dynamic”
ForeColor=”Red” />
<asp:RangeValidator ID=”rvNumber2″ runat=”server”
ControlToValidate=”txtNumber2″
ErrorMessage=”Getal moet tussen -1000 en 1000 zijn”
MinimumValue=”-1000″
MaximumValue=”1000″
Type=”Double”
Display=”Dynamic”
ForeColor=”Red” />
Voor client-side validatie kun je JavaScript gebruiken:
function validateInputs() {
const num1 = document.getElementById(‘<%= txtNumber1.ClientID %>’).value;
const num2 = document.getElementById(‘<%= txtNumber2.ClientID %>’).value;
const operation = document.getElementById(‘<%= ddlOperation.ClientID %>’).value;
if (num1 === “” || num2 === “”) {
alert(“Vul beide getallen in”);
return false;
}
if (isNaN(num1) || isNaN(num2)) {
alert(“Voer geldige getallen in”);
return false;
}
if (operation === “divide” && parseFloat(num2) === 0) {
alert(“Delen door nul is niet toegestaan”);
return false;
}
return true;
}
const num1 = document.getElementById(‘<%= txtNumber1.ClientID %>’).value;
const num2 = document.getElementById(‘<%= txtNumber2.ClientID %>’).value;
const operation = document.getElementById(‘<%= ddlOperation.ClientID %>’).value;
if (num1 === “” || num2 === “”) {
alert(“Vul beide getallen in”);
return false;
}
if (isNaN(num1) || isNaN(num2)) {
alert(“Voer geldige getallen in”);
return false;
}
if (operation === “divide” && parseFloat(num2) === 0) {
alert(“Delen door nul is niet toegestaan”);
return false;
}
return true;
}
5. Prestatie Optimalisatie
Voor een snelle rekenmachine:
- Gebruik ViewState alleen voor essentiële data
- Implementeer caching voor vaak gebruikte berekeningen
- Gebruik asynchrone methodes voor complexe berekeningen
- Minimaliseer postbacks met UpdatePanels
- Optimaliseer database queries voor historische data
| Bewerking | Basis Validatie | Strikte Validatie | Met Caching |
|---|---|---|---|
| Optellen | 45 | 52 | 18 |
| Vermenigvuldigen | 48 | 55 | 20 |
| Delen | 50 | 58 | 22 |
| Worteltrekken | 120 | 135 | 45 |
| Logaritme | 145 | 160 | 50 |
6. Beveiligings Overwegingen
Beveilig je rekenmachine tegen:
- SQL Injectie – Gebruik altijd parameterized queries
- Cross-Site Scripting (XSS) – Encode output met HttpUtility.HtmlEncode
- Denial of Service – Beperk complexe berekeningen
- Data Leaks – Sanitize alle invoer
- Session Hijacking – Gebruik SSL en beveiligde cookies
// Veilige berekeningsmethode
public double SafeCalculate(string expression)
{
// Whitelist van toegestane tekens
var allowedChars = “0123456789+-*/(). “;
if (expression.Any(c => !allowedChars.Contains(c)))
{
throw new ArgumentException(“Ongeldige tekens in expressie”);
}
// Beperk lengte om DoS te voorkomen
if (expression.Length > 100)
{
throw new ArgumentException(“Expressie te lang”);
}
try
{
var result = new DataTable().Compute(expression, null);
return Convert.ToDouble(result);
}
catch
{
throw new ArgumentException(“Ongeldige wiskundige expressie”);
}
}
public double SafeCalculate(string expression)
{
// Whitelist van toegestane tekens
var allowedChars = “0123456789+-*/(). “;
if (expression.Any(c => !allowedChars.Contains(c)))
{
throw new ArgumentException(“Ongeldige tekens in expressie”);
}
// Beperk lengte om DoS te voorkomen
if (expression.Length > 100)
{
throw new ArgumentException(“Expressie te lang”);
}
try
{
var result = new DataTable().Compute(expression, null);
return Convert.ToDouble(result);
}
catch
{
throw new ArgumentException(“Ongeldige wiskundige expressie”);
}
}
7. Implementatie in Productie
Voor het deployen van je ASP.NET rekenmachine:
- Test grondig in een staging omgeving
- Configureer foutmeldingen voor gebruikersvriendelijke berichten
- Implementeer logging voor diagnostiek
- Optimaliseer voor zoekmachines met relevante meta tags
- Monitor prestaties en gebruikersfeedback
8. Toekomstige Ontwikkelingen
Overweeg deze moderne uitbreidingen:
- Machine Learning – Voorspellende berekeningen
- Spraakgestuurde invoer – Voice recognition API’s
- Blockchain integratie – Voor financiële berekeningen
- Augmented Reality – 3D visualisaties
- Progressive Web App – Offline functionaliteit
9. Veelvoorkomende Problemen en Oplossingen
| Probleem | Oorzaak | Oplossing |
|---|---|---|
| ViewState fouten | Te grote ViewState of corruptie | Schakel ViewState uit voor niet-essentiële controls of gebruik Session |
| Postback niet werken | Ontbrekende EventValidation of ViewState | Zorg dat Page.EnbleEventValidation=true en ViewState is ingeschakeld |
| Langzame prestaties | Te veel controls of complexe berekeningen | Implementeer caching, optimaliseer queries, gebruik asynchrone methodes |
| Stijl problemen | CSS conflicten met Theme | Gebruik CSSReset of specifieke CSS classes |
| Validatie werkt niet | Client-side JavaScript conflicten | Gebruik Page.Validate() en controleer IsValid property |
10. Geavanceerd Voorbeeld: Wetenschappelijke Rekenmachine
Hier is een voorbeeld van een wetenschappelijke rekenmachine met extra functies:
protected void btnScientificCalculate_Click(object sender, EventArgs e)
{
try
{
double input = Convert.ToDouble(txtScientificInput.Text);
double result = 0;
string operation = ddlScientificOperation.SelectedValue;
switch (operation)
{
case “sin”:
result = Math.Sin(input * Math.PI / 180); // Convert to radians
break;
case “cos”:
result = Math.Cos(input * Math.PI / 180);
break;
case “tan”:
result = Math.Tan(input * Math.PI / 180);
break;
case “log”:
result = Math.Log10(input);
break;
case “ln”:
result = Math.Log(input);
break;
case “sqrt”:
result = Math.Sqrt(input);
break;
case “pow”:
double exponent = Convert.ToDouble(txtExponent.Text);
result = Math.Pow(input, exponent);
break;
}
lblScientificResult.Text = $”Resultaat: {result:F6}”;
StoreInHistory(input, operation, result);
}
catch (Exception ex)
{
lblScientificResult.Text = $”Fout: {ex.Message}”;
}
}
private void StoreInHistory(double input, string operation, double result)
{
var history = Session[“CalculationHistory”] as List<string> ?? new List<string>();
history.Insert(0, $”{input} {GetOperationSymbol(operation)} = {result:F6}”);
if (history.Count > 10) history.RemoveAt(10);
Session[“CalculationHistory”] = history;
BindHistory();
}
{
try
{
double input = Convert.ToDouble(txtScientificInput.Text);
double result = 0;
string operation = ddlScientificOperation.SelectedValue;
switch (operation)
{
case “sin”:
result = Math.Sin(input * Math.PI / 180); // Convert to radians
break;
case “cos”:
result = Math.Cos(input * Math.PI / 180);
break;
case “tan”:
result = Math.Tan(input * Math.PI / 180);
break;
case “log”:
result = Math.Log10(input);
break;
case “ln”:
result = Math.Log(input);
break;
case “sqrt”:
result = Math.Sqrt(input);
break;
case “pow”:
double exponent = Convert.ToDouble(txtExponent.Text);
result = Math.Pow(input, exponent);
break;
}
lblScientificResult.Text = $”Resultaat: {result:F6}”;
StoreInHistory(input, operation, result);
}
catch (Exception ex)
{
lblScientificResult.Text = $”Fout: {ex.Message}”;
}
}
private void StoreInHistory(double input, string operation, double result)
{
var history = Session[“CalculationHistory”] as List<string> ?? new List<string>();
history.Insert(0, $”{input} {GetOperationSymbol(operation)} = {result:F6}”);
if (history.Count > 10) history.RemoveAt(10);
Session[“CalculationHistory”] = history;
BindHistory();
}
Conclusie
Het bouwen van een rekenmachine in ASP.NET biedt een uitstekende gelegenheid om verschillende aspecten van web development te verkennen – van basis server-side processing tot geavanceerde client-side interacties. Door te beginnen met een eenvoudige implementatie en geleidelijk complexere functionaliteit toe te voegen, kun je een krachtig hulpmiddel creëren dat voldoet aan specifieke gebruikersbehoeften.
Onthoud dat de sleutel tot een succesvolle ASP.NET rekenmachine ligt in:
- Duidelijke gebruikersinterface met intuïtieve bediening
- Robuuste validatie en foutafhandeling
- Efficiënte server-side berekeningslogica
- Attentie voor beveiliging en prestaties
- Grondige testing en iteratieve verbetering
Met de kennis uit deze gids ben je goed uitgerust om je eigen ASP.NET rekenmachine te bouwen, of het nu een eenvoudige tool voor basisberekeningen is of een complexe wetenschappelijke calculator met geavanceerde functies.