This document provides instructions for a lab exercise on using web server controls in Visual Basic for ASP.NET. It describes how to create a web form with a textbox, button, and label control and write code to transfer the textbox value to the label when the button is clicked. It also demonstrates how to modify the properties of each control and explore additional features like client-side validation, submit behavior, and posting to another page.

1. 1
A Programme Under the compumitra Series
WEB SERVER CONTROLS SET – 2
LAB WORK GUIDE

2. 2
OUTLINE
ControlGroup1VB (in VB) Using Following
Web Server Controls.
 TextBox, Button, Label

3. 3
ControlGroup1VB
Using VB in asp.net
 ASP:TEXTBOX Supports Autocomplete, Autopostback, Single or Multiline Mode
in addition to standard properties related to colors, size, style etc.
 ASP:BUTTON Supports Use of OnClientClick, UseSubmitBehaviour, PostBackUrl
type of activity in addition to usual properties.
 ASP:LABEL Supports programmatically placed content on desired location.
This session will explain you about three asp controls namely Textbox, Button and
Label used simultaneously in the same website page. This helps you to understand
passing of values between controls.

4. InheritanceVB -Web Site Creation-1
From Start Page Click New Website and reach this screen
2. Select 'ASP.NET Empty Web Site'
3. Select Location=File System
4. Click 'Browse..' tab to
select the location where
you want to save your Web
Site
5. click 'OK'
1. Select Language=Visual Basic
 By default Your Web Site shall be saved in the Location- "C:Documents and
SettingsMy DocumentsVisual Studio 2010WebSites." Change it to
"C:Learner<student-id>WebControlsControlGroup1VB" folder

5. ControlGroup1VB -Web Site Creation-2
In the Solution Explorer Window
Select the path -> Right click ->
Add New Item…

6. InheritanceVB -Web Site Creation-3 'Add New Item' dialog box will open
1. Select 'Web Form'
2. Simply Click on
'Add' button

7. 77
ControlGroup1VB -TextBox tool-1
1. Toolbox will appear here. If not
already open, open this using the 'View'
Menu. You may have to right click on
title bar of tool-bar to make it dockable
Your default.aspx template will open
2. Make Sure that the default.aspx is
opened in design view mode.

8. 88
Drag and Drop TEXTBOX
2. Drag and Drop 'TextBox' in the
div area seen in the design view.
ControlGroup1VB -TextBox tool - 2
1. Select the 'TextBox' from
'Standard' Toolbox
Optional Technique is to place the cursor at
appropriate place in design view and then double
click the control from the tool box.

9. 99
ControlGroup1VB – BUTTON Placement
After selection Drag and
Drop 'Button' in div

10. 1010
ControlGroup1VB -LABEL Placement-1
2. Select the 'Label' from
'Standard' Toolbox
1. Press 'Enter' key to bring the
cursor one line below.

11. 1111
ControlGroup1VB -LABEL Placement-2
After selection Drag and
Drop 'Label' here.

12. 1212
ControlGroup1VB -LABEL Properties setting-1
2. Select the Label
1. Then open the
Properties window by
Selecting 'Properties
Window' in 'View' menu
Or By pressing 'F4' Key.

13. 1313
ControlGroup1VB -LABEL Properties setting-2
Set the 'Text' Property equal to Null
(Remove predefined text).

14. 1414
ControlGroup1VB -Go to Default.aspx.vb
Double click on 'Button'

15. 15
ControlGroup1VB -Type Code and Run
Type the "Label1.Text=TextBox1.Text" Between Sub Button1_Click and
End Sub.
And Run Code By pressing 'F5'
Your double click action on previous page has
actually created this code at the back end.

16. 16
ControlGroup1VB -Output
Type any text here, press button to see that text
transferred to label control placed below.
Output on browser
Just Now You completed an exercise where you created a 3
control form that had both client side and server side codes.
This is the power of ASP.NET where client side code and server
side code can be kept in separate files.

