JavaScript Editor
JavaScript Debugger|
| ||
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:
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
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.
|
| ||
Free JavaScript Editor
JavaScript Editor
