1. ASP Web Server Controls Please use speaker notes for additional information!

2. Label Web Server Control <html> <head> <title>Label Web Server Control</title> </head> <body style="font:14pt arial; background-color:beige; color:brown"> <h1> ASP.NET Label Web Server Control</h1> <form ID="myForm" runat=server> <asp:label id="myLabel" Text="Simple example of a label control!" runat="server" /> </form> </body> </html> My code. Output Results of viewing source. <html> <head> <title>Label Web Server Control</title> </head> <body style="font:14pt arial; background-color:beige; color:brown"> <h1> ASP.NET Label Web Server Control</h1> <form name="myForm" method="post" action="label1.aspx" id="myForm"> <input type="hidden" name="__VIEWSTATE" value="dDw5MjMzODA0MjI7Oz7nX6Hll9is/xmoOmyVBB64bHP3ag==" /> <span id="myLabel">Simple example of a label control!</span> </form> </body> </html>

3. Label Web Server Control <html> <head><title>Testing the Label Web Server Control</title> <script runat="server"> Sub Page_Load lblHeader.Text="Testing the Label Web Server Control" lblDate.Text="Today is: " & now() End Sub </script> <html> <body> <h1 align=center>ASP.NET</h1> <form runat="server"> <h2 align=center><asp:label id="lblHeader" runat="server" /></h2> <h3 align=center><asp:label id="lblDate" runat="server" /></h3> </form> </body> </html>

4. <html> <head><title>Testing the Label Web Server Control</title> <script runat="server"> Sub Page_Load lblHeader.Text="Testing the Label Web Server Control" lblDate.Text="Today is: " & now() End Sub </script> <html> <body> <h1 align=center>ASP.NET</h1> <form runat="server"> <h2 align=center><asp:label id="lblHeader" runat="server" /></h2> <h3 align=center><asp:label id="lblDate" runat="server" /></h3> </form> </body> </html> My code is shown here. The output is shown here. When you click on view source, you see the code below. <html> <head><title>Testing the Label Web Server Control</title> <html> <body> <h1 align=center>ASP.NET</h1> <form name="_ctl0" method="post" action="label2.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwxM…more data...Hz4GuNM6guGY=" /> <h2 align=center><span id="lblHeader">Testing the Label Web Server Control</span></h2> <h3 align=center><span id="lblDate">Today is: 6/24/2003 4:56:55 PM</span></h3> </form> </body> </html>

5. Label Web Server Control <html> <head><title>Testing the Label Web Server Control</title> <script runat="server"> Sub Page_Load(sender As Object, e As EventArgs) lblHeader.Text="Testing the Label Web Server Control" lblDate.Text="Today is: " & now() End Sub </script> <html> <body> <h1 align=center>ASP.NET</h1> <form runat="server"> <h2 align=center><asp:label id="lblHeader" runat="server" /></h2> <h3 align=center><asp:label id="lblDate" runat="server" /></h3> </form> </body> </html>

6. Button & Textbox Web Server Controls <html> <head> <title>Textbox Web Server Control</title> <script runat="server"> Sub NameSub(sender As Object, e As EventArgs) lblGreet.text = "Hi, " & txtFst.text & " " & txtLast.text End Sub </script> </head> <body style="font: 12pt arial"> <h1 align=center>ASP.NET</h1> <h2 align=center>Textbox Web Server Control</h2> <form ID="NameForm" runat="server"> First Name <asp:TextBox id=txtFst ForeColor="blue" runat="server" /> Last Name <asp:TextBox id=txtLast ForeColor="red" runat="server" /> <asp:Button Text="Submit" OnClick="NameSub" runat="server" /> <asp:Label id=lblGreet ForeColor="green" runat="server" /> </form> </body> </html>

