Post
Ask Question

Arithmetic calculator in AJAX


Introduction : Asynchronous JavaScript and XML. Ajax is a technique for creating fast and dynamic web page. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. The UpdatePanel control is one of the most important controls in the ASP.NET AJAX package. It enables you to create web pages with complex client behavior and a high level of interactivity and responsiveness. The UpdatePanel control can be used to perform partial updates of a web page.

Ajax include some technology :

  • JavaScript.
  • XML.
  • Asynchronous call to the server.

Step 1 : Open Visual Studio 2010.

  • Go to File->New->Website.
  • Select ASP.NET WebSite.
asp1.gif

Step 2 : Go to Solution Explorer and right-click on WebSite.

  • Go to Add-> New Item.
  • Select Web Form.
  • Default.aspx page open.
asp2.gif

Step 3 : Now drag and drop controls from Toolbox.

  • Drag Button, Label, TextBox, ScriptManager.

Step 4 : Go to Source option on the page and define the all properties for the calculator application and write the code.

Code :

<title> my ajax calculator</title>
 </head>
<body style="position: relative">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory = "true" EnableSecureHistoryState = "false">
    </asp:ScriptManager>
  <div>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblHeading" runat="server" Text=" My Calculator in Ajax" Font-Size = "Large" BackColor = "Aqua"></asp:Label><br/><br />
            <asp:Label ID="lblN1" runat="server" Text="Enter 1st Number"  Font-Size = "Large" BackColor = "Azure"></asp:Label>
            <asp:TextBox ID="TxtN1" runat="server" Font-Size = "Smaller" Width = "50px"  BackColor = "Yellow"></asp:TextBox><br /><br />
            <asp:Label ID="lblN2" runat="server" Text="Enter 2nd Number" Font-Size = "Large"></asp:Label>
            <asp:TextBox ID="TxtN2" runat="server" Font-Size = "Smaller" Width = "50px" BackColor = "Yellow"></asp:TextBox><br />
            <asp:Button ID="btnDivide" runat="server" Text="Divide" Font-Size = "Large"
                BackColor = "Red" onclick="btnDivide_Click"
                style="z-index: 1; left: 252px; top: 33px; position: relative" /><br />
            <asp:Button ID="btnadd" runat="server" Text="Add" Font-Size = "Large"
                BackColor = "Red" onclick="btnadd_Click"/>
            <asp:Button ID = "btnSubtract" runat = "server" Text = "Subtract"
                Font-Size = "Large" BackColor = "Red" onclick="btnSubtract_Click" />
            <asp:Button ID="btnMultiply" runat="server" Text="Multiply" 
                Font-Size = "Large" BackColor = "Red" onclick="btnMultiply_Click"/>
            <br /><br />
            <asp:Label ID="lblResult" runat="server" Text="Result" Font-Size = "Large" BackColor = "Aqua"></asp:Label>
            &nbsp;
        </ContentTemplate>
        </asp:UpdatePanel>
    </div
    </form>

 Step 5 : Again go to Design option on the page and see all the controls will be set for the calculator application.

Step 6 : Now double click in Add, Subtract, Multiply, Divide button and write a code.

Code :

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnadd_Click(object sender, EventArgs e)
    {
        try
        {
            int n1 = Convert.ToInt32(TxtN1.Text);
            int n2 = Convert.ToInt32(TxtN2.Text);
            int n3 = n1 + n2;
            lblResult.Text = "Addition is " + (n1 + n2); 
            ScriptManager1.AddHistoryPoint("t1", TxtN1.Text);
            ScriptManager1.AddHistoryPoint("t2", TxtN2.Text);
            ScriptManager1.AddHistoryPoint("t3", lblResult.Text);
            System.Threading.Thread.Sleep(1000);
        }
        catch (Exception ex)
        {
            lblResult.Text = ex.Message;
        }
    }
    protected void btnSubtract_Click(object sender, EventArgs e)
    {
        try
        {
            int n1 = Convert.ToInt32(TxtN1.Text);
            int n2 = Convert.ToInt32(TxtN2.Text);
            int n3 = n1 - n2;
            lblResult.Text = "Subtraction is " + (n1 - n2);
        }
        catch (Exception ex)
        {
            lblResult.Text = ex.Message;
        }
    }
    protected void btnMultiply_Click(object sender, EventArgs e)
    {
        try
        {
            int n1 = Convert.ToInt32(TxtN1.Text);
            int n2 = Convert.ToInt32(TxtN2.Text);
            int n3 = n1 + n2;
            lblResult.Text = "Multiplication is " + (n1 * n2);
        }
        catch (Exception ex)
        {
            lblResult.Text = ex.Message;
        }
    }
    protected void btnDivide_Click(object sender, EventArgs e)
    {
        try
        {
            int n1 = Convert.ToInt32(TxtN1.Text);
            int n2 = Convert.ToInt32(TxtN2.Text);
            int n3 = n1 + n2;
            lblResult.Text = "Division is " + (n1 / n2);
        }
        catch (Exception ex)
        {
            lblResult.Text = ex.Message;
        }
    }
}

Step 7 : Now press F5 and run the application.


aspo1.gif

Step 8 : Define the first and second number and click in add button then we can find the result.
  • Same Process for Subtract, multiply and Division..

aspo2.gif


Similar Articles