asp:feature
LANGUAGES: ALL
ASP.NET VERSIONS: 2.0
In Control
New Web Server Controls in ASP.NET 2.0
By Wei-Meng Lee
The next version of Visual Studio.NET, Visual Studio 2005, promises a lot of excitement for developers on the Windows platform. Currently in Beta 1, Visual Studio 2005 is targeted to be launched in the first half of 2005. Among the many enhancements made to the tool and one of the eagerly awaited technologies is the new ASP.NET 2.0 for Web development.
According to Microsoft, ASP.NET 2.0 will increase developers productivity by vastly reducing the amount of code you need to write; in some areas, they claim the reduction can be as much as 70%.
One of the most visible areas of improvements in ASP.NET 2.0 is the addition of several new Web server controls. Based on feedback from developers, Microsoft designed these controls to make your life as a developer easier. For example, instead of writing your own logic to implement image maps, you can now use the new ImageMap control to display an image map.
These new controls can be broadly classified into the following categories:
1) Standard
2) Data
3) Security
4) Site Map
5) Web Parts
This article will cover the new controls in the Standard category; in particular, the FileUpload, ImageMap, and TreeView controls.
FileUpload Control
The FileUpload control contains a textbox and button control that allows a user to select a file to upload to the server. To see how it works, create a new Web site project using Visual Studio 2005 (Beta 1, at the time of writing).
First, add a new Web form to the project and name it Upload.aspx. Populate the form with the controls shown in Figure 1: Image, Label, FileUpload, and Button. Then, double-click the Upload button and enter the code shown in Figure 2.
Figure 1: Populating the form with
the various controls.
Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
' get the application path
Dim imagePath As String =
Request.PhysicalApplicationPath
' uploads to a special upload folder
imagePath += "Images\"
If FileUpload1.HasFile Then
' verify if there is file to upload
' ensure size if below 1MB
If FileUpload1.PostedFile.ContentLength <<= 1048576 Then
imagePath += FileUpload1.FileName
' existing file will be overwritten
FileUpload1.SaveAs(imagePath)
Response.Write("Photo uploaded successfully!")
Image1.ImageUrl = "Images\" & FileUpload1.FileName
Else
Response.Write("File size exceeds 1MB.")
End If
Else
Response.Write("No file to upload")
End If
End Sub
Figure 2: Double-click the Upload button to enter this code.
Basically, you use the PhysicalApplicationPath property (from the Request object) to get the physical path of the Web application. You then check to see if there is a file ready to be uploaded to the server. If it is ready to upload, you have to check the size of the file. This is to prevent malicious users from uploading really large files, thereby crashing your Web server. Finally, you use the SaveAs method to save the uploaded file. The saved file is then used as the image for the Image control. Note that the ImageURL property of the Image control takes in a URL, not a physical path. Figure 3 shows the FileUpload control in action.
Figure 3: Using the FileUpload
control.
ImageMap Control
Another new and useful control in ASP.NET is the ImageMap control. Modern Web sites use image maps to allow users to click on sections of an image to navigate to another part of the site, or simply to register an action. The new ImageMap control allows you to create image maps easily and painlessly.
To use the ImageMap control, add a new page to your project and name it ImageMap.aspx. Drag-and-drop the ImageMap control onto the form and set it to an image. I used a map of Australia, which is saved in the Images folder of the project (see Figure 4).
Figure 4: Using the ImageMap control
(map of Australia
taken from Microsoft Encarta 2005).
To define clickable regions (known as hotspots), switch to Source view and add the definitions for the ImageMap control, as shown in Figure 5.
ImageUrl="~/Images/MapofAustralia.jpg" OnClick="ImageMap1_Click"> HotSpotMode="PostBack" X="143"
Y="218" Radius="60" PostBackValue="WesternAust" AlternateText="Western
Australia" > HotSpotMode="Navigate" Left="225"
Top="92" Right="353"
Bottom="159" NavigateUrl="NorthTerritory.aspx" > HotSpotMode="PostBack" Coordinates="449,260,395,283,410,349,501,314" PostBackValue="NewSouthWales" AlternateText="New
South Wales">
Figure 5: Adding definitions for three hotspots in the ImageMap control.
The code in Figure 5 defines three hotspots:
- A circle hotspot with a point (x and y coordinates) and a radius
- A rectangle hotspot with two points
- A polygon hotspot with four points
Tip: Load the image in Paint and position the cursor at the point you want and note the coordinates at the bottom of the window. Figure 6 shows the graphical representation of the three hotspots.
Figure 6: The graphical
representation of the three hotspots.
There are two behaviors you can set when a hotspot is clicked:
- Navigate to a URL (HotSpotMode=Navigate). Another page can be loaded when a hotspot is clicked.
- Perform a postback (HotSpotMode=PostBack). A postback is sent to the server. Useful in cases where you need to perform some action (such as increment a variable) when the user clicks on a hotspot.
You set the hotspot behavior by modifying the HotSpotMode property. The CircleHotSpot uses the PostBack mode to post a value of WesternAust back to the server. To receive the postback value on the server side, service the click event of the ImageMap control:
Sub ImageMap1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
Response.Write("Region selected: " & e.PostBackValue)
End Sub
Figure 7 shows what happens when I click on the Western Australia hotspot.
Figure 7: Clicking on the Western
Australia hotspot.
TreeView Control
The last control I want to discuss is the TreeView control, which displays hierarchical data, such as a table of contents, in a tree structure. If you are familiar with the MSDN site, you likely have an idea of how the TreeView control looks.
To demonstrate how the TreeView control works, let s create a site that displays the contents of a book (using the TreeView control to display the table of contents).
First, add an XML file to the project and name it Book.xml (the contents of this XML file are shown in Figure 8).
URL="booktop.aspx"> URL="PartIMain.aspx"> URL="PartI2.aspx"
/> URL="PartI3.aspx" /> URL="PartI5.aspx" /> URL="PartII.aspx"> URL="PartII1.aspx" /> URL="PartIIIA.aspx" /> URL="PartIIIB.apx" /> URL="PartIIIC.apx" /> URL="PartIV1.aspx"
/> URL="PartIV3.aspx" /> Figure 8: The Book.xml
file. Next, add a master page to your project and populate the
master page as shown in Figure 9. Insert a 2x1 table in the master page and use
an Image control to display the book cover in the left cell. The
ContentPlaceHolder control is located in the right cell. Drag-and-drop a TreeView control and place it under the
book cover. In the Smart Tag of the TreeView control, select In the Data Source Configuration window, select XML File
and click OK. In the next window, specify the Book.xml file as the data file.
Click OK. Back in the Smart Tag of the TreeView control, click Edit
TreeNode Databindings (see Figure 11). Then configure the bindings as shown in
Figure 12. To make the TreeView control look like the MSDN site,
click Auto Format in the Smart Tag and select the MSDN scheme. Also, set the
BackColor property of the TreeView control to Gray (#E0E0E0) in the Properties
window. Finally, add a Button control under the book cover. The Button
control will allow the user to collapse or expand the TreeView control (see
Figure 13). Double-click the Collapse All button and enter the
following code: Sub btnExpandCollapse_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If btnExpandCollapse.Text
= "Expand All" Then btnExpandCollapse.Text = "Collapse All" TreeView1.ExpandAll() Else btnExpandCollapse.Text = "Expand All" TreeView1.CollapseAll() End If End Sub That s it for the master page. Let s now add a new page to
the project and name it PartIIIA.aspx. Remember to check the Select master page
option so that this page can inherit from the master page (see Figure 14). Then
populate the content of the PartIIIA.aspx page as shown in Figure 15. Press [F5] to load the page. The
TreeView control will display the content of the XML file (see Figure 16). If you look back at the Book.xml file, you ll see that the
URL attribute of each element contains a reference to a .aspx page: URL="PartIIIA.aspx" /> URL="PartIIIB.apx" /> URL="PartIIIC.apx"
/> Here, Project A: Currency Converter is linked to
PartIIIA.aspx, which is what is shown in Figure 16. If you add new Web forms to
your project, and they all inherit from the master page (and name them
according to the names defined in the XML file), then clicking on each node in
the TreeView control will load the respective pages. In this article you have seen a preview of some of the new
controls in ASP.NET 2.0. In ASP.NET 2.0, most of the controls are used
declaratively and there is no need to write lengthy code. In fact, this is one
of the major improvements in ASP.NET 2.0. If you haven t yet looked at ASP.NET
2.0, now s the time to start learning about some of the new features that come
with it. Wei-Meng Lee
(Microsoft .NET MVP) is the founder of Developer Learning Solutions (http://www.developerlearningsolutions.com).
He is an established developer and trainer specializing in .NET and wireless
technologies. Wei-Meng speaks regularly at international conferences and has
authored (and co-authored) numerous books on .NET, XML, and wireless
technologies. He writes extensively for the O Reilly Network on topics ranging
from .NET to Mac OS X. He is also the author of Windows
XP Unwired and The .NET Compact
Framework Pocket Guide (both from O Reilly Media, Inc.). Wei-Meng is
currently the Microsoft Regional Director for Singapore. 
Figure 9: Populating the master page. 
Figure 10: Choosing a data source
for the TreeView control. 
Figure 11: Editing the TreeNode
databindings. 
Figure 12: Binding the TreeView
control to the XML file. 
Figure 13: Adding a Button control
to the master page. 
Figure 14: Adding a new form to the
project and inheriting from a master page. 
Figure 15: Populating the content of
PartIIIA.aspx. 
Figure 16: Using the TreeView
control. Conclusion
