Scribd
Upload
52 views20 pages

ASP Web Server Controls: Please Use Speaker Notes For Additional Information!

The document describes how to create sentences using a checkbox list in ASP.NET. It includes code to: 1) Set up a checkbox list with various phrases that can be selected to generate a sentence. 2) Execute a subroutine when the checkbox selection changes to concatenate the selected phrases into a label. 3) Include a clear button that executes a subroutine to deselect all checkboxes and clear the sentence label.

Uploaded by

fallli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
52 views20 pages

ASP Web Server Controls: Please Use Speaker Notes For Additional Information!

The document describes how to create sentences using a checkbox list in ASP.NET. It includes code to: 1) Set up a checkbox list with various phrases that can be selected to generate a sentence. 2) Execute a subroutine when the checkbox selection changes to concatenate the selected phrases into a label. 3) Include a clear button that executes a subroutine to deselect all checkboxes and clear the sentence label.

Uploaded by

fallli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

ASP Web Server Controls

Please use speaker notes for


additional information!
Label
LabelWeb
WebServer
ServerControl
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>
Label
LabelWeb
WebServer
ServerControl
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>
<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> My code is shown here.
<body>
<h1 align=center>ASP.NET</h1>
<form runat="server"> The output is
<h2 align=center><asp:label id="lblHeader" runat="server" /></h2> shown here.
<h3 align=center><asp:label id="lblDate" runat="server" /></h3>
</form>
</body>
</html> 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="dDwxMmore 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>
Label
LabelWeb
WebServer
ServerControl
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>
Button
Button&&Textbox
TextboxWeb
WebServer
ServerControls
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>
<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>
List before I List after I
checked anything. checked the three
components of my
sentence.
Here I unclicked the Now I clicked The
horse and you can dog and the
see the sentence is sentence got
simply jumped over reformed starting
the fence. with the first
clicked element and
moving sequentially
through the last
clicked item.
<html>
<head><title>Make sentences using List Items</title> The mySentence structure
<script runat="server"> is a paragraph that says
Sub makeSentence(sender As Object, e As EventArgs)
dim ct
Your sentence: followed by
mySentence.Text="<p>Your sentence: </p>" the sentence I put together.
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 Each time this is executed, it checks
End Sub all of the check boxes and
</script>
<script runat="server">
concatenates each box that is
Sub clear(Source As Object, e As EventArgs) checked to the mySentence
dim pt structure.
for pt = 0 to phrases.Items.Count-1
if phrases.Items(pt).Selected then This code clears by checking to see if
phrases.Items(pt).Selected = False
end if the item is checked and if it is setting it
next to false. Obviously, I did not need to do
mySentence.Text="" the check, I could have just set them all
End Sub
</script>
to false.
</head>

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.
<body>
<form runat="server">
<asp:CheckBoxList id="phrases" AutoPostBack="True"
TextAlign="Right" OnSelectedIndexChanged="makeSentence"
runat="server">
<asp:ListItem>The dog</asp:ListItem> The event OnSelectedIndexChanged causes
<asp:ListItem>The cat</asp:ListItem> makeSentence to be executed.
<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> This code sets up the elements in the list.
<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> The label holds the sentence that
</asp:CheckBoxList>
<asp:label id="mySentence" runat="server"/> was constructed.
<br /><br />
<asp:Button id="clearButton" Text="Clear"
runat="server" OnClick="clear"/>
</form> A clear button is set up. The on click event
</body> causes the clearButton sub to be executed.
</html>
<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>
<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> Changed code to get 3 vertical
<asp:ListItem>The fish</asp:ListItem>
<asp:ListItem>The horse</asp:ListItem> columns.
<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> Added elements to the
<asp:ListItem>jumped</asp:ListItem>
<asp:ListItem>trotted</asp:ListItem>
list of items.
<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>
Table
TableWeb
WebServer
ServerControl
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...


<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>
<html>
<head><title>Table</title>
<script runat="server"> fromCity.Selected Index means to tell which
Sub getFare(sender As Object, e As EventArgs)
dim strFare as string
one was selected (0, 1, 2). This works the
dim intFromIndx as integer same with toCity.Selected Index, but there is
dim intToIndx as integer
dim objRow as TableRow
one more entry.
dim objCell as TableCell
intFromIndx = fromCity.SelectedIndex
intToIndx = toCity.SelectedIndex
Now I am going to the table with multiple
objRow = flyPrice.Rows.Item(intToIndx+1) rows (shown on next slide) and use intToIndx
objCell = objRow.Cells.Item(intFromIndx+1)
strFare = objCell.Text
+1 because in this table I made the first row a
yourFare.Text="Your fare is: " & strFare header. After getting the Row, I then get the
End Sub
</script>
cell. I then store the text from the objCell as
</head> the strFare.
<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> Here is where I
<asp:RadioButtonList id="toCity" runat="server"> develop the contents
<asp:ListItem selected="true">To London</asp:ListItem>
<asp:ListItem>To San Francisco</asp:ListItem> of yourFare which is
<asp:ListItem>To Baku</asp:ListItem> the id of the label
<asp:ListItem>To Oslo</asp:ListItem>
</asp:RadioButtonList> displayed in the next
<asp:Table runat="server" id="flyPrice" BorderWidth=3 screen.
CellPadding=5 CellSpacing=5
GridLines="both" HorizontalAlign="Left">
<asp:TableRow>
<asp:TableCell>Fare Table</asp:TableCell> This shows the setup of the table and
<asp:TableCell>From Boston</asp:TableCell>
<asp:TableCell>From NY</asp:TableCell>
cells and the data contained. You can
<asp:TableCell>From DC</asp:TableCell> see the headers and the data.
</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> I know use label to show
</asp:TableRow>
</asp:Table> the id of yourFare which
<br /><br /> was generated in the
<asp:Button text="Get Fare" OnClick="getFare" runat="server"/>
<br /><br /> OnClick execution of
<asp:label id="yourFare" runat="server"/> getFare.
</form></body></html>
<html>
<head><title>Table</title>
</head>
<body>
<form name="_ctl0" method="post" action="table2.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwtMmore 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>

You might also like