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.
Step 2 : Go to Solution Explorer and
right-click on WebSite.
- Go to Add-> New Item.
- Select Web Form.
- Default.aspx page open.
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>
</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.
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..