HTML Server Controls

acceptableseashoreSecurity

Nov 5, 2013 (3 years and 11 months ago)

82 views

HTML Server Controls

ASP.NET

Please see speaker notes for
additional information!

<html>

<head>

<title>Loading a Page</title>

<script runat="server">

Sub Page_Load

linkCIS.HRef="http://www.pgrocer.net/PFGCIS47.html"

End Sub

</script>

</head>

<body>

<form runat="server">

<a id="linkCIS" runat="server">CIS47 web site!</a>

</form>

</body>

</html>

<html>

<head>

<title>Loading a Page</title>


</head>

<body>

<form name="_ctl0" method="post" action="link1.aspx" id="_ctl0">

<input type="hidden" name="__VIEWSTATE" value="dDwtMjExODUwMzk and more… HDW/GWT1g==" />


<a href="http://www.pgrocer.net/PFGCIS47.html" id="linkCIS">CIS47 web site!</a>

</form>

</body>

</html>

Code I wrote .

Code that got generated
and executed.


Output
-

when I
click on the link I
go to the specified
address.

<html>

<head><title>Using a Button HTML Server Control</title>

</head>

<script runat="server">

Sub buttonCIS44(Source As Object, e As EventArgs)


CIS.InnerHtml="You are taking Internet User/Developer"

End Sub

Sub buttonCIS45(Source As Object, e As EventArgs)


CIS.InnerHtml="You are taking Introduction to Java for Internet Developers!"

End Sub

Sub buttonCIS47(Source As Object, e As EventArgs)


CIS.InnerHtml="You are taking Interactive Web Sites!"

End Sub

</script>

</head>

<body style="color:brown; font
-
size:14 pt; font
-
weight:bold">

<h2>Please click a button to get the name of the course</h2>

<form runat="server">

<button id="CIS44" OnServerClick="buttonCIS44"

style="color:green; background
-
color:beige;

height=20;width:75" runat="server">CIS44</button>

<button id="CIS45" OnServerClick="buttonCIS45"

style="color:green; background
-
color:beige;

height=20;width:75" runat="server">CIS45</button>

<button id="CIS47" OnServerClick="buttonCIS47"

style="color:green; background
-
color:beige;

height=20;width:75" runat="server">CIS47</button>

<p id="CIS" runat="server" />

</form>

</body></html>

Describes the buttons on the
form. Note that the color, size
and text on the button are
specified.


<html>

<head><title>Using a Button HTML Server Control</title>

</head>


</head>

<body style="color:brown; font
-
size:14 pt; font
-
weight:bold">

<h2>Please click a button to get the name of the course</h2>

<form name="_ctl0" method="post" action="button.aspx" id="_ctl0">

<input type="hidden" name="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" value="dDwxOTYzNjc5…more code...Ucgz2VeSdEK6pAFw==" />


<script language="javascript">

<!
--


function __doPostBack(eventTarget, eventArgument) {



var theform = document._ctl0;



theform.__EVENTTARGET.value = eventTarget;



theform.__EVENTARGUMENT.value = eventArgument;



theform.submit();


}

//
--
>

</script>

<button language="javascript" onclick="__doPostBack('CIS44','')" id="CIS44" style="color:green; background
-
color:beige;

height=20;width:75">CIS44</button>

<button language="javascript" onclick="__doPostBack('CIS45','')" id="CIS45" style="color:green; background
-
color:beige;

height=20;width:75">CIS45</button>

<button language="javascript" onclick="__doPostBack('CIS47','')" id="CIS47" style="color:green; background
-
color:beige;

height=20;width:75">CIS47</button>

<p id="CIS">You are taking Internet User/Developer</p>

</form>

</body>

</html>

Note that this code is after I clicked on the CIS44 button. When I look at the
code after clicking the CIS47 button, I see the following:

<p id="CIS">You are taking Interactive Web Sites!</p>

<
html>

<head><title>Table</title>

<script runat="server">

Sub runSum(sender As Object, e As EventArgs)

dim r,c

dim tot

for r=1 To 3


for c=0 To 2


tot = tot + int(tableAdd.Rows(r).Cells(c).InnerHtml)


next

next

SUM.InnerHtml = "The total is " & tot

End Sub

</script>

</head>

<body>

<form runat="server">

<table id="tableAdd" border="1" runat="server">


<tr>


<td>&nbsp;First&nbsp;</td><td>&nbsp;Second&nbsp;</td>


<td>&nbsp;Third&nbsp;</td>


</tr>


<tr>


<td>1</td><td>2</td><td>3</td>


</tr>


<tr>


<td>4</td><td>5</td><td>6</td>


</tr>


<tr>


<td>7</td><td>8</td><td>9</td>


</tr>

</table>

<br />

<input type="button" value="Sum" OnServerClick=”runSum" runat="server"/>

<p id=SUM runat="server" />

</form>

</body></html>



<html>

<head><title>Table</title>


</head>

<body>

<form name="_ctl0" method="post" action="table.aspx" id="_ctl0">

