Create A Hyperlinked Button

Like the Button Web control, you can use the LinkButton Web control to give your users a way to submit forms. This control looks like a normal hyperlink that a user can click, but it gives you the ability to process the form data by calling a subroutine when the onclick event is detected. This subroutine will run before the user is sent to the page designated in the link.

The LinkButton Web control takes an anchor tag, <a>, and extends its capabilities to function like an HTML input submit button. ASP 3.0 requires programmers to complete extra work to take anchor tags and enable them to submit forms. In ASP.NET, this capability is built in.

CREATE A HYPERLINKED BUTTON

The LinkButton Web control resides on a server form on your ASP.NET page. The LinkButton control is created with the <ASP:LINKBUTTON> tag. Remember that you need to add an id attribute and set the runat attribute to 1 Server1 . To handle the event when the user clicks the link, you should add an attribute for the onclick event. For the function that you call in the onclick event, create the code that processes the form data. When you finish processing the form, you can redirect the user to another page.

You can use the LinkButton control on a page that lets the user move to a second step in a process. To do this, you must open a template file and declare the LinkButton control and set the appropriate attributes and event handlers.

CREATE A HYPERLINKED BUTTON

D Open the

WebWelcomeTemplate.aspx template from the Code Templates directory.

control to the page and have it call the Button_OnClick when the onClick event is fired.

from the Web server.

A message appears.

D Open the

WebWelcomeTemplate.aspx template from the Code Templates directory.

Add a LinkButton Web 0 Save the file and request it Q Click the link.

control to the page and have it call the Button_OnClick when the onClick event is fired.

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 message appears.

WORK WITH WEB CONTROLS

CREATE A GRAPHICAL BUTTON

You can use an image for a button on a form to create an animated button. You can do this if you use an imageButton Web control in combination with some client-side code to create a rollover effect.

The ImageButton Web control will reside on a server form on your ASP.NET page. The ImageButton control is created with the <ASP:iMAGEBUTTON/> tag. As with other HTML and Web controls, set the RUNAT="Server" attribute in the tag. To set the image for the control, set the imageurl to the path and the filename of the image that you wish to display. To create a rollover effect, add the onMouseOver and onMouseOut event handlers. Set onMouseOver to the path and filename of the image you want to display when the user puts their mouse on the image. You should use the onMouseOut event to set the image back to the original image path and filename when the user moves the mouse off the image.

The result of using an imageButton Web control on a form will generate an <input type="image"> tag in the user's browser. This Web control addresses a common Web programming need, the ability to use an image as a button.

CREATE A GRAPHICAL BUTTON

CREATE A GRAPHICAL BUTTON

D Open the

WebWelcomeTemplate.aspx template from the Code Templates directory.

Button_OnClick when the onClick event is fired for the ImageButton Web control.

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

-Q Position your mouse over the stoplight and click.

D Open the

WebWelcomeTemplate.aspx template from the Code Templates directory.

~0 Add a ImageButton Web control to the page.

^0 Set the initial value for the image.

Button_OnClick when the onClick event is fired for the ImageButton Web control.

-0 Add the onMouseOver and onMouseOut event handlers to create the rollover effect.

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

-Q Position your mouse over the stoplight and click.

-■ A green light appears with a continuing message.

QUEST TEXT INPUT

You can use the TextBox Web control to enable a user to type information into a form. Users can type in information such as text, numbers, and dates. You can work with a couple different types of text boxes, including a single-line text box, a multiline text box, and a password text box.

The TextBox Web control resides on a server form on your ASP.NET page. You can create the TextBox control with the <asp: textbox /> tag. As with other HTML and Web controls, set the RUNAT="Server" attribute in the tag. The type of text box is specified by setting the textmode attribute. The values for textmode are SingleLine, Multiline, and Password.

You can create a simple login page to test for a static password. To do this, first add a single-line text box for the user to type his or her login name. Then, add a password text box. To enable users to submit the form, you can add a button which calls a server-side function. In that function, you can check what the user entered in the password box against a value. Depending upon success or failure of the password, you can format an appropriate message to display using a label on the form.

REQUEST TEXT INPUT

REQUEST TEXT INPUT

D Open the

GenericTemplate.aspx template from the Code Templates directory.

L0 Add a Button Web control that calls the SubmitBtn_Click for the onClick event.

-0 Add a Label control for the message.

—0 Add a single-line text box and set the WIDTH attribute to 200 pixels.

° Add a password and set the WIDTH attribute to 200 pixels.

D Open the

GenericTemplate.aspx template from the Code Templates directory.

~~0 Type a heading for the page.

L0 Add a Button Web control that calls the SubmitBtn_Click for the onClick event.

-0 Add a Label control for the message.

—0 Add a single-line text box and set the WIDTH attribute to 200 pixels.

° Add a password and set the WIDTH attribute to 200 pixels.

Was this article helpful?

0 0

Post a comment