Nder An Image

You can use the HTMLImage control to have programmatic control over the images on your Web pages. You can use the control to change the properties of the image. For example, you can dynamically change the source of the image so that a graphic can be replaced with another graphic.

You can use the HTMLImage control on your ASP.NET Web pages by adding the id and by setting the runat attribute to Server on the <img> tag. You need to set the SRC attribute that tells the Web browser the location of the image to load. You could do this in the Page_Load event by setting the property programmatically, or you could set the property by adding the SRC attribute in the <image> tag.

There are a number of other attributes that you can set for the HTMLImage control such as the image border size, the width and height of the image, and the alignment of the image. For example, you can have a list of graphics in a drop-down list box. When the user selects a graphic by name and clicks the Apply button, the browser updates the graphic on the page. The initial image that appears is set in the <img> tag when designing the page.

RENDER AN IMAGE

% Untitled - Notepad

-|S|X|

File Edit Format Help

•=HTML> *HEAD>

A

«FONT FACE-'Verdana">

<H3>Welcometo mvlifetimeaoals.com</H3>l

-

Select your goal type:| I—

</FONT> ■e/BODYs-</HTML>

<1

</HEADs

<FONT FACE-'Verdana">

<H3>Welcome to mylifetimeqoals.conWH3> Select your goal type:

cFORM RUNAT-"Server">

«SELECT ID="selectGoallmages" RUNAT="Server">

cOPTION VALUE-'travel gif">TrsweWOPTION> -OPTION VALUE-'career.gif">Career</OPTION> <OPTION VALUE="educational.git">Educational</OPTION> :/SELECT>_

«INPUT TYPE-'Submit" RUNAT="Server" Value="Apply" OnServerClick-'SubmitButton Click"^_

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

B Add a heading for the page.

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

B Add a heading for the page.

Add a message to the user.

Untitled - Notepad

File Edit Format Help

JsJjt]

</HEADs

<FONT FACE-'Verdana">

<H3>Welcome to mylifetimeqoals.conWH3> Select your goal type:

cFORM RUNAT-"Server">

«SELECT ID="selectGoallmages" RUNAT="Server">

cOPTION VALUE-'travel gif">TrsweWOPTION> -OPTION VALUE-'career.gif">Career</OPTION> <OPTION VALUE="educational.git">Educational</OPTION> :/SELECT>_

«INPUT TYPE-'Submit" RUNAT="Server" Value="Apply" OnServerClick-'SubmitButton Click"^_

«IMG ID-'imageGoallmages" SRC-'/vi sualaspdgtnet/ChapterQ4/Cgde/i mages/travel.git" RUNAT-'Server''/^ :/FORM>||

_Q Add a form to the page with a RUNAT attribute set to "Server".

L-0 Add an HTMLSelect control on the page so the user can select a goal type.

□ Add a button on the page for the user to click and use the OnServerClick event to call the SubmitButton_Click function.

LH Add an Image control on the page and set the source for the image control.

You can use the ALT property to display a message when the user places the mouse pointer over the image.

<FORM RUNAT="Server"> <IMG ID="imageGoalImages"

SRC="/visualaspdotnet/Chapter04/Code/images/tr avel.gif"

ALT="Picture of a road and a distant planet earth" RUNAT="Server"/>

To change the size of the image, you can set the WIDTH and HEIGHT properties of the image.

Example:

<FORM RUNAT="Server"> <IMG ID="imageGoalImages"

SRC="/visualaspdotnet/Chapter04/Code/images/tr avel.gif"

HEIGHT="100" RUNAT="Server"/>

You can use the BORDER property to display a border around the image by setting it to a value greater than zero. The default setting of zero displays no border around the image.

Example:

<FORM RUNAT="Server"> <IMG ID="imageGoalImages"

SRC="/visualaspdotnet/Chapter04/Code/images/ travel.gif"

BORDER="2" RUNAT="Server"/> </FORM>

^ Untitled - Notepad

File Edit Format Help

«SCRIPT LANGUAGE-'C#M RUNAT="Server": void SubmitButton Click(Obiect Sender, EventAros e) f

|imageGoallmages.Src-7visualaspdotnet/Chapterü4/Code/i mages/' + selectG|

c/HEADs

«H3>Welcome to mylifetimegoals.com«/H3> Select your goal type:

«FORM RUNAT="Server"> «SELECT ID="selectGoallmages" RUNAT-'Servil -OPTION VALUE-'travel glf'sTraveWt))! «OPTION VALUE-'career.gif">Careen «OPTION VALUE-'educational.gif">Ec «/SELECT»

«INPUT TYPE-'Submit" RUNAT="Server" Valuer OnServerClick-'SubmitButtonjClick" «P/5

Add the SubmitButton_Click function.

'PTION>

ucatlonal«/OPTIONs-

'Apply"

I Set the InnerHTML

property of the span on the form in the Sub.

, Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

■ The Travel graphic appears.

-n Click 0 and select Educational as the goal type.

-± Click the Apply button.

■ The Educational graphic appears.

BUILD A TABLE

You can use the HTMLTable control to dynamically create and modify tables in your ASP pages. You can also use the HTMLTable control to set properties for the table, including the background color, cell spacing and padding, and border size and color.

You can create the table in one of the events like the page_load event, before the page is generated like the Page_Load event. You can place a <table> tag on your page like you would do with an ordinary HtMl or ASP page. To create an HTMLTable control on your ASP.NET page, you need to add the id and runat attributes to the table. As with other HTML controls, you need to set the runat attribute to Server .

When working with the HTMLTable control, you need to work with a couple of other controls, including the object that represents a cell, the HTMLTableCell control, and an object that represents a row, the HTMLTableRow control. It is best to work with these objects as collections. To do this, you can use their respective collection objects, the HTMLTableCellCollection and HTMLTableRowCollection objects.

You can build out a table from an array while the page is loading. You can use the HTMLTable, HTMLTableCell, and HTMLTableRow controls to accomplish this.

BUILD A TABLE

BUILD A TABLE

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

Add a table to the page and set the BORDER attribute equal to 1.

-0 Add the Page_Load function.

'-Q Create and initialize a variable to be a counter for the rows.

° Create and initialize a variable for the number of cells and a variable for the number of rows.

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

Add a heading for the page.

Add a message to the user.

Add a table to the page and set the BORDER attribute equal to 1.

-0 Add the Page_Load function.

'-Q Create and initialize a variable to be a counter for the rows.

° Create and initialize a variable for the number of cells and a variable for the number of rows.

Create and initialize an array for the contents of the table.

Exlr ST You can specify the cell padding, cell spacing, border color, and background color for the table.

Example:

<FORM RUNAT="Server">

<TABLE ID="tableExample" Border=n1" CellPadding=n5" CellSpacing=n0" BorderColor=nBlackn BgColor=n#C0C0C0n RUNAT="Server" />

You can specify a number of properties for the table cells by setting the horizontal and vertical alignment of the cells.

Example:

HtmlTableCell cell = new HtmlTableCell(); cell.Align="Right"; cell.VAlign="Top";

You can use table row properties to format a table with alternating colors for each row.

Example:

HtmlTableRow row = new HtmlTableRow(); if (rowcount%2 = = 1) row.BgColor="#C0C0C0"; rowcount++;

Process each row with a for loop.

E Save the file and request it from the Web server.

Process each row with a for loop.

— Create a new HTMLTableRow for each row.

Process each cell in the row with a for loop.

E Create a new HTMLTableCell for each cell and add the value in the array to the cell.

Q Add the cell to the row.

E Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

-■ A table appears with the contents of your array.

Was this article helpful?

0 0

Post a comment