17. 1717
ControlGroup1VB -Stop Debugging
Stop Debugging by Selecting
'Stop Debugging' option in
'Debug' menu.

18. 18
ControlGroup1VB Modification Trials –TextBox Property-1
1- Set
'BackColor' = 'Aqua'
'BorderColor' = '#0033cc'
'BorderStyle' = 'Double'
'BorderWidth' = '4px'
2- And see effects
On 'TextBox'.

19. 19
ControlGroup1VB Modification Trials –TextBox Property-2
1- Set 'AutoCompleteType'
= 'DisplayName'
2- And 'TextMode' =
'MultiLine'
3- Then see effects
On 'TextBox'.

20. 20
ControlGroup1VB Modification Trials –Button Property-1
1- Set 'BackColor' = 'Pink'
2- And 'Text' = 'Press Me'
3- Then see effects
On 'Button'.

21. 21
ControlGroup1VB Modification Trials –Button Property-2
1- Set 'Height' = '30px'
And 'Width' = '100px'
2- Then see effects
On 'Button'.

22. 22
ControlGroup1VB Modification Trials –Label Property-1
1- Set 'Font Name' = 'Arial'
2- And 'ToolTip' = 'This
is Output value'

23. 23
ControlGroup1VB Modification Trials –Source view
Press 'Source' tab to see source view
Source code of 'Default.aspx'

24. 24
ControlGroup1VB Modification Trials –Label2
Drag and Drop
another 'Label'
And set 'Text' property = Blank

25. 25
ControlGroup1VB Modification Trials –Default.aspx.vb-2
Then run code and see
Type
'Label1.Text = TextBox1.Text
Label2.Text = " Font of Label1 = " & Label1.Font.ToString()'
in 'Sub Button1_Click' method
Go to 'Default.aspx.vb' page

26. 26
ControlGroup1VB Modification Trials – OnClientClick
 Go to asp:button control and add
onclientclick="MsgBox('Hello')" in 'Default.aspx'. Now type
following script in the Head Section.
<script type="text/javascript">
function MsgBox (textstring) { alert (textstring) }
</script>
Now run and see that a local alert box comes
even when the server side button code is run.
You just learned a client side code in javascript.
Remember that Javascript is not JAVA. Always treat these two languages as entirely
different things.
Javascript is run by a web browser on the computer running the web browser. Java is
a full fledged programming language to develop web applications or to develop
application on any operating system.

27. 27
ControlGroup1VB Modification Trials – UseSubmitBehaviour
 Go to asp:button control source and add UseSubmitBehavior="True"
in 'Default.aspx'.
Now run and see the effect on Chrome/Firefox browser. You will see that the
button will run on pressing ENTER key too. When this is set to "False" the button
will not run on ENTER key. This is because browser's submit behaviour is not getting
activated when it is made false. The behaviour of other browsers may depend on
its settings.
Please note that when you press enter key, the cursor of browser should not be
placed on the corresponding button, else browser will execute the button handler
directly.
We shall discuss submit behaviour in detail at a later point.

28. 28
ControlGroup1VB Modification Trials – PostBackURL
 Go to asp:button control source and add
PostBackUrl="Hyperlink.aspx" in 'Default.aspx'. Also copy your
previous website file default.aspx in webcontrolshyperlink
folder and rename it to hyperlink.aspx in your current website
directory.
Now run and see the effect in browser. You will see that when the button is pressed
it targets you to another URL hyperlink.aspx.
What's so great about reaching another URL with button.
This is actually a ASP.NET way to take data from previous pages. When a link is
reached through PostbackURL, one can read the values of control in the previous
page using the PreviousPage Property. This we shall see in another lab with sample
codes.

29. 29
Ask and guide me at
sunmitraeducation@gmail.com
Share this information with as
many people as possible.
Keep visiting www.sunmitra.com
for programme updates.