Simple Calculator in ASP .Net with Source Code

Early in my Software Engineering studies, I was convinced by some colleagues that the future for ASP.Net is very bleak so I started to concentrate on learning other languages such as PHP, Java, CSS for styling simple web pages & Javascript. Although I did not cut off myself from C# because that was my primary programming language to develop desktop apps, specially my semester projects but I never tried to concentrate on learning ASP until now. Now I am in my final year of Software Engineering & soon I’ll graduate so I started to search for applying different companies & Software Houses. One thing I noticed is that most of these jobs require candidates to have knowledge of ASP.Net & particularly MVC framework. Therefore I started learning ASP.Net from the basics again. Here is my first try at creating a Simple Calculator in ASP.Net with background code in C#.

Calculator.aspx Page

ASP.Net is a web based technology so its presentation is on browser & the browser only understand HTML objects. So first we create a simple page with each buttons we need on our Calculator. Here is the source code for Aspx page.

Download our Free eBook : Learning C# by Developing Unity 3D Games.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" Inherits="ASP_1.Calculator" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sajjad's Calculator</title>
    <link href="Calculator.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="calculator-holder">
    <table class="calculator" id="calc">
            <tr>
                <td colspan="4" class="calc_td_result">
                    <input type="text" readonly="readonly" runat="server" name="calc_result" id="calc_result" class="calc_result" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonCE" runat="server" CssClass="calc_btn" Text="CE" OnClick="ButtonCE_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonReturn" runat="server" CssClass="calc_btn" Text="&larr;" OnClick="ButtonReturn_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonPercentage" runat="server" CssClass="calc_btn" Text="%" OnClick="ButtonPercentage_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonPlus" runat="server" CssClass="calc_btn" Text="+" OnClick="ButtonPlus_Click" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <asp:Button ID="Button7" runat="server" CssClass="calc_btn" Text="7" OnClick="Button7_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button8" runat="server" CssClass="calc_btn" Text="8" OnClick="Button8_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button9" runat="server" CssClass="calc_btn" Text="9" OnClick="Button9_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonMinus" runat="server" CssClass="calc_btn" Text="-" OnClick="ButtonMinus_Click" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <asp:Button ID="Button4" runat="server" CssClass="calc_btn" Text="4" OnClick="Button4_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button5" runat="server" CssClass="calc_btn" Text="5" OnClick="Button5_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button6" runat="server" CssClass="calc_btn" Text="6" OnClick="Button6_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonMultiply" runat="server" CssClass="calc_btn" Text="x" OnClick="ButtonMultiply_Click" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <asp:Button ID="Button1" runat="server" CssClass="calc_btn" Text="1" OnClick="Button1_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button2" runat="server" CssClass="calc_btn" Text="2" OnClick="Button2_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="Button3" runat="server" CssClass="calc_btn" Text="3" OnClick="Button3_Click"/>
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonDivide" runat="server" CssClass="calc_btn" Text="&divide;" OnClick="ButtonDivide_Click" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <asp:Button ID="Button0" runat="server" CssClass="calc_btn" Text="0" OnClick="Button0_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonPlusMinus" runat="server" CssClass="calc_btn" Text="&plusmn;" OnClick="ButtonPlusMinus_Click"/>
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonComa" runat="server" CssClass="calc_btn" Text="," OnClick="ButtonComa_Click" />
                </td>
                <td class="calc_td_btn">
                        <asp:Button ID="ButtonEquals" runat="server" CssClass="calc_btn" Text="=" OnClick="ButtonEquals_Click"/>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Calculator.css Styling

Since Calculator.aspx is a web page written basically in HTML, we need to style it with Cascading Style Sheets (CSS). Did you noticed that there are ID attributes in each object in Calculator.aspx page. We use these ID’s to style these objects accordingly. Here is the Calculator.css file that will style the object on the webpage. Note that this is not used to calculate anything, It is just for stylish presentation of our HTML page.

.calculator-holder {
        position: relative;
        top: 50%;
        transform: translateY(+50%);
}
.calculator
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:0 auto 0 auto;
        padding-left:5px;
        padding-bottom:5px;
}
.calculator td
{
        height:16.66%;
}
.calc_td_result
{
        text-align:center;
}
.calc_result
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%;
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px;
}

Code Behind File of Calculator

ASP.Net applications are developed in Visual C# & Visual Basic programming languages. We will be using C# for our development. Remember when we drop any control on windows form & double click on it, It creates its event click. Similarly when you use Standard ASP control on your web page in ASP.Net project & double click on it, It automatically creates its event handler in its Code Behind file. In our case the code behind file is Calculator.aspx.cs. Any code written in this file will actually run on our server. Here is the source code.

using System;

namespace ASP_1
{
    public partial class Calculator : System.Web.UI.Page
    {
        Calculate _Calculate;
        protected void Page_Load(object sender, EventArgs e)
        {
            _Calculate = new Calculate();
        }

        protected void Button0_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "0";
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "1";
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "2";
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "3";
        }

