Asp.net Web Developer's Guide: Using Labels, TextBoxes, RadioButtons, CheckBoxes, and DropDownLists (Chapter3)

Using Labels, TextBoxes, RadioButtons, CheckBoxes, and DropDownLists (Chapter3)

In this example, we will develop a simple payroll estimation application todemonstrate Labels,TextBoxes, RadioButtons, CheckBoxes and a DropDownList.Wewill use a button control to submit a user’s given data to the server.We will collectdata on hours worked, and hourly rate using two textboxes. Insurance-relateddata will be collected using two radio buttons: “No Insurance ($0.00),” and“Family Coverage ($40.00).”We will group these two radio buttons in a groupnamed rgrInsurance.The objective of grouping buttons is to enable the user toselect at most one button from the group.We will provide two check boxes to collect data on company facility use.Wewill assume that there are two facilities: Parking ($15.00) and Swimming Pool($10.00).The user should be able to check both items. Finally, we will provide aDropDownList box to collect data on employee status.There will be two typesof employees:White-Collar and Workhorse.A white-collar worker will receive abonus of $100, whereas the bonus for a workhorse is assumed to be $65.88.Therun-time view of the application is shown in Figure 3.40.The code for the applicationis pretty much straightforward.We have shown the code in Figure 3.41.

Figure 3.40 Using Label, TextBox, RadioButton, CheckBox, andDropDownList Web Controls

Figure 3.41 Complete Code for BasicServerControls1.aspx<!— Chapter3\BasicServerControls1.aspx —><html><head</head><body><form runat="server">How many hours have you worked?<asp:TextBox id="txtH" rows="1" width="50" runat="server"/><br>Your Hourly Rate?<asp:TextBox id="txtR" rows="1" width="80" runat="server" /><br><br>Please select one of the following:<br><asp:RadioButton id="rbtnNoCov" groupName="rgrInsurance"text="No Insurance Coverage" checked="true" runat="server"/> <asp:RadioButton id="rbtnFamCov" groupName="rgrInsurance"text="Family Coverage" runat="server"/><br><br>Which of the company facilities do you use?<br><asp:CheckBox id="chkPark" text="Parking" runat="server"/> <asp:CheckBox id="chkPool" text="Swimming Pool" runat="server"/><br><br>Select your employee status: <asp:DropDownList id="ddLStatus" runat="server"><asp:ListItem> White Collar</asp:ListItem><asp:ListItem> Workhorse</asp:ListItem></asp:DropDownList><p><asp:Button id="btnCompute" runat="server"text="Compute Pay" onclick="computePay"/><br><br><asp:Label id="lblPayMsg" runat="server"/><asp:Label id="lblPay" runat="server"/><br><asp:Label id="lblInsMsg" runat="server"/><asp:Label id="lblInsCharge" runat="server"/><br><asp:Label id="lblFacilityMsg" runat="server"/><asp:Label id="lblFacilityCharge" runat="server"/><br><asp:Label id="lblBonusMsg" runat="server"/><asp:Label id="lblBonusPay" runat="server"/><br><asp:Label id="lblNetWageMsg" runat="server"/><asp:Label id="lblNetWage" runat="server"/></form></body></html><script language=vb runat="server">Sub computePay (Sender As Object, E As EventArgs)Dim h, r, g, netWage, insCharge As SingleDim facilityCharge, bonus As Singleh=CSng(txtH.Text)r=CSng(txtR.Text)lblPayMsg.Text="Your Gross Wage is : "g=h * r ' Compute gross wage' Compute Insurance DeductionIf rbtnNoCov.Checked TheninsCharge=0 ' No Insurance ChargeElseinsCharge=40.00End If' Compute Facility Usage ChargefacilityCharge=0If chkPark.Checked ThenfacilityCharge += 15 ' ParkingEnd IfIf chKPool.Checked ThenfacilityCharge += 10 ' Swimming PoolEnd If' Compute BonusSelect Case ddlStatus.SelectedIndexCase 0bonus=100.00 ' White CollarCase 1bonus= 65.88 ' WorkhorseEnd SelectnetWage=g + bonus - insCharge – facilityCharge' Display ResultslblPay.Text=FormatCurrency(g)lblInsMsg.Text="Your Insurance Deduction is :"lblInsCharge.Text=FormatCurrency(insCharge)lblFacilityMsg.Text= "Your Facility Usage Charge is :"lblFacilityCharge.Text=FormatCurrency(facilityCharge)lblBonusMsg.Text="Your Bonus Pay is : "lblBonusPay.Text=FormatCurrency(bonus)lblNetWagemsg.Text="Your Net Wage is :"lblNetWage.Text=FormatCurrency(netWage)End Sub</script>