7. <html> <head> <title>Textbox Web Server Control</title> </head> <body style="font: 12pt arial"> <h1 align=center>ASP.NET</h1> <h2 align=center>Textbox Web Server Control</h2> <form name="NameForm" method="post" action="textbox1.aspx" id="NameForm"> <input type="hidden" name="__VIEWSTATE" value="dDwxMzQ2M… more code...Q0W2al2/nSpeg=" /> First Name <input name="txtFst" type="text" value="Susan" id="txtFst" style="color:Blue;" /> Last Name <input name="txtLast" type="text" value="Ash" id="txtLast" style="color:Red;" /> <input type="submit" name="_ctl0" value="Submit" /> <span id="lblGreet" style="color:Green;">Hi, Susan Ash</span> </form> </body> </html>

8. List before I checked anything. List after I checked the three components of my sentence.

9. Now I clicked The dog and the sentence got reformed starting with the first clicked element and moving sequentially through the last clicked item. Here I unclicked the horse and you can see the sentence is simply jumped over the fence.

10. <html> <head><title>Make sentences using List Items</title> <script runat="server"> Sub makeSentence(sender As Object, e As EventArgs) dim ct mySentence.Text="<p>Your sentence: </p>" for ct =0 to phrases.Items.Count-1 if phrases.Items(ct).Selected then mySentence.Text=mySentence.Text & " " & phrases.Items(ct).Text end if next End Sub </script> <script runat="server"> Sub clear(Source As Object, e As EventArgs) dim pt for pt = 0 to phrases.Items.Count-1 if phrases.Items(pt).Selected then phrases.Items(pt).Selected = False end if next mySentence.Text="" End Sub </script> </head> The mySentence structure is a paragraph that says Your sentence: followed by the sentence I put together. Each time this is executed, it checks all of the check boxes and concatenates each box that is checked to the mySentence structure. This code clears by checking to see if the item is checked and if it is setting it to false. Obviously, I did not need to do the check, I could have just set them all to false. Clears the sentence which is made up of the phrase Your sentence in a paragraph followed by the selected elements formed into the mySentence structure.

11. <body> <form runat="server"> <asp:CheckBoxList id="phrases" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="makeSentence" runat="server"> <asp:ListItem>The dog</asp:ListItem> <asp:ListItem>The cat</asp:ListItem> <asp:ListItem>The bird</asp:ListItem> <asp:ListItem>The fish</asp:ListItem> <asp:ListItem>The horse</asp:ListItem> <asp:ListItem>ran</asp:ListItem> <asp:ListItem>flew</asp:ListItem> <asp:ListItem>swam</asp:ListItem> <asp:ListItem>jumped</asp:ListItem> <asp:ListItem>trotted</asp:ListItem> <asp:ListItem>over the fence</asp:ListItem> <asp:ListItem>onto the railing</asp:ListItem> <asp:ListItem>into the rock</asp:ListItem> <asp:ListItem>down the hill</asp:ListItem> <asp:ListItem>into the tree</asp:ListItem> <asp:ListItem>into the cage</asp:ListItem> <asp:ListItem>up the stream</asp:ListItem> </asp:CheckBoxList> <asp:label id="mySentence" runat="server"/> <br /><br /> <asp:Button id="clearButton" Text="Clear" runat="server" OnClick="clear"/> </form> </body> </html> The event OnSelectedIndexChanged causes makeSentence to be executed. This code sets up the elements in the list. The label holds the sentence that was constructed. A clear button is set up. The on click event causes the clearButton sub to be executed.

12. <html> <head><title>Make sentences using List Items</title> </head> <body> <form name="_ctl0" method="post" action="check1.aspx" id="_ctl0"> <input type="hidden" name="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" value="dDwt… more code...jQT1CbMw==" /> <script language="javascript"> <!-- function __doPostBack(eventTarget, eventArgument) { var theform = document._ctl0; theform.__EVENTTARGET.value = eventTarget; theform.__EVENTARGUMENT.value = eventArgument; theform.submit(); } // --> </script> <table id="phrases" border="0"> <tr> <td><input id="phrases_0" type="checkbox" name="phrases:0" onclick="__doPostBack('phrases:0','')" language="javascript" /> <label for="phrases_0">The dog</label></td> </tr> <span id="mySentence"><p>Your sentence: </p> The horse jumped over the fence</span> <br /><br /> <input type="submit" name="clearButton" value="Clear" id="clearButton" /> </form> </body> </html>