        protected void Button4_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "4";
        }

        protected void Button5_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "5";
        }

        protected void Button6_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "6";
        }

        protected void Button7_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "7";
        }

        protected void Button8_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "8";
        }

        protected void Button9_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + "9";
        }

        protected void ButtonComa_Click(object sender, EventArgs e)
        {
            calc_result.Value = calc_result.Value + ",";
        }

        protected void ButtonPlusMinus_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                calc_result.Value = "-" + calc_result.Value;
            }
        }

        protected void ButtonPlus_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value1"] = calc_result.Value;
                ViewState["Operation"] = "Addition";
                calc_result.Value = string.Empty;
            }
        }

        protected void ButtonMinus_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value1"] = calc_result.Value;
                ViewState["Operation"] = "Subtraction";
                calc_result.Value = string.Empty;
            }
        }

        protected void ButtonMultiply_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value1"] = calc_result.Value;
                ViewState["Operation"] = "Multiplication";
                calc_result.Value = string.Empty;
            }
        }

        protected void ButtonDivide_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value1"] = calc_result.Value;
                ViewState["Operation"] = "Division";
                calc_result.Value = string.Empty;
            }
        }

        protected void ButtonPercentage_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value1"] = calc_result.Value;
                ViewState["Operation"] = "Percentage";
                calc_result.Value = string.Empty;
            }
        }

        protected void ButtonCE_Click(object sender, EventArgs e)
        {
            if ((string)ViewState["Operation"] != null)
            {
                ViewState["Operation"] = null;
            }
            else if ((string)ViewState["Value1"] != null)
            {
                ViewState["Value1"] = null;
            }
        }

        protected void ButtonReturn_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                string CharactersInTextBox = calc_result.Value;
                string FinalCharactersInTextBox = string.Empty;

                for (int i = 0; i < CharactersInTextBox.Length - 1; i++)
                {
                    FinalCharactersInTextBox = FinalCharactersInTextBox + CharactersInTextBox[i];
                }

                calc_result.Value = FinalCharactersInTextBox;
            }
        }

        protected void ButtonEquals_Click(object sender, EventArgs e)
        {
            if (calc_result.Value == string.Empty)
            {
                Response.Write("<script>alert('No Value is given.')</script>");
            }
            else
            {
                ViewState["Value2"] = calc_result.Value;
                calc_result.Value = string.Empty;

                try
                {
                    if ((string)ViewState["Operation"] == "Addition")
                    {
                        calc_result.Value = _Calculate.Add(Convert.ToInt32(ViewState["Value1"]), Convert.ToInt32(ViewState["Value2"])).ToString();
                    }
                    else if ((string)ViewState["Operation"] == "Subtraction")
                    {
                        calc_result.Value = _Calculate.Subtract(Convert.ToInt32(ViewState["Value1"]), Convert.ToInt32(ViewState["Value2"])).ToString();
                    }
                    else if ((string)ViewState["Operation"] == "Multiplication")
                    {
                        calc_result.Value = _Calculate.Multiply(Convert.ToInt32(ViewState["Value1"]), Convert.ToInt32(ViewState["Value2"])).ToString();
                    }
                    else if ((string)ViewState["Operation"] == "Division")
                    {
                        calc_result.Value = _Calculate.Divide(Convert.ToInt32(ViewState["Value1"]), Convert.ToInt32(ViewState["Value2"])).ToString();
                    }
                    else if ((string)ViewState["Operation"] == "Percentage")
                    {
                        calc_result.Value = _Calculate.Percentage(Convert.ToInt32(ViewState["Value1"]), Convert.ToInt32(ViewState["Value2"])).ToString();
                    }
                    else Response.Write("<script>alert('No Operation was recorded.')</script>");
                }
                catch (FormatException)
                {
                    Response.Write("<script>alert('Bad Input Format.')</script>");
                }
            }
        }
    }
}

Calculate Class

I created a simple class just like we create in Console App or Windows Forms Apps. I named it Calculate.cs. This class contains my methods for Addition, Subtraction, Multiplication, Division & Percentage. I am calling these methods in my code behind file Calculator.aspx.cs. Here is the source code for this file.

namespace ASP_1
{
    public class Calculate
    {
        public int Add(int Value1, int Value2)
        {
            return Value1 + Value2;
        }
        public int Subtract(int Value1, int Value2)
        {
            return Value1 - Value2;
        }
        public int Multiply(int Value1, int Value2)
        {
            return Value1 * Value2;
        }
        public double Divide(int Value1, int Value2)
        {
            return Value1 / Value2;
        }
        public string Percentage(int Value1, int Value2)
        {
            Value1 = Value1 * 100;

            return Divide(Value1, Value2) + "%";
        }
    }
}

Output ASP.Net Simple Calculator

Here is the video output of this Simple Calculator in ASP.Net that I develop.

Download Calculator in ASP.Net

I am also attaching actual project file here, So if someone want to have look on working app, Download the file from below. It is in Visual Studio 2012 file format & the size of project file is ~50 KB.

You can ask me any questions related to this or any other programming issue on Facebook.

7 thoughts on “Simple Calculator in ASP .Net with Source Code

  1. This is completely basic i suppose because you are doing call back on each button click just to enter a character. It could be done by JavaScript. If this is your first try at developing a simple calculator in ASP then it is good but for Final year student it is terrible.

  2. Thank you for the work Sir. I am also practicing ASP.net these days. I found this simple calculator helpful as an exercise task.

  3. As Tim Mohawk said, you are doing call backs on every button click. That is not a good idea. I like the way you manage your code. I can clearly understand every variable that you have used in this calculator.

  4. And Mr.gull if you really want toO get traffic on you site of mobile users then remove this fucking sharing toolbar fb, twitter etc sharing toolbar at the right side of your site ASAP

  5. Hi Sajjad. I am thankful for this code snippet of calculator in asp .net. Can you create the same in asp .net MVC? that will also help us understand MVC in more detail. thanks.

  6. Thank you for the work Sir. I am also practicing ASP.net these days. I found this simple calculator helpful as an exercise task.

Leave a Reply

Your email address will not be published. Required fields are marked *