JavaScript Editor JavaScript Editor     JavaScript Debugger

Previous Section Next Section

Main Page

Web User Controls

You also can create Web user controls, which are the Web equivalent of user controls. The process is much like creating and coding a user control; in fact, to show how similar these types of controls are to create, I'll duplicate the previous example now as a Web user control. This new example is WebUserControls on the CD-ROM.

This time, we'll start by creating a new Web application named WebUserControls. Then add a new Web user control to this application by selecting the Project|Add Web User Control menu item, opening the Add New Item dialog you see in Figure 24.6. To accept the default name, WebUserControl1, click OK.

Click To expand
Figure 24.6: The Add New Item dialog.

This adds the new Web user control, as you see in Figure 24.7. The new Web user control's class is WebUserControl1, and at design time, it just looks like a standard Web page. I've added the label we'll use in this control to that page, as you also see in Figure 24.7.

Click To expand
Figure 24.7: Working on a new Web control.

In fact, I can apply the very same code to the Web user control that I used in the user control to support the DisplayColor property, SetText method, and TextModified event, so add this code to the Web user control's code designer now:

Public MustInherit Class WebUserControl1
    Inherits System.Web.UI.UserControl
    Protected WithEvents Label1 As System.Web.UI.WebControls.Label

' Web Form Designer Generated Code ...

    Private LabelColor As Color
    Public Event TextModified(ByVal NewText As String)

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

    Property DisplayColor() As Color
            Return LabelColor
        End Get

        Set(ByVal Value As Color)
            LabelColor = Value
            Label1.BackColor = LabelColor
        End Set
    End Property
    Public Sub SetText(ByVal NewText As String)
        Label1.Text = NewText
        RaiseEvent TextModified(NewText)
    End Sub
End Class

This is where the process for Web user controls differs from Windows user controls, however. You can't compile the Web user control as we could the user control earlier, so you can't add a reference to that control to the main Web application's form. Instead, here's what you do-open the Web application's main form in a form designer, then drag the WebUserControl1.ascx entry from the Solution Explorer onto that form, adding the Web user control, WebUserControl11, to the form as you see in Figure 24.8. Note that because the Web user control has not been compiled, Visual Basic doesn't know what it will look like at run time, so it gives it a generic appearance at design time.

Click To expand
Figure 24.8: Creating a new Web control.

This creates the new Web user control, WebUserControl11, in WebForm1.aspx, like this:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="WebUserControls.WebForm1"%>
<%@ Register TagPrefix="uc1" TagName="WebUserControl1"
Src="WebUserControl1.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <form id="Form1" method="post" runat="server">
<uc1:WebUserControl1 id=WebUserControl11



However, because this control will not actually be compiled until run time, Visual Basic does not automatically add the user control, WebUserControl11, to the "code-behind" file, WebForm1.aspx.vb. To use this control in code, we can declare it in WebForm1.aspx.vb, so add this code to that file now:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents Button1 As System.Web.UI.WebControls.Button
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents WebUserControl11 As WebUserControl1

Now we're ready to use the new control's DisplayColor property, SetText method, and TextModified event. Because the control has not yet been compiled, we can't set properties at design time, so I'll set the DisplayColor property to Aqua when the test application's main Web form loads:

Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
    WebUserControl11.DisplayColor = Color.Aqua
End Sub

Next, as in the UserControls example we saw earlier, I'll add a button (caption: "Click Me") and a text box to the Web application, as you see in Figure 24.8. Now I can use the Web user control's SetText method and TextModified event, just as we did in the UserControls example:

Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
End Sub

Private Sub WebUserControl11_TextModified(ByVal NewText As String) _
    Handles WebUserControl11.TextModified
    TextBox1.Text = "New text: " & NewText
End Sub

And that's all we need-in this way, we've been able to duplicate the work we did with the UserControls example earlier, but this time we're using a Web user control. You can see this example at work in Figure 24.9; when you click the "Click Me" button, the new text is displayed in the Web user control and the text box, as you see in that figure.

Click To expand
Figure 24.9: Using a Web user control.
Previous Section Next Section

JavaScript Editor Free JavaScript Editor     JavaScript Editor