October 30, 2009 12:09 PM

In Control

New Web Server Controls in ASP.NET 2.0

Wei-Meng Lee

Dev Pro

InstantDoc ID #123379

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.

<asp:ImageMap ID="ImageMap1" Runat="server"

ImageUrl="~/Images/MapofAustralia.jpg"

OnClick="ImageMap1_Click">

<asp:CircleHotSpot

HotSpotMode="PostBack"

X="143" Y="218"

Radius="60"

PostBackValue="WesternAust"

AlternateText="Western Australia" >

</asp:CircleHotSpot>

<asp:RectangleHotSpot

HotSpotMode="Navigate"

Left="225" Top="92"

Right="353" Bottom="159"

NavigateUrl="NorthTerritory.aspx" >

</asp:RectangleHotSpot>

<asp:PolygonHotSpot

HotSpotMode="PostBack"

Coordinates="449,260,395,283,410,349,501,314"

PostBackValue="NewSouthWales"

AlternateText="New South Wales">

</asp:PolygonHotSpot>

</asp:ImageMap>

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).

<?xml version="1.0" encoding="utf-8"?>

<Book>

<Content Title=".NET Compact Framework Pocket Guide"

URL="booktop.aspx">

<Content Title="The .NET Framework and Mobile Devices"

URL="PartIMain.aspx">

<Content Title="Windows Powered Mobile Devices"

URL="PartI2.aspx" />

<Content Title="Tool and Language Support"

URL="PartI3.aspx" />

<Content Title="Debugging the Application"

URL="PartI5.aspx" />

</Content>

<Content Title="User Interface Design"

URL="PartII.aspx">

<Content Title="Using the Windows Forms Controls"

URL="PartII1.aspx" />

<Content Title="Design Considerations for Smartphone

Applications" URL="PartII2.aspx" />

</Content>

<Content Title="Project A: Currency Converter"

URL="PartIIIA.aspx" />

<Content Title="Project B: Book Ordering System"

URL="PartIIIB.apx" />

<Content Title="Project C: Bluetooth Chat"

URL="PartIIIC.apx" />

</Content>

<Content Title="Deploying .NET Compact Framework

Applications" URL="PartIV.aspx">

<Content Title="Packaging CAB Files"

URL="PartIV1.aspx" />

<Content Title="Redistributing the .NET Compact

Framework" URL="PartIV2.aspx" />

<Content Title="Deploying Smartphone Applications"

URL="PartIV3.aspx" />

</Content>

</Book>

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.

Figure 9: Populating the master page.

Drag-and-drop a TreeView control and place it under the book cover. In the Smart Tag of the TreeView control, select <New data source...> (see Figure 10).

Figure 10: Choosing a data source for the TreeView control.

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.

Figure 11: Editing the TreeNode databindings.

Figure 12: Binding the TreeView control to the XML file.

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).

Figure 13: Adding a Button control to the master page.

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).

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.

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:

<Content Title="Project A: Currency Converter"

URL="PartIIIA.aspx" />

<Content Title="Project B: Book Ordering System"

URL="PartIIIB.apx" />

<Content Title="Project C: Bluetooth Chat"

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.

Conclusion

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.

In Control

FileUpload Control

ImageMap Control

TreeView Control

Conclusion

Related Content: