ASP Web Server Controls - Bristol Community College
Download
Report
Transcript ASP Web Server Controls - Bristol Community College
ASP Web Server Controls
Please use speaker notes for
additional information!
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>
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>
<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>
My code is shown here.
<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>
When you click on view source,
The output is
shown here.
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>
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>
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>
<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
checked anything.
List after I
checked the three
components of my
sentence.
Here I unclicked the
horse and you can
see the sentence is
simply jumped over
the fence.
Now I clicked The
dog and the
sentence got
reformed starting
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)
Your sentence: followed by
dim ct
the sentence I put together.
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
Each time this is executed, it checks
next
End Sub
all of the check boxes and
</script>
concatenates each box that is
<script runat="server">
checked to the mySentence
Sub clear(Source As Object, e As EventArgs)
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
the item is checked and if it is setting it
end if
next
to false. Obviously, I did not need to do
mySentence.Text=""
the check, I could have just set them all
End Sub
to false.
</script>
</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">
The event OnSelectedIndexChanged causes
<asp:ListItem>The dog</asp:ListItem>
<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>
was constructed.
<asp:label id="mySentence" runat="server"/>
<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>
<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.
<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...
Table Web Server Control
<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)
one was selected (0, 1, 2). This works the
dim strFare as string
dim intFromIndx as integer
same with toCity.Selected Index, but there is
dim intToIndx as integer
one more entry.
dim objRow as TableRow
dim objCell as TableCell
intFromIndx = fromCity.SelectedIndex
Now I am going to the table with multiple
intToIndx = toCity.SelectedIndex
objRow = flyPrice.Rows.Item(intToIndx+1)
rows (shown on next slide) and use intToIndx
objCell = objRow.Cells.Item(intFromIndx+1)
+1 because in this table I made the first row a
strFare = objCell.Text
yourFare.Text="Your fare is: " & strFare
header. After getting the Row, I then get the
End Sub
cell. I then store the text from the objCell as
</script>
</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>
Here is where I
</asp:RadioButtonList>
<asp:RadioButtonList id="toCity" runat="server">
develop the contents
<asp:ListItem selected="true">To London</asp:ListItem>
of yourFare which is
<asp:ListItem>To San Francisco</asp:ListItem>
<asp:ListItem>To Baku</asp:ListItem>
the id of the label
<asp:ListItem>To Oslo</asp:ListItem>
displayed in the next
</asp:RadioButtonList>
<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>
cells and the data contained. You can
<asp:TableCell>From NY</asp:TableCell>
<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>
the id of yourFare which
</asp:Table>
<br /><br />
was generated in the
<asp:Button text="Get Fare" OnClick="getFare" runat="server"/>
OnClick execution of
<br /><br />
<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="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>