13. <body> <form runat="server"> <asp:CheckBoxList id="phrases" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="makeSentence" RepeatColumns=3 RepeatDirection=Vertical runat="server"> <asp:ListItem>The dog</asp:ListItem> <asp:ListItem>The cat</asp:ListItem> <asp:ListItem>The bird</asp:ListItem> <asp:ListItem>The fish</asp:ListItem> <asp:ListItem>The horse</asp:ListItem> <asp:ListItem>The duck</asp:ListItem> <asp:ListItem>The elephant</asp:ListItem> <asp:ListItem>ran</asp:ListItem> <asp:ListItem>flew</asp:ListItem> <asp:ListItem>swam</asp:ListItem> <asp:ListItem>jumped</asp:ListItem> <asp:ListItem>trotted</asp:ListItem> <asp:ListItem>lumbered</asp:ListItem> <asp:ListItem>walked</asp:ListItem> <asp:ListItem>over the fence</asp:ListItem> <asp:ListItem>onto the railing</asp:ListItem> <asp:ListItem>into the rock</asp:ListItem> <asp:ListItem>down the hill</asp:ListItem> <asp:ListItem>into the tree</asp:ListItem> <asp:ListItem>into the cage</asp:ListItem> <asp:ListItem>up the stream</asp:ListItem> </asp:CheckBoxList> <asp:label id="mySentence" runat="server"/> <br /><br /> <asp:Button id="clearButton" Text="Clear" runat="server" OnClick="clear"/> </form> </body> </html> Changed code to get 3 vertical columns. Added elements to the list of items.

15. Table Web Server Control <html> <head><title>Make sentences using List Items</title> </head> <body> <form runat="server"> <asp:Table runat="server" id="flyPrice" BorderWidth=3 CellPadding=5 CellSpacing=5 GridLines="both" HorizontalAlign="Left"> <asp:TableRow> <asp:TableCell>Fare Table</asp:TableCell> <asp:TableCell>From Boston</asp:TableCell> <asp:TableCell>From NY</asp:TableCell> <asp:TableCell>From DC</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To London</asp:TableCell> <asp:TableCell>199</asp:TableCell> <asp:TableCell>189</asp:TableCell> <asp:TableCell>195</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To San Francisco</asp:TableCell> <asp:TableCell>245</asp:TableCell> <asp:TableCell>230</asp:TableCell> <asp:TableCell>295</asp:TableCell> </asp:TableRow> Continued on next slide...

16. <asp:TableRow> <asp:TableCell>To Baku</asp:TableCell> <asp:TableCell>535</asp:TableCell> <asp:TableCell>500</asp:TableCell> <asp:TableCell>490</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To Oslo</asp:TableCell> <asp:TableCell>420</asp:TableCell> <asp:TableCell>380</asp:TableCell> <asp:TableCell>410</asp:TableCell> </asp:TableRow> </asp:Table> </form> </body> </html>

18. <html> <head><title>Table</title> <script runat="server"> Sub getFare(sender As Object, e As EventArgs) dim strFare as string dim intFromIndx as integer dim intToIndx as integer dim objRow as TableRow dim objCell as TableCell intFromIndx = fromCity.SelectedIndex intToIndx = toCity.SelectedIndex objRow = flyPrice.Rows.Item(intToIndx+1) objCell = objRow.Cells.Item(intFromIndx+1) strFare = objCell.Text yourFare.Text="Your fare is: " & strFare End Sub </script> </head> <body> <form runat="server"> <asp:RadioButtonList id="fromCity" runat="server"> <asp:ListItem selected="true">From Boston</asp:ListItem> <asp:ListItem>From NY</asp:ListItem> <asp:ListItem>From DC</asp:ListItem> </asp:RadioButtonList> <asp:RadioButtonList id="toCity" runat="server"> <asp:ListItem selected="true">To London</asp:ListItem> <asp:ListItem>To San Francisco</asp:ListItem> <asp:ListItem>To Baku</asp:ListItem> <asp:ListItem>To Oslo</asp:ListItem> </asp:RadioButtonList> <asp:Table runat="server" id="flyPrice" BorderWidth=3 CellPadding=5 CellSpacing=5 fromCity.Selected Index means to tell which one was selected (0, 1, 2). This works the same with toCity.Selected Index, but there is one more entry. Now I am going to the table with multiple rows (shown on next slide) and use intToIndx +1 because in this table I made the first row a header. After getting the Row, I then get the cell. I then store the text from the objCell as the strFare. Here is where I develop the contents of yourFare which is the id of the label displayed in the next screen.

