Professional ASP.NET 3.5 in C# and Visual Basic Part 24 doc

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 184 Chapter 3: ASP.NET Web Server Controls By working with these events, you can create a multi-step form that saves all the end user’s input information when he changes from one step to the next. You can also use the FinishButtonClick event to save everything that was stored in each of the steps at the end of the process. The Wizard control remembers all the end user’s input in each of the steps by means of the view state in the page, which enables you to work with all these values in the last step. It also gives the end user the capability to go back to previous steps and change values before those values are saved to a data store. The event appears in your code behind or inline code, as shown in Listing 3-44. Listing 3-44: The FinishButtonClick event VB < script runat="server" > Sub Wizard1_FinishButtonClick(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) End Sub < /script > C# < script runat="server" > void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) { } < /script > The OnFinishButtonClick attribute should be added to the main < asp:Wizard > element to point at the new Wizard1_FinishButtonClick event. Listing 3-45 shows how to do this. Listing 3-45: The <asp:Wizard> Element Changes < asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" OnFinishButtonClick="Wizard1_FinishButtonClick" > The Wizard control is one of the great new controls that enable you to break up longer workflows into more manageable pieces for your end users. By separating longer Web forms into various wizard steps, you can effectively make your forms easy to understand and less daunting to the end user. Using the Wizard Control to Show Form Elements So far, you have learned how to work with each of the Wizard control steps, including how to add steps to the process and how to work with the styling of the control. Now look at how you put form elements into the Wizard control to collect information from the end user in a stepped process. This is just as simple as the first examples of the Wizard control that used only text in each of the steps. One nice thing about putting form elements in the Wizard step process is that the Wizard control remem- bers each input into the form elements from step to step, enabling you to save the results of the entire form at the last step. It also means that when the end user presses the Previous button, the data that he entered into the form previously is still there and can be changed. 184 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 185 Chapter 3: ASP.NET Web Server Controls Work through a stepped process that enters form information by building a registration process. The last step of the process saves the results to a database of your choice, although in this example, you just push the results to a Label control on the page. Listing 3-46 shows t he first part of the process. Listing 3-46: Building the form in the Wizard control < asp:Wizard ID="Wizard1" runat="Server" > < WizardSteps > < asp:WizardStep ID="WizardStep1" runat="server" Title="Provide Personal Info" > First name: < br / > < asp:TextBox ID="fnameTextBox" runat="server" >< /asp:TextBox >< br / > Last name: < br / > < asp:TextBox ID="lnameTextBox" runat="server" >< /asp:TextBox >< br / > Email: < br / > < asp:TextBox ID="emailTextBox" runat="server" >< /asp:TextBox >< br / > < /asp:WizardStep > < asp:WizardStep ID="WizardStep2" runat="server" Title="Membership Information" > Are you already a member of our group? < br / > < asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="Member" / > < asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="Member" / > < /asp:WizardStep > < asp:WizardStep ID="WizardStep3" runat="server" Title="Provided Information" StepType="Complete" OnActivate="WizardStep3_Activate" > < asp:Label ID="Label1" runat="server" / > < /asp:WizardStep > < /WizardSteps > < /asp:Wizard > This Wizard control has three steps. The first step asks for the user’s personal information, and the second asks for the user’s membership information. The third step contains a Label control that pushes out all the information that was input. This is done through the Activate event that is specific for the WizardStep object on the third WizardStep control. The code for the WizardStep3_Activate event is shown in Listing 3-47. Listing 3-47: Adding an Activate event to a WizardStep object VB Protected Sub WizardStep3_Activate(ByVal sender As Object, _ ByVal e As System.EventArgs) ’ You could save the inputted data to the database here instead Label1.Text = "First name: " & fnameTextBox.Text.ToString() & " < br > "&_ "Last name: " & lnameTextBox.Text.ToString() & " < br > "&_ "Email: " & emailTextBox.Text.ToString() End Sub C# protected void WizardStep3_Activate(object sender, EventArgs e) Continued 185 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 186 Chapter 3: ASP.NET Web Server Controls { Label1.Text = "First name: " + fnameTextBox.Text.ToString() + " < br > "+ "Last name: " + lnameTextBox.Text.ToString() + " < br > "+ "Email: " + emailTextBox.Text.ToString(); } When the end user comes to the third step in the display, the WizardStep3_Activate method from Listing3-47isinvoked.Usingthe OnActivate attribute in the third WizardStep control, the content provided by the end user in earlier steps is used to populate a Label control. The three steps are shown in Figure 3-47. Figure 3-47 186 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 187 Chapter 3: ASP.NET Web Server Controls This example is simple and straightforward, but you can increase the complexity a little bit. Imagine you want to add another WizardStep control to the process, and you want to display it only if a user specifies that he is a member in WizardStep2 . If he answers from the radio button selection that he is not a member, you have him skip the new step and go straight to the final step where the results are displayed in the Label control. First, add an additional WizardStep to the Wizard control, as shown in Listing 3-48. Listing 3-48: Adding an additional WizardStep < asp:Wizard ID="Wizard1" runat="Server" > < WizardSteps > < asp:WizardStep ID="WizardStep1" runat="server" Title="Provide Personal Info" > First name: < br / > < asp:TextBox ID="fnameTextBox" runat="server" >< /asp:TextBox >< br / > Last name: < br / > < asp:TextBox ID="lnameTextBox" runat="server" >< /asp:TextBox >< br / > Email: < br / > < asp:TextBox ID="emailTextBox" runat="server" >< /asp:TextBox >< br / > < /asp:WizardStep > < asp:WizardStep ID="WizardStep2" runat="server" Title="Membership Information" > Are you already a member of our group? < br / > < asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="Member" / > < asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="Member" / > < /asp:WizardStep > < asp:WizardStep ID="MemberStep" runat="server" Title="Provide Membership Number" > Membership Number: < br / > < asp:TextBox ID="mNumberTextBox" runat="server" >< /asp:TextBox > < /asp:WizardStep > < asp:WizardStep ID="WizardStep3" runat="server" Title="Provided Information" StepType="Complete" OnActivate="WizardStep3_Activate" > < asp:Label ID="Label1" runat="server" / > < /asp:WizardStep > < /WizardSteps > < /asp:Wizard > A single step was added to the workflow — one that simply asks the member for his membership num- ber. Because you want to show this step only if the end user specifies that he is a member in WizardStep2 , you add an event (shown in Listing 3-49) designed to check for that specification. Listing 3-49: Applying logical checks on whether to show a step VB Sub Wizard1_NextButtonClick(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) If e.NextStepIndex = 2 Then If RadioButton1.Checked = True Then Continued 187 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 188 Chapter 3: ASP.NET Web Server Controls Wizard1.ActiveStepIndex = 2 Else Wizard1.ActiveStepIndex = 3 End If End If End Sub C# void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e) { if (e.NextStepIndex == 2) { if (RadioButton1.Checked == true) { Wizard1.ActiveStepIndex = 2; } else { Wizard1.ActiveStepIndex = 3; } } } To check whether you should show a specific step in the process, use the NextButtonClick event from the Wizard control. The event uses the WizardNavigationEventArgs class instead of the typical EventArgs class that gives you access to the NextStepIndex number, as well as to the CurrentStepIndex number. In the example from Listing 3-49, you check whether the next step to be presented in the process is 2 . Remember that this is index 2 fromazero-basedindex(0,1,2,andsoon).IfitisStep 2 in the index, you check which radio button is selected from the previous WizardStep. If the RadioButton1 control is checked (meaning that the user is a member), the next step in the process is assigned as index 2 .Ifthe RadioButton2 control is selected, the user is not a member, and the index is then assigned as 3 (the final step), thereby bypassing the membership step in the process. You could also take this example and alter it a bit so that you show a WizardStep only if the user is contained within a specific role (such as Admin). Role management is covered in Chapter 16. Showing only a WizardStep if the user is contained within a certain role is demonstrated in Listing 3-50. Listing 3-50: Applying logical checks on whether to show a step based upon roles VB Sub Wizard1_NextButtonClick(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) If e.NextStepIndex = 2 Then If (Roles.IsUserInRole("ManagerAccess") Then Wizard1.ActiveStepIndex = 2 Else Wizard1.ActiveStepIndex = 3 End If End If End Sub 188 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 189 Chapter 3: ASP.NET Web Server Controls C# void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e) { if (e.NextStepIndex == 2) { if (Roles.IsUserInRole("ManagerAccess")) { Wizard1.ActiveStepIndex = 2; } else { Wizard1.ActiveStepIndex = 3; } } } } ImageMap Server Control The ImageMap server control enables you to turn an image into a navigation menu. In the past, many developers would break an image into multiple pieces and put it together again in a table, reassem- bling the pieces into one image. When the end user clicked a particular piece of the overall image, the application picked out which piece of the image was chosen and based actions upon that particular selection. With the new ImageMap control, you can take a single image and specify particular hotspots on the image using coordinates. An example is shown in Listing 3-51. Listing 3-51: Specifying sections of an image that are clickable VB < %@ Page Language="VB"% > < script runat="server" > Protected Sub Imagemap1_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) Response.Write("You selected: " & e.PostBackValue) End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > ImageMap Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="Kids.jpg" Width="300" OnClick="Imagemap1_Click" HotSpotMode="PostBack" > < asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="150" AlternateText="Sofia" PostBackValue="Sofia" > < /asp:RectangleHotSpot > < asp:RectangleHotSpot Top="0" Bottom="225" Left="151" Right="300" Continued 189 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 190 Chapter 3: ASP.NET Web Server Controls AlternateText="Henri" PostBackValue="Henri" > < /asp:RectangleHotSpot > < /asp:ImageMap > < /form > < /body > < /html > C# < %@ page language="C#"% > < script runat="server" > protected void Imagemap1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e) { Response.Write("You selected: " + e.PostBackValue); } < /script > This page brings up an image of my children. If you click the left side of the image, you select Sofia, and if you click the right side of the image, you select Henri. You know which child you selected through a Response.Write statement, as shown in Figure 3-48. The ImageMap control enables you to specify hotspots in a couple of different ways. From the example in Listing 3-51, you can see that hotspots are placed in a rectangular fashion using the < asp:RectangleHot Spot > element. The control takes the Top , Bottom , Left ,and Right coordinates of the rectangle that is to be the hotspot. Besides the < asp:RectangleHotSpot > control, you can also use the < asp:CircleHotSpot > and the < asp:PolygonHotSpot > controls. Each control takes coordinates appropriate to its shape. After you define t he hotspots on the image, you can respond to the end-user click o f the hotspot in several ways. You first specify how to deal with the hotspot clicks in the root < asp:ImageMap > element with the use the HotSpotMode attribute. The HotSpotMode attribute can take the values PostBack , Navigate ,or InActive .Intheprevious example, the HotSpotMode value is set to PostBack — meaning that after the end user clicks the hotspot, you want to postback to the server and deal with the click at that point. Because the HotSpotMode is set to PostBack and you have created several hotspots, you must determine which hotspot is selected. You make this determination by giving each hotspot ( < asp:RectangleHotSpot >) a postback value with the PostBackValue attribute. The example uses Sofia as the value of the first hotspot, and Henri as the value for the second. The PostBackValue attribute is also the helper text that appears in the browser (in the yellow box) directly below the mouse cursor when the end user hovers the mouse over the hotspot. After the user clicks one of the hotspots, the event procedure displays the value that was selected in a Response.Write statement. Instead of posting back to the server, you can also navigate to an entirely different URL when a particular hotspot is selected. To accomplish this, change the HotSpotMode attribute in the main < asp:ImageMap > element to the value Navigate . Then, within the < asp:RectangleHotSpot > elements, simply use the 190 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 191 Chapter 3: ASP.NET Web Server Controls Figure 3-48 NavigateUrl attribute and assign the location to which the end user should be directed if that particular hotspot is clicked: < asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="kids.jpg" HotSpotMode="Navigate" > < asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="150" AlternateText="Sofia" NavigateUrl="SofiaPage.aspx" > < /asp:RectangleHotSpot > < asp:RectangleHotSpot Top="0" Bottom="225" Left="151" Right="300" AlternateText="Henri" NavigateUrl="HenriPage.aspx" > < /asp:RectangleHotSpot > < /asp:ImageMap > 191 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 192 Chapter 3: ASP.NET Web Server Controls Summary This chapter explored numerous server controls, their capabilities, and the features they provide. With ASP.NET 3.5, you have more than 50 new server controls at your disposal. Because you have so many server controls at your disposal when you are creating your ASP.NET appli- cations, you have to think carefully about which is the best control for the task. Many controls seem similar, but they offer different features. These controls guarantee that you can build the best possible applications for all browsers. Server controls are some of the most useful tools you will find in your ASP.NET arsenal. They are quite useful and can save you a lot of time. This chapter introduced you to some of these controls and to the different ways you might incorporate them into your next projects. All these controls are wonderful options to use on any of your ASP.NET pages and make it much easier to develop the functionality that your pages require. 192 Evjen c04.tex V2 - 01/28/2008 12:45pm Page 193 Validation Server Controls When you look at the Toolbox window in Visual Studio 2008 — especially if you’ve read Chapters 2 and 3, which cover the various server controls at your disposal — you may be struck by the number of server controls that come with ASP.NET 3.5. This chapter takes a look at a specific type of server control you find in the Toolbox window: the validation server control. Validation server controls are a series of controls that enable you to work with the information your end users input into the form elements of the applications you build. These controls work to ensure the validity of the data being placed in the form. Before you learn how to use these controls, however, this chapter will first take a look at the process of validation. Understanding Validation People have been constructing Web applications for a number of years. Usually the motivation is to provide or gather information. In this chapter, you focus on the information-gathering aspect of Web applications. If you collect data with your applications, collecting valid data should be impor- tant to you. If the information isn’t valid, there really isn’t much point in collecting it. Validation comes in degrees. Validation is a set of rules that you apply to the data you collect. These rules can be many or few and enforced either strictly or in a lax manner: It really depends on you. No perfect validation process exists because some users may find a way to cheat to some degree, no matter what rules you establish. The trick is to find the right balance of the fewest rules and the proper strictness, without compromising the usability of the application. The data you collect for validation comes from the Web forms you provide in your applications. Web forms are made up of different types of HTML elements that are constructed using raw HTML form elements, ASP.NET HTML server controls, or ASP.NET Web Form server controls. In the end, your forms are made up of many different types of HTML elements, such as text boxes, radio buttons, check boxes, drop-down lists, and more. . Admin). Role management is covered in Chapter 16. Showing only a WizardStep if the user is contained within a certain role is demonstrated in Listing 3- 50 . Listing 3- 50 : Applying logical checks on whether. the main < asp: Wizard > element to point at the new Wizard1_FinishButtonClick event. Listing 3- 45 shows how to do this. Listing 3- 45: The < ;asp: Wizard> Element Changes < asp: Wizard. are shown in Figure 3- 47. Figure 3- 47 186 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 187 Chapter 3: ASP. NET Web Server Controls This example is simple and straightforward, but you can increase