Evjen c03.tex V2 - 01/28/2008 12:33pm Page 174 Chapter 3: ASP.NET Web Server Controls Listing 3-39: Uploading the file contents into a Byte array VB Dim myByteArray() As Byte Dim myStream As System.IO.MemoryStream myStream = FileUpload1.FileContent myByteArray = myStream.ToArray() C# Byte myByteArray[]; System.IO.Stream myStream; myStream = FileUpload1.FileContent; myByteArray = myStream.ToArray(); In this example, instances of a Byte array and a MemoryStream object are created. First, the MemoryS- tream object is created using the FileUpload control’s FileContent property as you did previously. Then it’s fairly simple to use the MemoryStream object’s ToArray() method to populate the myByteArray() instance. After the file is placed into a Byte array, you can work with the file contents as necessary. MultiView and View Server Controls The MultiView and View server controls work together to give you the capability to turn on/off sections of an ASP.NET page. Turning sections on and off, which means activating or deactivating a series o f View controls within a MultiView control, is similar to changing the visibility of Panel controls. For certain operations, however, you may find that the MultiView control is easier to manage and work with. The sections, or views, do not change on the client-side; rather, they change with a postback to the server. You can put any number of elements and controls in each view, and the end user can work through the views based upon the sequence numbers that you assign to the views. You can build these controls (like all server controls) from the source view or design view. If working with Visual Studio 2008, you can drag and drop a MultiView control onto the design surface and then drag and drop any number of View controls inside the MultiView control. Place the elements you want within the View controls. When you are finished, you have something like the view shown in Figure 3-41. You also can create your controls directly in the code, as shown in Listing 3-40. Listing 3-40: Using the MultiView and View server controls VB < %@ Page Language="VB"% > < script runat="server" > Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Not Page.IsPostBack Then MultiView1.ActiveViewIndex = 0 End If End Sub 174 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 175 Chapter 3: ASP.NET Web Server Controls Sub NextView(ByVal sender As Object, ByVal e As System.EventArgs) MultiView1.ActiveViewIndex += 1 End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > MultiView Server Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:MultiView ID="MultiView1" runat="server" > < asp:View ID="View1" runat="server" > Billy’s Famous Pan Pancakes < p/ > < i > Heat 1/2 tsp of butter in cast iron pan. < br / > Heat oven to 450 degrees Fahrenheit. < br / > < /i >< p/ > < asp:Button ID="Button1" runat="server" Text="Next Step" OnClick="NextView" / > < /asp:View > < asp:View ID="View2" runat="server" > Billy’s Famous Pan Pancakes < p/ > < i > Mix 1/2 cup flour, 1/2 cup milk and 2 eggs in bowl. < br / > Pour in cast iron pan. Place in oven. < /i >< p/ > < asp:Button ID="Button2" runat="server" Text="Next Step" OnClick="NextView" / > < /asp:View > < asp:View ID="View3" runat="server" > Billy’s Famous Pan Pancakes < p/ > < i > Cook for 20 minutes and enjoy! < br / > < /i >< p/ > < /asp:View > < /asp:MultiView > < /form > < /body > < /html > C# < %@ Page Language="C#"% > < script runat="server" > protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { MultiView1.ActiveViewIndex = 0; } } void NextView(object sender, EventArgs e) { MultiView1.ActiveViewIndex += 1; } < /script > 175 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 176 Chapter 3: ASP.NET Web Server Controls Figure 3-41 This example shows three views expressed in the MultiView control. Each view is constructed with an < asp:View > server control t hat also needs ID and Runat attributes. A button is added to each o f the first two views ( View1 and View2 ) of the MultiView control. The buttons point to a server-side event that triggers the MultiView control to progress onto the next view within the series of views. Before either of the buttons can be clicked, the MultiView control’s ActiveViewIndex attribute is assigned a value. By default, the ActiveViewIndex , which describes the view that should be showing, is set to -1 . This means that no view shows when the page is generated. To start on the first view when the page is drawn, set the ActiveViewIndex property to 0 , which is the first view because this is a zero-based index. Therefore, the code from Listing 3-40 first checks to see if the page is in a postback situation and if not, the ActiveViewIndex is assigned to the first View control. Each of the buttons in the MultiView control triggers the NextView method. NextView simply adds one to the ActiveViewIndex value, thereby showing the next view in the series until the last view is shown. The view series is illustrated in Figure 3-42. In addition to the Next Step button on the first and second views, you could place a b utton in the second and third views to enable the user to navigate backward through the views. To do this, create two but- tons titled Previous Step in the last two views and point them to the following method in their OnClick events: 176 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 177 Chapter 3: ASP.NET Web Server Controls Figure 3-42 VB Sub PreviousView(ByVal sender As Object, ByVal e As System.EventArgs) MultiView1.ActiveViewIndex -= 1 End Sub C# void PreviousView(object sender, EventArgs e) { MultiView1.ActiveViewIndex -= 1; } Here, the PreviousView method subtracts o ne from the ActiveViewIndex value, thereby showing the previous view in the view series. 177 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 178 Chapter 3: ASP.NET Web Server Controls Another option is to spice up the MultiView control by adding a step counter that displays (to a Label control) which step in the series the end user is currently performing. In the Page_PreRender event, you add the following line: VB Label1.Text = "Step " & (MultiView1.ActiveViewIndex + 1).ToString() & _ " of " & MultiView1.Views.Count.ToString() C# Label1.Text = "Step " + (MultiView1.ActiveViewIndex + 1).ToString() + " of " + MultiView1.Views.Count.ToString(); Now when working through the MultiView control, the end user sees Step 1 of 3 on the first view, which changes to Step 2 of 3 on the next view, and so on. Wizard Server Control Much like the MultiView control, the Wizard server control enables you to build a sequence of steps that is displayed to the end user. Web pages are all about either displaying or gathering information and, in many cases, you don’t want to display all the information at once — nor do you always want to gather everything from the end user at once. Sometimes, you want to trickle the information in from or out to the end user. When you are constructing a step-by-step process that includes logic on the steps taken, use the Wizard control to manage the entire process. The first time you use the Wizard control, notice that it allows for a far greater degree of customization than does the MultiView control. In its simplest form, the Wizard control can be just an < asp:Wizard > element with any number of < asp:WizardStep > elements. Listing 3-41 creates a Wizard control that works through three steps. Listing 3-41: A simple Wizard control < %@ Page Language="VB"% > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Wizard server control < /title > < /head > < body > < form id="form1" runat="server" > < asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="True" ActiveStepIndex="0" > < WizardSteps > < asp:WizardStep runat="server" Title="Step 1" > This is the first step. < /asp:WizardStep > < asp:WizardStep runat="server" Title="Step 2" > This is the second step. < /asp:WizardStep > < asp:WizardStep runat="server" Title="Step 3" > This is the third and final step. < /asp:WizardStep > < /WizardSteps > 178 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 179 Chapter 3: ASP.NET Web Server Controls < /asp:Wizard > < /form > < /body > < /html > In this example, three steps are defined with the < asp:WizardSteps > control. Each step contains content — simply text in this case, although you can put in anything you want, such as other Web server controls or even user controls. The order in which the WizardSteps are defined is based completely on the order in which they appear within the < WizardSteps > element. The < asp:Wizard > element itself contains a couple o f important attributes. The first is DisplaySideBar . In this example, it is set to True by default — meaning that a side navigation system in the displayed control e nables the end user to quickly navigate to other steps in the process. The ActiveStepIndex attribute of t he Wizard control defines the first wizard step. In this case, it is the first step — 0 . The three steps of the example Wizard control are shown in Figure 3-43. Figure 3-43 The side navigation allows for easy access to the defined steps. The Wizard control adds appropriate buttons to the steps in the process. The first step has simply a Next button, the middle step has Previous and Next buttons, and the final step has Previous and Finish buttons. The user can navigate through t he 179 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 180 Chapter 3: ASP.NET Web Server Controls steps using either the side navigation or the buttons on each of the steps. You can customize the Wizard control in so many ways that it tends to remind me of the other rich Web server controls from ASP.NET, such as the Calendar control. Because so much is possible, only a few of the basics are covered — the ones you are most likely to employ in some of the Wizard controls you build. Customizing the Side Navigation The steps in the Figure 3-43 example are defined as Step 1, Step 2, and Step 3. The links are created based on the Title property’s value that you give to each of the < asp:WizardStep > elements in the Wizard control: < asp:WizardStep runat="server" Title="Step 1" > This is the first step. < /asp:WizardStep > By default, each wizard step created in Design view is titled Step X (with X being the number in the sequence). You can easily change the value of the Title attributes of each of the wizard steps to define the steps as you see fit. Figure 3-44 shows the side navigation of the Wizard control with renamed titles. Figure 3-44 Examining the AllowReturn Attribute Another interesting point of customization for the side navigation piece of the Wizard control is the AllowReturn attribute. By setting this attribute on one of the wizard steps to False , you can remove the capability for end users to go back to this step after they have viewed it. The end user cannot navigate backward to any viewed steps that contain the attribute, but he would be able to return to any steps that do not contain the attribute or that have it set to True : < asp:WizardStep runat="server" Title="Step 1" AllowReturn="False" > This is the first step. < /asp:WizardStep > Working with the StepType Attribute Another interesting attribute in the < asp:WizardStep > element is StepType .The StepType attribute defines the structure of the buttons used on the steps. By default, the Wizard control places only a Next 180 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 181 Chapter 3: ASP.NET Web Server Controls button on the first step. It understands that you do not need the Previous button there. It also knows to use a Next and Previous button on the middle step, and it uses Previous and Finish buttons on the last step. It draws the buttons in this fashion because, by default, the StepType attribute is set to Auto , meaning that the Wizard control determines the placement of buttons. You can, however, take control of the StepType attribute in the < asp:WizardStep > element to make your own determination about which buttons are used for which steps. In addition to Auto , StepType value options include Start , Step , Finish ,and Complete . Start means that the step defined has only a Next b utton. It simply allows the user to proceed to the next step in the series. A value of Step means that the wizard step has Next and Previous buttons. A value of Finish means that the step includes a Previous and a Finish button. Complete enables you to give some final message to the end user who is working through the steps of your Wizard control. In the Wizard control shown in Listing 3-42, for example, when the end user gets to the last step and clicks the Finish button, nothing happens and the user just stays on the last page. You can add a final step to give an ending message, as shown in Listing 3-42. Listing 3-42: Having a complete step in the wizard step collection < WizardSteps > < asp:WizardStep runat="server" Title="Step 1" > This is the first step. < /asp:WizardStep > < asp:WizardStep runat="server" Title="Step 2" > This is the second step. < /asp:WizardStep > < asp:WizardStep runat="server" Title="Step 3" > This is the third and final step. < /asp:WizardStep > < asp:WizardStep runat="server" Title="Final Step" StepType="Complete" > Thanks for working through the steps. < /asp:WizardStep > < /WizardSteps > When you run this Wizard control in a page, you still see only the first three steps in the side navigation. Because the last step has a StepType set to Complete , it does not appear in the side navigation list. When the end user clicks the Finish button in Step 3, the last step — Final Step — is shown and no buttons appear with it. Adding a Header to the Wizard Control The Wizard control enables you to place a header at the top of the control by means of the HeaderText attribute in the main < asp:Wizard > element. Listing 3-43 provides an example. Listing 3-43: Working with the HeaderText attribute < asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" HeaderText="&nbsp;Step by Step with the Wizard control&nbsp;" HeaderStyle-BackColor="DarkGray" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="20" > < /asp:Wizard > This code creates a header that appears on each of the steps in the wizard. The result of this snippet is shown in Figure 3-45. 181 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 182 Chapter 3: ASP.NET Web Server Controls Figure 3-45 Working with the Wizard’s Navigation System As stated earlier, the Wizard control allows for a very high degree of customization — especially in the area of style. You can customize every single aspect of the process, as well as how every element appears to the end user. Pay particular attention to the options that are available for customization of the navigation buttons. By default, the wizard steps use Next, Previous, and Finish buttons throughout the entire series of steps. From the main < asp:Wizard > element, you can change everything about these buttons and how they work. First, if you look through the long list of attributes available for this element, notice that one available button is not shown by default: the Cancel button. Set the value of the DisplayCancelButton attribute to True , and a Cancel button appears within the navigation created for each and every step, including the final step in the series. Figure 3-46 shows a Cancel button in a step. Figure 3-46 182 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 183 Chapter 3: ASP.NET Web Server Controls After you decide which buttons to use within the Wizard navigation, you can choose their style. By default, regular buttons appear; you can change the button style with the CancelButtonType , Finish- StepButtonType , FinishStepPreviousButtonType , NextStepButtonType , PreviousStepButtonType , and StartStepNextButtonType attributes. If you use any of these button types and want all the but- tons consistently styled, you must change each attribute to the same value. The possible values of these button-specific elements include Button , Image ,and Link . Button is the default and means that the navi- gation system uses buttons. A value of Image enables you to use image buttons, and Link turns a selected item in the navigation system into a hyperlink. In addition to these button-specific attributes of the < asp:Wizard > element, you can also specify a URL to which the user is directed when the he clicks either the Cancel or Finish buttons. To redirect the user with one of these buttons, you use the CancelDestinationPageUrl or the FinishDestinationPageUrl attributes and set the appropriate URL as the destination. Finally, you are not required to use the default text included with the buttons in the navigation sys- tem. You can change the text of each of the buttons with the use of the CancelButtonText , FinishStep ButtonText , FinishStepPreviousButtonText , NextStepButtonText , PreviousStepButtonText ,andthe StartStepNextButtonText attributes. Utilizing Wizard Control Events One of the most convenient capabilities of the Wizard control is that it enables you to divide large forms into logical pieces. The end user can then work systematically through each section of the f orm. The developer, dealing with the inputted values of the form, has a few options because of the various events that are a vailable in the Wizard control. The Wizard control exposes events for each of the possible steps that an end user might take when working with the control. The following table describes each of the available events. Event Description ActiveStepChanged Triggers when the end user moves from one step to the next. It does not matter if the step is the middle or final step in the series. This event simply covers each step change generically. CancelButtonClick Triggers when the end user clicks the Cancel button in the navigation system. FinishButtonClick Triggers when the end user clicks the Finish button in the navigation system. NextButtonClick Triggers when the end user clicks the Next button in the navigation system. PreviousButtonClick Triggers when the end user clicks the Previous button in the navigation system. SideBarButtonClick Triggers when the end user clicks one of the links contained within the sidebar navigation of the Wizard control. 183 . Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 174 Chapter 3: ASP. NET Web Server Controls Listing 3- 39: Uploading the file contents into a Byte array VB Dim myByteArray(). means of the HeaderText attribute in the main < asp: Wizard > element. Listing 3- 43 provides an example. Listing 3- 43: Working with the HeaderText attribute < asp: Wizard ID="Wizard1". Title="Step 3& quot; > This is the third and final step. < /asp: WizardStep > < /WizardSteps > 178 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 179 Chapter 3: ASP. NET Web Server