ASP.
NET
Web Server Controls
The Label Server Control
• The Label server control is used to display text
in the browser.
• <asp:Label ID=”Label1” Runat=”server”
Text=”Hello World” />
Programmatically providing text to the
Label control
• Label1.Text = “Hello ASP.NET”;
Using the Label server control to
provide hot-key functionality
<%@ Page Language=”VB” %>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Label Server Control</title>
</head>
<body>
<form id=”form1” runat=”server”>
<p>
<asp:Label ID=”Label1” Runat=”server” AccessKey=”N”
AssociatedControlID=”Textbox1”>User<u>n</u>ame</asp:Label>
<asp:Textbox ID=”TextBox1” Runat=”server”></asp:Textbox></p>
<p>
<asp:Label ID=”Label2” Runat=”server” AccessKey=”P”
AssociatedControlID=”Textbox2”><u>P</u>assword</asp:Label>
<asp:Textbox ID=”TextBox2” Runat=”server”></asp:Textbox></p>
<p>
<asp:Button ID=”Button1” Runat=”server” Text=”Submit” />
</p>
</form>
</body>
</html>
The Literal Server Control
• The Literal server control works very much like the
Label server control.
• This control was always used in the past for text that you
wanted to push out to the browser, but keep unchanged in
the process (a literal state).
• <asp:Literal id="Literal1" Text="Text" runat="server"/>
• <html>
• <head>
• </head>
• <body>
• <form runat="server">
• <h3>Literal example</h3> <asp:Literal
id="Literal1" Text="Hello World!!"
runat="server"/>
• </form>
• </body> </html>
The TextBox Server Control
• One of the main features of Web pages is to offer forms
that end users can use to submit their information for
collection.
• The TextBox server control is one of the most used
controls in this space.
• You can also set the property to MultiLine or Password.
<asp:TextBox ID=”TextBox1” Runat=”server”> </asp:TextBox>
The TextBox Server Control
• <asp:TextBox
• AccessKey="string"
• AutoCompleteType="None|Disabled|Cellular|Company|Department|
DisplayName|Email|FirstName|Gender|HomeCity|HomeCountryRegion|
HomeFax|HomePhone|HomeState|HomeStreetAddress|HomeZipCode|
Homepage|JobTitle|LastName|MiddleName|Notes|Office|Pager|
BusinessCity|BusinessCountryRegion|BusinessFax|BusinessPhone|
BusinessState|BusinessStreetAddress|BusinessUrl|
BusinessZipCode|Search“
• AutoPostBack="True|False"
• BackColor="color name|#dddddd"
• BorderColor="color name|#dddddd"
• BorderStyle="NotSet|None|Dotted|Dashed
|Solid|Double|Groove|Ridge|
• Inset|Outset"
• BorderWidth="size"
• CausesValidation="True|False"
• Columns="integer"
• CssClass="string"
• Enabled="True|False"
• EnableTheming="True|False"
• EnableViewState="True|False"
• Font-Bold="True|False"
• Font-Italic="True|False"
• Font-Names="string"
• Font-Overline="True|False"
• Font-Size="string|Smaller|Larger|XX-
Small|X-Small|Small|Medium|
• Large|X-Large|XX-Large"
• Font-Strikeout="True|False"
• Font-Underline="True|False"
• ForeColor="color name|#dddddd"
• Height="size"
• ID="string"
• MaxLength="integer"
• OnDataBinding="DataBinding event handler"
• OnDisposed="Disposed event handler"
• OnInit="Init event handler"
• OnLoad="Load event handler"
• OnPreRender="PreRender event handler"
• OnTextChanged="TextChanged event handler"
• OnUnload="Unload event handler"
• ReadOnly="True|False"
• Rows="integer"
• runat="server"
• SkinID="string"
• Style="string"
• TabIndex="integer"
• Text="string"
• TextMode="SingleLine|MultiLine|Password"
• ToolTip="string"
• ValidationGroup="string"
• Visible="True|False"
• Width="size"
• Wrap="True|False"
• />
Using the Focus() Method
• Because the TextBox server control is derived
from the base class of WebControl, one of the
methods available to it is Focus()—a new
method introduced in version 2.0 of ASP.NET.
• The Focus() method enables you to
dynamically place the end user’s cursor in an
appointed form element (not just the TextBox
control
TextBox1.Focus();
Using AutoPostBack
• ASP.NET pages work in an event-driven way. When an action on a
Web page triggers an event, serverside code is initiated.
<%@ Page Language=”C#” %>
<script runat=”server”>
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
Response.Write(“OnTextChanged event triggered”);
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(“OnClick event triggered”);
}
</script>
Using AutoCompleteType
• One of the great capabilities for any Web form is
smart auto-completion. You may have seen this
yourself when you visited a site for the first time.
• As you start to fill out information in a form, a
drop-down list appears below the text box as you
type showing you a value that you have typed in
a previous form.
<asp:TextBox ID=”TextBox1” Runat=”server”
AutoCompleteType=”HomeStreetAddress”></asp:T
extBox>
The Button Server Control
• Another common control for your Web forms
is a button that can be constructed using the
Button server control. Buttons are the usual
element used to submit forms.
protected void Button1_Click(object sender,
EventArgs e)
{
// Code here
}
The CommandName Property
• You can have multiple buttons on your form all working
from a single event. The nice thing is that you can also tag
the buttons so that the code can make logical decisions
based on which button on the form was clicked.
<asp:Button ID=”Button1” Runat=”server” Text=”Button 1”
OnCommand=”Button_Command”
CommandName=”DoSomething1” />
<asp:Button ID=”Button2” Runat=”server” Text=”Button 2”
OnCommand=”Button_Command”
CommandName=”DoSomething2” />
The Button_Command event
protected void Button_Command(Object sender,
System.Web.UI.WebControls.CommandEventArgs e)
{
switch (e.CommandName)
{
case(“DoSomething1”):
Response.Write(“Button 1 was selected”);
break;
case(“DoSomething2”):
Response.Write(“Button 2 was selected”);
break;
}
}
Buttons That Work with Client-Side
JavaScript
• Buttons are frequently used for submitting
information and causing actions to occur on a
Web page.
• Before ASP.NET 1.0/1.1, people intermingled
quite a bit of JavaScript in their pages to fire
JavaScript events when a button was clicked.
The process became more cumbersome in
ASP.NET 1.0/1.1, but now with ASP.NET 2.0, it
is much easier.
BulletedList Server Control
• One common HTMLWeb page element is a
collection of items in a bulleted list. The
BulletedList server control is meant to display
a bulleted list of items easily in an ordered
(using the HTML <ol> element) or unordered
(using the HTML <ul> element) fashion.
A simple BulletedList control
<%@ Page Language=”VB” %>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>BulletedList Server Control</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:BulletedList ID=”Bulletedlist1” Runat=”server”>
<asp:ListItem>United States</asp:ListItem>
<asp:ListItem>United Kingdom</asp:ListItem>
<asp:ListItem>Finland</asp:ListItem>
<asp:ListItem>Russia</asp:ListItem>
<asp:ListItem>Sweden</asp:ListItem>
<asp:ListItem>Estonia</asp:ListItem>
</asp:BulletedList>
</form>
</body>
</html>
BulletStyle attribute
• The BulletedList control also enables you to
easily change the style of the list with just one
or two attributes.
• The BulletStyle attribute changes the style of
the bullet that precedes each line of the list.
• It has possible values of Numbered,
LowerAlpha, UpperAlpha, LowerRoman,
UpperRoman, Disc, Circle, Square, NotSet, and
CustomImage.
FirstBulletNumber attribute
• You can change the starting value of the first
item in any of the numbered styles
(Numbered, LowerAlpha, UpperAlpha,
LowerRoman, UpperRoman) by using the
FirstBulletNumber attribute.
• If you set the attribute’s value to 5 when you
use the UpperRoman setting.
BulletImageUrl attribute
• To employ images as bullets, use the
CustomImage setting in the BulletedList
control. You must also use the BulletImageUrl
attribute in the following manner:
• <asp:BulletedList ID=”Bulletedlist1”
Runat=”server” BulletStyle=”CustomImage”
BulletImageUrl=”~/myImage.gif”>
HiddenField Server Control
• For many years now, developers have been using hidden
fields in their Web pages to work with state management.
• The <input type=”hidden”> element is ideal for storing
items that have no security context to them.
• These items are simply placeholders for data points that
you want to store in the page itself instead of using the
Session object or intermingling the data with the view state
of the page.
• View state is another great way to store information in a
page, but many developers turn off this feature to avoid
corruption of the view state or possibly degradation of
page performance
Working with the HiddenField server
control
<%@ Page Language=”VB” %>
<script runat=”server” language=”vb”>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
HiddenField1.Value = System.Guid.NewGuid().ToString()
End Sub
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>HiddenField Server Control</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:HiddenField ID=”HiddenField1” Runat=”Server” />
</form>
</body>
</html>
FileUpload Server Control
• ASP.NET 2.0 introduces a new FileUpload server
control
• It displays a text box control and a browse button that
allow users to select a file to upload to the server.
• The user can either type the file name and path into
the text box or can select thought the browse button
and select the file.
• The FileUpload control is inherited from the
WebControl class
.aspx file
Uploading Files Using the FileUpload
Control
<%@ Page Language=”C#”%>
<script runat=”server”>
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
try {
FileUpload1.SaveAs(“C:\\Uploads\\” + FileUpload1.FileName);
Label1.Text = “File name: “ +
FileUpload1.PostedFile.FileName + “<br>” +
FileUpload1.PostedFile.ContentLength + “ kb<br>” +
“Content type: “ +
FileUpload1.PostedFile.ContentType;
}
catch (Exception ex) {
Label1.Text = “ERROR: “ + ex.Message.ToString();
}
else
{
Label1.Text = “You have not specified a file.”;
}
Giving ASP.NET Proper Permissions to
Upload Files
• First, right-click the folder into which the ASP.NET files should
be uploaded. The Properties dialog for the selected folder
opens.
• Click the Security tab to make sure the ASP.NET Machine
Account is included in the list and has the proper permissions
to write to disk.
• If you don’t see the ASP.NET Machine Account in the list of
users allowed to access the folder, add ASP.NET by clicking the
Add button and entering ASPNET (without the period) in the
text area provided
• Click OK, and you can then click the appropriate check boxes
to provide the permissions needed for your application.
