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.
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.
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 Get 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.
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"> <HTML> <HEAD> ⋮ <form id="Form1" method="post" runat="server"> <uc1:WebUserControl1 id=WebUserControl11 runat="server"></uc1:WebUserControl1> </form> </body> </HTML>
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:
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 WebUserControl11.SetText("Hello!") 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.