Using the ListControl Abstract ClassA number of basic Web controls have been derived from the ListControl abstractclass.These are CheckBoxList, DropDownList, ListBox, and RadioButtonList. Theirusages and characteristics follow a common pattern. If warranted, each of these canbe used as a container control. For example, a CheckBoxList control can contain acollection of CheckBoxes.We can set their AutoPostBack properties to true to triggerpostbacks on their SelectedIndexChanged events. Each of them has a property namedItem.Count that contains the number of items in the collection.The Items(i).Selectedproperty can be used to check if the user has selected an item in the list. Finally, theItems(i).Text property enables us to extract the text of the selected item.To demonstrate the identical behavior of the controls in the ListControlfamily, we will develop a simple example.We will load a ListBox control withcertain flower names, a RadioButtonList control with some state names, and aCheckBoxList control with some facility names. Just for demonstration purposes,we will set the AutoPostBack properties of all of these controls to true. On click ofeach of these controls, we will display the user’s selections.We will enable theuser to select multiple entries from our list box. Of course, by default, theCheckBoxList control will enable the user to select more than one entry.Thecomplete application, when displayed in IE, will appear as shown in Figure 3.42.We have developed this application using VS.Net.The design time view ofthe form is shown in Figure 3.43. As you can observe from this figure, we haveapplied a certain amount of styling in the controls.The VS.Net created a virtual directory and generated a Web application for thiswork. It has also generated two major files:WebForm1.aspx and WebFrom1.aspx.vb(the code-behind). It has compiled the WebForm1.aspx.vb to a .dll file and has savedit in the bin directory automatically. To test the application,you will need to copy the TestingWebControls directory to your Inetpub\wwwrootdirectory.Then use the following URL to display the page in your browser:http://localhost/TestingWebControls/WebForm1.aspx.

Figure 3.42 Displaying and Manipulating Various List Controls

Figure 3.43 Design Time View of the ListControl Demonstration in VS.Net(image placeholder)We will not reproduce the entire code here. In short, we have created threelist controls.The RepeatDirection attribute of the CheckBoxList control has been setto “Horizontal” to align the check boxes horizontally.A truncated version of theWebForm1.aspx file as generated by VS.Net is shown in Figure 3.44.

Figure 3.44 Truncated Code Listing for WebForm1.aspx File: VS.NET

<%@ Page Language="vb" AutoEventWireup="false"Codebehind="WebForm1.aspx.vb"Inherits="TestingWebControls.WebForm1"%><body MS_POSITIONING="GridLayout"><form id="Form1" method="post" runat="server"><asp:RadioButtonList id="rblStates" style="Z-INDEX: 103; LEFT: 22px;POSITION: absolute; TOP: 69px" runat="server" AutoPostBack="True"Width="93px" Height="77px" BorderStyle="Ridge"BorderColor="#E0E0E0"></asp:RadioButtonList><asp:CheckBoxList id="cblServices" style="Z-INDEX: 104; LEFT: 21px;POSITION: absolute; TOP: 154px" runat="server" AutoPostBack="True"Width="200px" Height="35px" BorderStyle="Inset" RepeatDirection="Horizontal" BorderColor="#E0E0E0"></asp:CheckBoxList>--- --- Similar Code for the asp:ListBox id="lstFlowers" --- ---<asp:Label id="lblState" style="Z-INDEX: 105; LEFT: 134px; POSITION:absolute; TOP: 87px" runat="server" Width="66px" Height="19px"Font-Bold="True" Font-Italic="True"></asp:Label>--- --- Similar Codes for other Labels --- ---</form></body>

In the WebForm1.aspx.vb code-behind file, we have loaded all of theListControls in the Page_Load event. In the appropriate events of these controls, weincluded the instructions to display the selections in respective labels.The usermay select more than one entry in the CheckBoxList. Hence, we used a loop toiterate through each of the items. If the item was selected, we included its text inthe output. Identical procedures were used to display the selected values in thelist box. A truncated version of the relevant code for WebForm1.aspx.vb file isshown in Figure 3.45.

Figure 3.45 Partial Listing of WebForm1.aspx.vbPrivate Sub Page_Load(ByVal sender As System.Object, ByVal e As _System.EventArgs) Handles MyBase.Load'Put user code to initialize the page hereIf Not Page.IsPostBack Then' Load the CheckBoxListcblServices.Items.Add(New ListItem("Golf"))cblServices.Items.Add(New ListItem("Parking"))cblServices.Items.Add(New ListItem("Pool"))' Load the RadioButtonListrblStates.Items.Add(New ListItem("Alabama"))rblStates.Items.Add(New ListItem("Kentucky"))rblStates.Items.Add(New ListItem("Ohio"))' Load ListBoxlstFlowers.Items.Add(New ListItem("Tulip"))lstFlowers.Items.Add(New ListItem("Poppy"))lstFlowers.Items.Add(New ListItem("Iris"))End IfEnd SubPrivate Sub rblStates_SelectedIndexChanged(ByVal sender As _System.Object, ByVal e As System.EventArgs) Handles _rblStates.SelectedIndexChangedlblState.Text=rblStates.SelectedItem.TextEnd SubPrivate Sub cblServices_SelectedIndexChanged(ByVal sender As _System.Object, ByVal e As System.EventArgs) Handles _cblServices.SelectedIndexChangedDim i As IntegerlblService.Text=" "For i=0 To cblServices.Items.Count - 1If cblServices.Items(i).Selected ThenlblService.Text += cblServices.Items(i).Text + " "End IfNextEnd Sub' Similarly, develop the SelectedIndexChanged event procedure for the' other controls.

Web Studyaspnet.blogspot.com Babyneed.blogspot.com

ASP.Net Web Developer Guide

Tuesday, March 21, 2006

Using Labels, TextBoxes, RadioButtons, CheckBoxes, and DropDownLists (Chapter3)

0 Comments: