Tuesday, January 19, 2010

Ajax Samples 2

Here is the code we did for class today. It has two Ajax Update Panels, one that does the tip calculator and one that reveals or hides a panel with a table in it. Remember to add a Script manager, and remember that all the controls in an Update Panel must be inside a control template element.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Tip Calculator</h1>
<p>
 </p>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p> Enter the Meal AmountEnter the Meal AmountEnter the Meal Amount
<asp:TextBox ID="TxtMeal" runat="server"></asp:TextBox>
 </p>
<asp:Label ID="Label2" runat="server" Text="Choose the tip Percent"></asp:Label>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
</asp:RadioButtonList>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<br />
<asp:Label ID="Label3" runat="server" Text="Your tip will be"></asp:Label>
<asp:Label ID="lbltip" runat="server" Text=""></asp:Label> <br />
<asp:Label ID="Label4" runat="server" Text="Your total will be"></asp:Label>
<asp:Label ID="lbltotal" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="True"
onselectedindexchanged="Unnamed1_SelectedIndexChanged">
<asp:ListItem Text="Show" Value="1"></asp:ListItem>
<asp:ListItem Text="Hide" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<asp:Panel ID="Panel1" runat="server" BackColor="Beige" Visible="False">
<asp:Table ID="Table1" runat="server">
<asp:TableRow>
<asp:TableCell>FirstName</asp:TableCell>
<asp:TableCell><asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>LastName</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></asp:TableCell>
</asp:TableRow>

</asp:Table>

</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>


Option Explicit On
Partial Class _Default
Inherits System.Web.UI.Page


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Create an array of percents
If Not IsPostBack Then
Dim percents() As String = {"10 Percent", "15 Percent", "20 Percent"}
RadioButtonList1.DataSource = percents
RadioButtonList1.DataBind()
End If

'Dim x As Integer


End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click

Dim mealAmount As Double
If txtMeal.Text = Nothing Then
Response.Write("Enter Something")
Return
End If
'If IsNumeric(txtMeal.Text) Then
' mealAmount = Double.Parse(txtMeal.Text)
'Else
' lbltip.Text = "please enter a valid numeric amount for the meal"
' Return
'End If

Dim testResult As Boolean
testResult = Double.TryParse(txtMeal.Text, mealAmount)
If testResult = False Then
lbltip.Text = "please enter a valid numeric amount for the meal"
lbltotal.Text = ""
Return
End If

Dim tip As Double
Dim total As Double

If RadioButtonList1.SelectedItem.Text = "10 Percent" Then
tip = mealAmount * 0.1
ElseIf RadioButtonList1.SelectedItem.Text = "15 Percent" Then
tip = mealAmount * 0.15
Else
tip = mealAmount * 0.2
End If

total = mealAmount + tip

lbltip.Text = tip.ToString("$#,##0.00")
lbltotal.Text = total.ToString("$#,##0.00")

End Sub


Protected Sub Unnamed1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
If RadioButtonList2.SelectedValue = 1 Then
Panel1.Visible = True
Else
Panel1.Visible = False
End If
End Sub
End Class

No comments:

Post a Comment