One Step Beyond: VControls
| I l @ ve RuBoard |
One Step Beyond: VControlsCombining user controls (which we will cover in more detail in the next chapter) with validation controls can provide even greater re-use. For instance, the e-mail field is probably the most commonly seen form field, so why should you have to deal with the text box and several different validator controls every time you use one? The solution is to create what I've dubbed a VControl, or Validated Control. This is simply a user control that combines the necessary controls to display a single commonly used form field. An entire suite of VControls is a useful tool to have, and you can easily create your own library of them to suit your needs based on this example. I have created a variety of these tools, including VControls for e-mail, phone, zip code, SSN, and confirm password, which are available for free from http://www.aspsmith.com/vcontrols/. We're going to look at just one such control, the EmailBox VControl. We have already seen how to validate an e-mail text box using validation controls. The EmailBox VControl uses this same method for its validation. User controls are similar to Server Side Include files from Classic ASP, but with much more power and flexibility. For this example, we will need to look at three files: the user control declarative code (the .ascx file), the user control codebehind code (the .cs or .vb file), and the page that uses the control (an .aspx file). Listing 8.9 displays the contents of EmailBox.ascx, the declarative portion of the user control. Listing 8.9 EmailBox VControl user control (EmailBox.ascx). <%@ Control Language="c#" AutoEventWireup="false" Codebehind="EmailBox.ascx.cs" Src="EmailBox.ascx.cs" Inherits="ASPSmith.VControls.EmailBox" %> <asp:textbox id="EmailTextBox" runat="server"> </asp:textbox> <asp:literal id="Sep" runat="server"> </asp:literal> <asp:regularexpressionvalidator id="EmailValidator" runat="server" display="dynamic" ErrorMessage="Invalid Email Address. Expected format: abc@xyz.com" controlToValidate="EmailTextBox" ValidationExpression="^[\ w-\ .]+@([\ w-]+\ .)+[\ w-]{ 2,3} $"> * </asp:regularexpressionvalidator> <asp:requiredfieldvalidator id="EmailRequired" runat="server" display="dynamic" controlToValidate="EmailTextBox" ErrorMessage="An Email Address is required." Enabled="false"> * </asp:requiredfieldvalidator> As you can see, this looks pretty much like an excerpt from an ASPX page. And for the most part, that is all that is going on here. The only thing that makes this any different from, say, Example0904.aspx is the use of the Literal control, Sep . We'll see how this is used in a moment. You'll learn more about the implementation details of these kinds of files in the next chapter. Now, let's have a look at Listing 8.10, the EmailBox codebehind, which does most of the interesting work for this control. Listing 8.10 EmailBox VControl user control codebehind (EmailBox.ascx.cs). namespace ASPSmith.VControls { using System; using System.Data; using System.Drawing; using System.Web; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; public class EmailBox : System.Web.UI.UserControl { public System.Web.UI.WebControls.RegularExpressionValidator EmailValidator; public System.Web.UI.WebControls.TextBox EmailTextBox; public System.Web.UI.WebControls.RequiredFieldValidator EmailRequired; protected System.Web.UI.WebControls.Literal Sep; public ValidatorDisplay Display{ get{ return EmailValidator.Display; } set{ EmailValidator.Display = value; EmailRequired.Display = value; } } public string ErrorMessage{ get{ return EmailValidator.ErrorMessage; } set{ EmailValidator.ErrorMessage = value; } } public string ErrorIcon{ get{ return EmailValidator.Text; } set{ EmailValidator.Text = value; EmailRequired.Text = value; } } public bool isRequired { get{ return EmailRequired.Enabled; } set{ EmailRequired.Enabled = value; } } public string RequiredErrorMessage{ get{ return EmailRequired.ErrorMessage; } set{ EmailRequired.ErrorMessage = value; } } public string SeparatorHTML { get { return Sep.Text; } set{ Sep.Text = value; } } public string Text{ get{ return Text; } set{ EmailTextBox.Text = value; } } public string ValidationExpression{ get{ return EmailValidator.ValidationExpression; } set{ EmailValidator.ValidationExpression = value; } } /// <summary> public EmailBox(){ this.Init += new System.EventHandler(Page_Init); } protected void Page_Load(object sender, System.EventArgs e){ // Put user code to initialize the page here } } } The main portion of this class file is devoted to exposing public properties that can be set by the page that is using this control. For instance, if you want the e-mail address to be required, you simply set the IsRequired property to true . We'll see how to set these properties in the next example when we actually implement this control. There are eight properties that I chose to expose explicitly with this control, but notice also that the controls for the text box, separator, and validator are all declared as public. This means that all the methods and properties of these controls are exposed to the calling page as well, so by using this VControl you are not limited to the properties I have chosen to expose ”you retain complete control over every part of the enclosed controls because they are publicly exposed. Notice the use of the SeparatorHTML property to set the value of the Sep literal WebControl. This is included so that this VControl can be rendered in a table with the validation control in a separate table cell from the e-mail box, as is often the desired layout. By setting the separator to "</td><td>", it is easy to split the text box and the validator into separate table cells , for instance. You can see an example of this in Listing 8.11. Listing 8.11 EmailBox VControl user control (Example0811.aspx). <%@ Page AutoEventWireup="false" %> <%@ Register TagPrefix="ASPSmith" TagName="EmailBox" Src="UserControls/EmailBox.ascx" %> <HTML> <HEAD> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > </HEAD> <body> <form method="post" runat="server"> <asp:ValidationSummary Runat="server" ID="valsummary" DisplayMode="List" /> <table> <tr> <td> Email: </td> <td> <ASPSmith:EmailBox id="EmailBox" runat="server" isRequired="true" SeparatorHTML="</td><td>" ErrorIcon="<b>!</b>" /> </td> </tr> </table> <asp:button id="save_button" runat="Server" text="Save"></asp:button> </form> </body> </HTML> As you can see, there are only a couple of non-HTML lines in this page. The second line simply tells the page where to find the user control, and will be covered in more detail in the next chapter. The ASPSmith:EmailBox control is the actual call to place the control on the page. Notice that the public properties we exposed can all be set as attributes here. For example, we have added some HTML to the SeparatorHTML property to split the text box and validation control into separate table cells, and we have changed the ErrorIcon from the default asterisk (" * )" to a bold exclamation point "( ! )". Also, just to demonstrate that these VControls will still work with ValidationSummary controls, we have added one of these to the page as well. The result, after an invalid e-mail is entered, is shown in Figure 8.6. Figure 8.6. Using the EmailBox VControl |
| I l @ ve RuBoard |
