Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with some Server Controls in ASP.Net (For beginners)

ASP.Net provides specialised controls to acheive special tasks. In this article we will discuss some of them.

Table, TableRow & TableCell

Tables arrange data in a grid format. HTML provides a <table> to create tables. <tr> is used to create rows and <td> to create table cells. Likewise ASP.Net provides a table control to create grids. It can be used to show static data on a page. However the major difference is that the table can be populated programmatically at run time. Table rows and table cells can be added at run time. The server control can be added using an <asp:Table> to your page. The table contains a RowCollection property, which is a collection of TableRow controls. Rows can be added to this collection. Tablerow in turn contains a Cells collection property which represents a single tablecell. Cells can be added to this property.

The Table,TableRow and TableCell inherit from the WebControl class. So the common properties like Font, BackColor and Forecolor is available for usage. However, the table property should be used only when you want to populate the table at run time. For static data it is better to use HTML tables.

Lets have a look at how to add rows and cells to a table.

Listing 1 : Populating a table during run time

For (int i=0; i<2;i++)
TableRow r=  new TableRow();
For (int j=0; j<2;j++)
Tablecell c= new TableCell();
Tc.Text=String.Format(“Row {0}, Cell {1}”, i.ToString(), j.ToString()};
r.Cells.Add(c) ;
Table1.Rows.Add(r) ;

The above code generates the following result.

Result of code above

Figure 1: Result of code above

Note that the BorderWidth property has been used to give a border to the table as well as a table cell.

Image Control

The Image control is used to display an image on the webpage. As with the table control discussed above the Image control should be used only when you need to manipulate its properties at runtime. To display a static image always use an HTML image. In fact the Image control in ASP.Net is rendered as an <img>. The Image control inherits from WebControl class.

The Image control is represented by the tag <asp:Image>. It is a singleton tag which means that there is no content embedded within the opening and closing tags and hence it can close with a />. The image itself is not embedded on the page. When an Image control is encounter the browser sends another request to the image source, downloads it and displays it on the page.

Common properties of the Image control

Let us now have a look at the common properties of the control:

  • ImageUrl: This defines the path to the image. The browser sends a separate request to download it from the path and displays it on the page. This property maps directly to the src attribute of the <img>.
  • ImageAlign: This property sets the alignment of the image with respect to other elements on the page. The value can be set to NotSet, Left, Right, Top, Bottom,Baseline, AbsBottom , AbsMiddle or TextTop.
  • AlternateText: This property is usually used to display a text message when the image cannot be loaded by the browser for any reason. Most browsers show this as the tooltip of the image and this is quite an important factor in accessibility of web pages in case of users with special requirements. As a best practice, for a link image use a message that describes the link as the alternatetext and use a text message which describes the image as the alternatetext in case of content images. This property maps to alt attribute of the <img>.
  • DescriptionUrl: This is another property useful to users with special requirments. It is used to set a url which describes the details of the image in text or audio format. This property maps to longdesc attribute of <img>
  • GenerateEmptyAlternateText: This property has a Boolean value. When set to true it generates alt=”” for the image when it is rendered to the page. From an accessibility point of view any image like a page-divider image should carry this so that nonvisual page readers can simply ignore the image.

Listing 2: How to set the properties of an image programmatically

img1.ImageUrl = "~/images/rose.jpg";
img1.DescriptionUrl = "~/rose.html";
img1.AlternateText="Rose flower";

Here the image img1 is set to load the image rose.jpg from the images folder. The description url is set to rose.html which describes the image and the alternatetext is set to Rose flower.

ImageButton Control

The ImageButton is used to create a clickable image which can be used to perform a postback event. This control generates an <input type=”image”> when rendered to a web page. The ImageButton control is represented by <asp:ImageButton> and is a singleton element. The control inherits from Image control, so all the properties of an Image control discussed in the previous section are available to the ImageButton. In addition to that the ImageButton also has an OnClick event and a OnCommand event just like an <asp:Button>. The second argument of the OnClick event is of the type ImageClickEventArgs which helps to retrieve the x-coordinate and y-coordinate of the user’s click.

The properties of an ImageButton can be set just like the properties of an Image control. The following code listing shows how to handle the OnClick event.

Listing 3: ImageButton OnClick event

protected void imgbutton_Click(object sender, ImageClickEventArgs e)
Imgbutton.AlternateText=String.Format("Clicked at {0},{1}", e.X.ToString(),   e.Y.ToString());

