Action  - Processing User Input


Action! – Processing User Input

So far in this chapter we've seen the "lights" (making pages look good), and the "camera" (capturing information), so now it's time to take "action". This is where we are going to look at the controls that allow the user to submit information. There are several ways we can implement this behavior; buttons, links, and images. All three can act like buttons in their action, and give us the flexibility of making our interface look how we want it, rather than it being constrained by the controls.

While customizing your interface is worthwhile, there are traps that are easy to fall into. For example, we know what a Button is because it looks like a button. That may seem obvious, but having an image as a button can be very confusing for the user if they don't expect the image to be a button. This is called affordance – the design characteristics that convey the correct use of an object. We see it in real life all of the time – knobs are round and turn, door handles like a lever give implicit indication of how they work, light switches go up and down, and so on. The same idea applies to our interface. Let's look at three different ways of getting user feedback.

Button Controls

There are three types of button control, all providing the ability to send information back to the server. These are:

  • Button – This is a standard button, and is useful for interfaces that want to look like standard forms.

  • LinkButton – This is a link that behaves like a button (or a button that looks like a link, depending upon your perspective!). It's useful for situations where you need a button, but want it to look like text.

  • ImageButton – This is a button that looks like an image, and is useful for interfaces that are more graphical in nature, or don't want the 3D look of buttons.

Which one you use depends on what look you are aiming for. For example, consider the previous mailing list example. What would happen if we use an ImageButton instead of a Button?

Try It Out—The ImageButton Control

  1. Open MailingList.aspx.

  2. Select the Button and delete it.

  3. Drag an ImageButton and drop it in place of the Button you've just deleted.

  4. Copy the Register.gif image file from the samples directory, and put it in your Images directory.

  5. Set the ImageURL property of the ImageButton to Images/Register.gif.

  6. Double-click the ImageButton to view the code.

  7. Copy the existing button code from the old Button1_Click procedure and place it in the new ImageButton1_Click procedure. You might want to tidy the code up by deleting the old Button1_Click procedure completely, although this isn't 100% necessary.

  8. Save the file and run it:

    click to expand

Notice how instead of the button we have a nice looking image. Clicking this has the same result as a button, but we now have control over the appearance of our button.

How It Works

There's not much to tell here – in action, the ImageButton is exactly the same as a Button, so you don't have to learn anything new. The only difference you might have noticed is that the code line starts with:

Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs)

instead of this for the Button:

 Sub Button1_Click(sender As Object, e As EventArgs) 

This is not something you need to understand just yet, but it's worth mentioning, as they do look different, even though they behave the same.

You can use the ImageButton in any place that you'd use a button. For example, consider this extract from the Wrox Press home page:

click to expand

The buttons for Go and Find a Book are both ImageButton controls, as standard buttons wouldn't look as good in this context.

The LinkButton Control

Let's now look at the LinkButton and see how that differs from the other button controls. We won't use the same example as before, since this doesn't improve the interface. For example, consider the register button as a link button:

click to expand

Well, it looks OK, but it's not great. And it certainly doesn't look as good as the image. So, why, and when, should we use a LinkButton? One place where they are used with great effect is in tables full of data, where you want some data to be a button, or in a menu where you want to show text and not images.

Don't confuse the LinkButton with a standard HTML hyperlink. Although they look the same, they work very differently. The HTML hyperlink jumps to another page, whereas the LinkButton acts like a button and sends us back to the same page. This is explained in more detail in the section at the end of the chapter, where we look at events.

Try It Out—The LinkButton Control
  1. Create a new ASP.NET Page called LinkButton.aspx.

  2. From the HTML menu insert an HTML Table with 1 row and 3 columns. Change the Height to 20 then click OK.

  3. Drag a LinkButton control into each of the table cells. Change the Text properties to Item 1, Item 2, and Item 3 respectively.

  4. Add a Label control underneath the HTML table. The page should look like this:

    click to expand

  5. Double-click each LinkButton control, switching back from Code view to Design view each time.

  6. Now add the following highlighted lines of code:

    Sub LinkButton1_Click(sender As Object, e As EventArgs)  Label1.Text = "This is item 1" End Sub Sub LinkButton2_Click(sender As Object, e As EventArgs)  Label1.Text = "Some stuff about item 2" End Sub Sub LinkButton3_Click(sender As Object, e As EventArgs)  Label1.Text = "And now onto item 3" End Sub
  7. Save the file, run it and try clicking the links:

    click to expand

How It Works

In action, the LinkButton works just the same as other buttons; the only difference is in its appearance, in that it just displays text. In reality, however, this control is different from the other button controls as it relies upon client-side scripting. Client-side scripting is code that runs on the client, within the browser. This allows you to run code without sending anything back to the server to be processed by ASP.NET. Some of the validation controls (more on those a little later), use client-side scripting to validate user input within the browser – this gives a much more responsive page.

The LinkButton in Action

Two places where the LinkButton is used really effectively are in editable grids, and within the Calendar control. For example, take a look at the following screenshots:

click to expand

In the first image of the grid, the first two columns are LinkButton controls. This allows them to look similar to the data they are displayed with – ordinary buttons or images would draw the eye away from the data. In the second image, we see the Calendar control. This is a single control, but each of the days is a LinkButton, as are the two buttons at the top, < and >, that allow moving forward and backwards through the months.




Beginning Dynamic Websites with ASP. NET Web Matrix
Beginning Dynamic Websites: with ASP.NET Web Matrix (Programmer to Programmer)
ISBN: 0764543741
EAN: 2147483647
Year: 2003
Pages: 141

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net