Make Reusable Content Clever

The previous example shows how code can be part of user controls, and you can take this even further. We added a property to the previous user control, allowing us to alter the content. Since the user control is an object we can also add methods. For example, think back to our dice game that we first introduced in Chapter 2. We first started with Label controls for the dice, and then we swapped the labels for images so it looked better. Thinking about what we know of reusable content, wouldn't it be sensible to use this technique for each of the dice? The dice user control could then take care of rolling itself, and displaying the right image.

Let's modify the dice program so that each of the dice is a user control. We'll give it a Roll method, so we can just drop one of our dice onto a page and tell it to roll itself.

Try It Out—Dicing with User Controls

1. Add a new User Control, calling it onedice.ascx.

2. Add an Image to the new page.

3. In Code view add the following:

    Public Function Roll() As Integer  Dim diceValue As Integer  diceValue = Int(Rnd() * 6) + 1  Image1.ImageUrl = "images/" & diceValue.ToString() & ".gif"  Return diceValue End Function 

4. Save the control and close it.

5. Open dice.aspx and delete the existing images used for the dice.

6. Drag two copies of onedice.ascx onto the page, in place of the existing images.

7. Rename these two controls dice1 and dice2.

8. In Code view, change the code that runs when you click the roll dice button. It should now look like this:

    Sub Button1_Click(sender As Object, e As EventArgs)  Dim d1 As Integer  Dim d2 As Integer  d1 = dice1.Roll()  d2 = dice2.Roll()  Label3.Visible = False  If d1 = 1 And d2 = 1 Then  Label5.Text = Label4.Text  If CInt(Label5.Text) > CInt(Label6.Text) Then  Label6.Text = label5.Text  End If  Label4.Text = 0  Label3.Visible = True  Else  Label4.Text = CInt(Label4.Text) + _  d1 + d2  End If End Sub 

9. Save the page and run it.

   

How It Works

Let's first look at the code for the user control, starting with the function:

Public Function Roll() As Integer

Notice that it's a Public function – this is what makes it available to other pages.

Next we roll the dice, using exactly the same code to get the dice number.

  Dim diceValue As Integer   diceValue = Int(Rnd() * 6) + 1 

We then use this dice number as part of the filename for the image to display.

  Image1.ImageUrl = "images/" & diceValue.ToString() & ".gif"

Finally we return the number thrown from the function.

  Return diceValue End Function

The code here is no different from how it was before, except that it's now encapsulated within the dice control. This means that the die is entirely self-contained. Now we can use this die on the page – the only bit of code we need to look at is this:

  d1 = dice1.Roll()   d2 = dice2.Roll()

Remember that when we dropped the dice controls onto our page we renamed them dice1 and dice2. So here, we are just calling the Roll method on each die. There are two dice, and each is rolled independently. We don't have to bother with how the die rolls itself, or how it shows the correct image – we just roll.

This reinforces the concept of reusability. If we suddenly want to change the game so that it uses 12-sided dice, we only have to change the Roll method. The game page itself doesn't need to change. We could also easily add a third die by just dropping another copy of the user control onto the page.