<input type="hidden" name="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" value="dDw0NDY2NzY…more data...N9QCixjzFqDSxey32AupKVX4Q==" />


<script language="javascript">

<!
--


function __doPostBack(eventTarget, eventArgument) {



var theform = document._ctl0;



theform.__EVENTTARGET.value = eventTarget;



theform.__EVENTARGUMENT.value = eventArgument;



theform.submit();


}

//
--
>

</script>

<table id="tableAdd" border="1">


<tr>



<td>&nbsp;First&nbsp;</td>



<td>&nbsp;Second&nbsp;</td>



<td>&nbsp;Third&nbsp;</td>


</tr>


<tr>



<td>1</td><ttd>2</td><ttd>3</td>


</tr>


<tr>



<td>4</td><td>5</td><td>6</td>


</tr>


<tr>



<td>7</td><td>8</td><td>9</td>


</tr>

</table>


<br />

<input language="javascript" onclick="__doPostBack('_ctl17','')" name="_ctl17" type="button" value="Sum" />

<p id="SUM">The total is 45</p>

</form>

</body>

</html>

Note the total after the calculation is done.

<html>

<head><title>Flip image</title>

<script runat="server">

Sub choose_image(Sender As Object, e As EventArgs)


CISimg.Src = pickImage.Value

End Sub

</script>

</head>

<body>

<form runat="server">

<select id="pickImage" runat="server">


<option value="CISa.gif">Right side up</option>


<option value="CISb.gif">Upside down</option>

</select>

<input type="submit" runat="server" value="Display image"

OnServerClick="choose_image">

<br /><br />

<img id="CISimg" src="CISa.gif" runat="server" />

</form>

</body>

</html>

This sets up the two options
with id pickImage.

OnServerClick I will
execute the subroutine
called choose_image.

When the subroutine is
executed CISimg.Src is
shown with the value selected
in pickImage.

Initially the right side
image (CISa.gif) is shown.

<html>

<head><title>Flip image</title>

</head>

<body>

<form name="_ctl0" method="post" action="flipimage.aspx" id="_ctl0">

<input type="hidden" name="__VIEWSTATE" value="dDwtMTEyNT…more code...SzQicBL8ulujbTDbA=" />


<select name="pickImage" id="pickImage">


<option selected="selected" value="CISa.gif">Right side up</option>


<option value="CISb.gif">Upside down</option>

</select>

<input name="_ctl1" type="submit" value="Display image" />

<br /><br />

<img src="/pgrocer/controlsbegin/CISa.gif" id="CISimg" />

</form>

</body>

</html>


<html>

<head><title>Flip image</title>


</head>

<body>

<form name="_ctl0" method="post" action="flipimage.aspx" id="_ctl0">

<input type="hidden" name="__VIEWSTATE" value=”more code...Pjs+Wha7FMoCrlXmFgcmxFpdkNa9iM4=" />


<select name="pickImage" id="pickImage">


<option value="CISa.gif">Right side up</option>


<option selected="selected" value="CISb.gif">Upside down</option>

</select>

<input name="_ctl1" type="submit" value="Display image" />

<br /><br />

<img src="/pgrocer/controlsbegin/CISb.gif" id="CISimg" />

</form>

</body>

</html>


<html>

<head><title>Flip image</title>

<script runat="server">

Sub choose_image(Sender As Object, e As EventArgs)


If right.Checked=True then


CISimg.Src = "CISa.gif"


else


CISimg.Src = "CISb.gif"


end if

End Sub

</script>

</head>

<body>

<form runat="server">

<input id="right" name="flip" type="radio" runat="server">Right side up</input>

<br />

<input id="upside" name="flip" type="radio" runat="server">Upside down</input>

<input type="button" runat="server" value="Display image"

OnServerClick="choose_image">

<br /><br />

<img id="CISimg" src="CISa.gif" runat="server" />

</form>

</body>

</html>

This code sets up two radio buttons to use to determine
whether you want to see the image right side up or upside
down. When executed the subroutine checks to see if the
first button with id=right is checked if so the image is
displayed right side up, else it is displayed upside down.



<html>

<head><title>Flip image</title>


</head>

<body>

<form name="_ctl0" method="post" action="flipimage1.aspx" id="_ctl0">

<input type="hidden" name="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" value="dDwxNTQzNj…more code...8kLuZp+rbfzlQBakC+ZQiYmmGE=" />


<script language="javascript">

<!
--


function __doPostBack(eventTarget, eventArgument) {



var theform = document._ctl0;



theform.__EVENTTARGET.value = eventTarget;



theform.__EVENTARGUMENT.value = eventArgument;



theform.submit();


}

//
--
>

</script>


<input value="right" name="flip" id="right" type="radio" checked="checked" />Right side up</input>

<br />

<input value="upside" name="flip" id="upside" type="radio" />Upside down</input>

<input language="javascript" onclick="__doPostBack('_ctl1','')" name="_ctl1" type="button" value="Display image" />

<br /><br />

<img src="/pgrocer/controlsbegin/CISa.gif" id="CISimg" />

</form>

</body>

</html>