19. GridLines="both" HorizontalAlign="Left"> <asp:TableRow> <asp:TableCell>Fare Table</asp:TableCell> <asp:TableCell>From Boston</asp:TableCell> <asp:TableCell>From NY</asp:TableCell> <asp:TableCell>From DC</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To London</asp:TableCell> <asp:TableCell>197</asp:TableCell> <asp:TableCell>189</asp:TableCell> <asp:TableCell>195</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To San Francisco</asp:TableCell> <asp:TableCell>245</asp:TableCell> <asp:TableCell>230</asp:TableCell> <asp:TableCell>295</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To Baku</asp:TableCell> <asp:TableCell>535</asp:TableCell> <asp:TableCell>500</asp:TableCell> <asp:TableCell>490</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>To Oslo</asp:TableCell> <asp:TableCell>420</asp:TableCell> <asp:TableCell>380</asp:TableCell> <asp:TableCell>410</asp:TableCell> </asp:TableRow> </asp:Table> <br /><br /> <asp:Button text="Get Fare" OnClick="getFare" runat="server"/> <br /><br /> <asp:label id="yourFare" runat="server"/> </form></body></html> This shows the setup of the table and cells and the data contained. You can see the headers and the data. I know use label to show the id of yourFare which was generated in the OnClick execution of getFare.

20. <html> <head><title>Table</title> </head> <body> <form name="_ctl0" method="post" action="table2.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwtM…more data...z4+Oz4+Oz63vKEAcNkNxJs1870nngntAzXaaQ==" /> <table id="fromCity" border="0"> <tr> <td><input id="fromCity_0" type="radio" name="fromCity" value="From Boston" checked="checked" /><label for="fromCity_0">From Boston</label></td> </tr><tr> <td><input id="fromCity_1" type="radio" name="fromCity" value="From NY" /><label for="fromCity_1">From NY</label></td> </tr><tr> <td><input id="fromCity_2" type="radio" name="fromCity" value="From DC" /><label for="fromCity_2">From DC</label></td> </tr> </table> <table id="toCity" border="0"> <tr> <td><input id="toCity_0" type="radio" name="toCity" value="To London" /><label for="toCity_0">To London</label></td> </tr><tr> <td><input id="toCity_1" type="radio" name="toCity" value="To San Francisco" checked="checked" /><label for="toCity_1">To San Francisco</label></td> </tr><tr> <td><input id="toCity_2" type="radio" name="toCity" value="To Baku" /><label for="toCity_2">To Baku</label></td> </tr><tr> <td><input id="toCity_3" type="radio" name="toCity" value="To Oslo" /><label for="toCity_3">To Oslo</label></td> </tr> </table> <table id="flyPrice" cellspacing="5" cellpadding="5" align="Left" rules="all" border="3" style="border-width:3px;border-style:solid;"> <tr> <td>Fare Table</td><td>From Boston</td><td>From NY</td><td>From DC</td> </tr><tr> <td>To London</td><td>197</td><td>189</td><td>195</td> </tr><tr> <td>To San Francisco</td><td>245</td><td>230</td><td>295</td> </tr><tr> <td>To Baku</td><td>535</td><td>500</td><td>490</td> </tr><tr> <td>To Oslo</td><td>420</td><td>380</td><td>410</td> </tr> </table> <br /><br /> <input type="submit" name="_ctl1" value="Get Fare" /> <br /><br /> <span id="yourFare">Your fare is: 245</span> </form></body></html>