The x and y coordinates of the click can be retrieved as shown above and is used to update the AlternateText property of the ImageButton.

ImageMap Control

The ImageMap control is used to display a clickable image that can be used to post form information back to the web server like an ImageButton control. However it differs from the ImageMap differs from the ImageButton control in that ImageMap allows you to define regions or “hot spots” that cause postback whereas clicking anywhere on an ImageButton causes a postback.

The ImageMap control generates an <img usemap=”#myMap”> element when HTML is rendered. A <map name=”myMap”> element with nested <area> elements is also created. The ImageMap control inherits from Image control. So all the properties of the Image control are available to the ImageMap control as well.

The ImageMap is represented by an <asp:ImageMap> element and ImageUrl property denotes the path of the image. There can be nested hot spot elements – CircleHotspot, RectangleHotSpot and PolygonHotSpot.

The ImageMap control has an OnClick event. The second argument is of the type ImagemapEventArgs which helps in retrieving the PostBackValue of the associated hot spot.

HotSpot classes

A hotspot is a predefined area on an image that can be clicked to perform an action. Hotspots can be created to define areas on an image that is displayed as the ImageControl. You can define overlapping areas but the first hotspot defined takes precedence over the last hotspot defined. The classes that inherit from HotSpot class are CircleHotSpot, RectangleHotSpot and PolygonHotSpot.

HotSpot properties

  • AccessKey: The keyboard shortcut to the hotspot
  • AlternateText: The text that is to be displayed for the HotSpot when the image is unavailable or browser does not display the image. This also becomes the tooltip.
  • TabIndex: The tab inde property of the HotSpot
  • HotSpotMode: The behaviour of the HotSpot when it is clicked. It can be set to NotSet, Navigate, Inactive or PostBack.
  • NavigateUrl: The URL to navigate to when a HotSpot is clicked.
  • PostBackValue: The string passed to the web server and available in the event argument data when the HotSpot is clicked
  • Target: The target window or frame that displays the web page when a hotspot is clicked.

HotSpotMode Property

The HotSpotMode property is used to specify the behaviour of the hotspot when it is clicked. This can be set on the hotpot or the ImageMap. If it is set on both, the value set on the hotspot takes precedence. This means that you can set the HotSpotMode property on the ImageMap control to set a default behavior, but the HotSpotMode of the HotSpot must be set to NotSet to inherit the behavior from ImageMap.

Listing 4: Values of HotSpotMode

Value of HotSpotMode Description
NotSet No behaviour on the hotspot
Navigate A click on hotspot causes the user to navigate to the url specified by NavigateUrl property
PostBackValue Clicking on the hotspot causes a postback to the server. The string specified by PostBackValue on the hotspot is passed to the server and available to the ImageMapEventArgs
Inactive Hotspot does not have any behaviour on click.This is used to create an inactive hotspot region within a bigger region thus creating complex hotspots.You must specify the inactive hotspot before the active hotspot.

FileUpload control

The FileUpload control is used to select and upload a single file to the server. The control displays a textbox and a Browse button. Users can either type a file name and path into the textbox or click the browse button and select a file.

The FileUpload control is represented as an <asp:FileUpload> element. It renders an <input type=”file”> when rendered to browser and is a singleton element. The element does not cause postback to the server. It must be handled by another control like a button. The postback causes the file to be uploaded to the server as posted data.

The file name, size and MIME Type of the file should be examined to determine whether the file should be saved on the server. The SaveAs method of the FileUpload control or the HttpPostedFile can be used to save the file to the server. The file can be saved to any location on the server where you have permissions to create files. By default, the value of requireRootedSaveAsPath of the httpRunTime element ion web.config is set to true which means that an absolute path must be provided to save the file. The path can be obtained by using the MapPath method of HttpServerUtility class and passing the tilde operator(~) which represents application root folder. The maximum size of the file that can be uploaded is determined by the MaxRequestLength attribute of the HttpRunTime configuration element.

The control does not validate the safety of the uploaded files. The file should be checked for the extension and ContentType before the file is saved to the server.

These are some of the specialised ASP.Net server controls. Hope this proves useful. See you next time!

I am a Senior Web Developer from London with over 5years of experience in ASP.NET, HTML, CSS. I am well versed in VB.Net, C# and SQL as well.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login