ASP.NET 4 Unleased - p 26 potx

ptg 224 CHAPTER 4 Using the Rich Controls . SwitchViewByIndex—Causes the MultiView to activate the view specified by the button control’s CommandArgument. You can use these commands with any of the button controls—Button, LinkButton, and ImageButton—by setting the button control’s CommandName property and, in the case of the SwitchViewByID and SwitchViewByIndex, by setting the CommandArgument property. The page in Listing 4.18 illustrates how you can use the NextView command to create a multipart form. LISTING 4.18 MultiViewForm.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void View3_Activate(object sender, EventArgs e) { lblFirstNameResult.Text = txtFirstName.Text; lblColorResult.Text = txtColor.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>MultiView Form</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:MultiView id=”MultiView1” ActiveViewIndex=”0” Runat=”server”> <asp:View ID=”View1” runat=”server”> <h1>Step 1</h1> <asp:Label id=”lblFirstName” Text=”Enter Your First Name:” AssociatedControlID=”txtFirstName” Runat=”server” /> <br /> <asp:TextBox id=”txtFirstName” Runat=”server” /> From the Library of Wow! eBook ptg 225 Displaying Different Page Views 4 <br /><br /> <asp:Button id=”btnNext” Text=”Next” CommandName=”NextView” Runat=”server” /> </asp:View> <asp:View ID=”View2” runat=”server”> <h1>Step 2</h1> <asp:Label id=”Label1” Text=”Enter Your Favorite Color:” AssociatedControlID=”txtColor” Runat=”server” /> <br /> <asp:TextBox id=”txtColor” Runat=”server” /> <br /><br /> <asp:Button id=”Button1” Text=”Next” CommandName=”NextView” Runat=”server” /> </asp:View> <asp:View ID=”View3” runat=”server” OnActivate=”View3_Activate”> <h1>Summary</h1> Your First Name: <asp:Label id=”lblFirstNameResult” Runat=”server” /> <br /><br /> Your Favorite Color: <asp:Label id=”lblColorResult” Runat=”server” /> </asp:View> </asp:MultiView> From the Library of Wow! eBook ptg 226 CHAPTER 4 Using the Rich Controls </div> </form> </body> </html> The first two View controls in Listing 4.18 contain a Button control. These Button controls both have a CommandName property set to the value NextView. Displaying a Wizard You can use the Wizard control, like the MultiView control, to divide a large form into multiple subforms. The Wizard control, however, supports many advanced features not supported by the MultiView control. The Wizard control contains one or more WizardStep child controls. Only one WizardStep displays at a time. The Wizard control supports the following properties (this is not a complete list): . ActiveStep—Enables you to retrieve the active WizardStep control. . ActiveStepIndex—Enables you to set or get the index of the active WizardStep control. . CancelDestinationPageUrl—Enables you to specify the URL where the user is sent when the Cancel button is clicked. . DisplayCancelButton—Enables you to hide or display the Cancel button. . DisplaySideBar—Enables you to hide or display the Wizard control’s side bar. The side bar displays a list of all the wizard steps. . FinishDestinationPageUrl—Enables you to specify the URL where the user is sent when the Finish button is clicked. . HeaderText—Enables you to specify the header text that appears at the top of the Wizard control. . WizardSteps—Enables you to retrieve the WizardStep controls contained in the Wizard control. The Wizard control also supports the following templates: . FinishNavigationTemplate—Enables you to control the appearance of the navigation area of the finish step. . HeaderTemplate—Enables you control the appearance of the header area of the Wizard control. . SideBarTemplate—Enables you to control the appearance of the side bar area of the Wizard control. From the Library of Wow! eBook ptg 227 Displaying a Wizard 4 . StartNavigationTemplate—Enables you to control the appearance of the navigation area of the start step. . StepNavigationTemplate—Enables you to control the appearance of the navigation area of steps that are not start, finish, or complete steps. The Wizard control also supports the following methods: . GetHistory()—Enables you to retrieve the collection of WizardStep controls that have been accessed. . GetStepType()—Enables you to return the type of WizardStep at a particular index. Possible values are Auto, Complete, Finish, Start, and Step. . MoveTo()—Enables you to move to a particular WizardStep. The Wizard control also supports the following events: . ActiveStepChanged—Raised when a new WizardStep becomes the active step. . CancelButtonClick—Raised when the Cancel button is clicked. . FinishButtonClick—Raised when the Finish button is clicked. . NextButtonClick—Raised when the Next button is clicked. . PreviousButtonClick—Raised when the Previous button is clicked. . SideBarButtonClick—Raised when a side bar button is clicked. A Wizard control contains one or more WizardStep controls that represent steps in the wizard. The WizardStep control supports the following properties: . AllowReturn—Enables you to prevent or allow a user to return to this step from a future step. . Name—Enables you to return the name of the WizardStep control. . StepType—Enables you to get or set the type of wizard step. Possible values are Auto, Complete, Finish, Start and Step. . Title—Enables you to get or set the title of the WizardStep. The title displays in the wizard side bar. . Wizard—Enables you to retrieve the Wizard control containing the WizardStep. The WizardStep also supports the following two events: . Activate—Raised when a WizardStep becomes active. . Deactivate—Raised when another WizardStep becomes active. The StepType property is the most important property. This property determines how a WizardStep is rendered. The default value of StepType is Auto. When StepType is set to the value Auto, the position of the WizardStep in the WizardSteps collection determines how the WizardStep renders. From the Library of Wow! eBook ptg 228 CHAPTER 4 Using the Rich Controls You can explicitly set the StepType property to a particular value. If you set StepType to the value Start, a Previous button is not rendered. If you set the StepType to Step, both Previous and Next buttons are rendered. If you set StepType to the value Finish, Previous and Finish buttons are rendered. Finally, when StepType is set to the value Complete, no buttons are rendered. The page in Listing 4.19 illustrates how you can use a Wizard control to display a multiple part form (see Figure 4.11). FIGURE 4.11 Displaying a wizard with the Wizard control. LISTING 4.19 ShowWizard.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void Wizard1_FinishButtonClick(object sender, ➥ WizardNavigationEventArgs e) { lblSSNResult.Text = txtSSN.Text; lblPhoneResult.Text = txtPhone.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > From the Library of Wow! eBook ptg 229 Displaying a Wizard 4 <head id=”Head1” runat=”server”> <style type=”text/css”> .wizard { border:solid 1px black; font:14px Verdana,Sans-Serif; width:400px; height:300px; } .header { color:gray; font:bold 18px Verdana,Sans-Serif; } .sideBar { background-color:#eeeeee; padding:10px; width:100px; } .sideBar a { text-decoration:none; } .step { padding:10px; } </style> <title>Show Wizard</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Wizard id=”Wizard1” HeaderText=”Product Survey” OnFinishButtonClick=”Wizard1_FinishButtonClick” CssClass=”wizard” HeaderStyle-CssClass=”header” SideBarStyle-CssClass=”sideBar” StepStyle-CssClass=”step” Runat=”server”> <WizardSteps> <asp:WizardStep ID=”WizardStep1” Title=”Introduction”> From the Library of Wow! eBook ptg 230 CHAPTER 4 Using the Rich Controls Please complete our survey so that we can improve our products. </asp:WizardStep> <asp:WizardStep ID=”WizardStep2” Title=”Step 1”> <asp:Label id=”lblSSN” Text=”Social Security Number:” AssociatedControlID=”txtSSN” Runat=”server” /> <br /> <asp:TextBox id=”txtSSN” Runat=”server” /> </asp:WizardStep> <asp:WizardStep ID=”WizardStep3” Title=”Step 2” StepType=”Finish”> <asp:Label id=”lblPhone” Text=”Phone Number:” AssociatedControlID=”txtPhone” Runat=”server” /> <br /> <asp:TextBox id=”txtPhone” Runat=”server” /> </asp:WizardStep> <asp:WizardStep ID=”WizardStep4” Title=”Summary” StepType=”Complete”> <h1>Summary</h1> Social Security Number: <asp:Label id=”lblSSNResult” Runat=”server” /> <br /><br /> Phone Number: <asp:Label id=”lblPhoneResult” Runat=”server” /> </asp:WizardStep> </WizardSteps> </asp:Wizard> </div> </form> </body> </html> From the Library of Wow! eBook ptg 231 Displaying Silverlight Content 4 The Wizard control in Listing 4.19 contains four WizardStep controls. The StepType property is explicitly set for the last two WizardStep controls. When the Finish WizardStep is rendered, a Finish button is rendered. When the Complete WizardStep is rendered, no buttons are rendered. The Wizard control’s FinishButtonClick event is handled with a method named Wizard1_FinishButtonClick(). This method updates the final WizardStep with a summary of the answers entered in the previous WizardStep controls. Displaying Silverlight Content Silverlight is a framework that enables you to incorporate rich, animated, interactive content to your website. To display this content, your website visitors must have the Silverlight runtime installed on their computer. NOTE You c an download an d install the Microsoft Silver lig ht runtime (for both W indows and Macintosh) from http://www.silverlight.net. Unlike the other controls we discussed in this chapter, Silverlight content is not added to an ASP.NET application using a server control. Instead, a standard HTML object element is used to add the content. You should set the following attributes on the object: . Width—The width of your Silverlight control, in pixels. . Height—The height of your Silverlight control, in pixels. . Data—Indicates the type of object you use, which should be set to “data:application/x-silverlight-2,”. . Type—Indicates the type of object you use, which should be set to “application/ x-silverlight-2”. Silverlight applications are stored in a file with an extension of .xap; XAP files are similar to EXEs and DLLs in that they are the compiled binary versions of source code. The Silverlight content that you want to use on your page must be on your web server in XAP format. Then, the source parameter on the HTML object must be set to the path of the XAP file. <object id=”SilverlightContent” width=”400” height=”300” data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2”> <param name=”source” value=”SilverlightApplication1.xap” /> </object> From the Library of Wow! eBook ptg 232 CHAPTER 4 Using the Rich Controls NOTE Silverlight applications are built using the Silverlight SDK and Visual Studio using spe- cific markup called XAML. Building the actual Silverlight content is beyond the scope of this book. For more information on building applications in Silverlight, check out Silverlight 4 Unleashed from SAMS Press. You can specify several other parameters on your Silverlight HTML object to customize the content (this is not a complete list): . Background—The color to set the background to. . MinRuntimeVersion—The minimum version of Silverlight required. . AutoUpgrade—Indicates whether to automatically upgrade to the required version of Silverlight if it is not installed. . OnError—The name of a JavaScript function that should get called if an error occurs. If Silverlight is not installed on the user’s computer, you can display alternative content by providing standard HTML before the closing </object> tag. A common practice is to display the default installation image that links to the Silverlight download page. The listing in 4.20 illustrates how to display a Silverlight control on your page and demonstrates the usage of the preceding parameters. Alternative content also displays if the user doesn’t have Silverlight installed (see Figure 4.12). FIGURE 4.12 Displaying Silverlight content with an object tag. From the Library of Wow! eBook ptg 233 Displaying Silverlight Content 4 LISTING 4.20 ShowSilverlight.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”head” runat=”server”> <script type=”text/javascript”> function onSilverlightError(sender, args) { var appSource = ““; if (sender != null && sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode; if (errorType == “ImageError” || errorType == “MediaError”) { return; } var errMsg = “Unhandled Error in Silverlight Application “ + appSource + “\n”; errMsg += “Code: “ + iErrorCode + “ \n”; errMsg += “Category: “ + errorType + “ \n”; errMsg += “Message: “ + args.ErrorMessage + “ \n”; if (errorType == “ParserError”) { errMsg += “File: “ + args.xamlFile + “ \n”; errMsg += “Line: “ + args.lineNumber + “ \n”; errMsg += “Position: “ + args.charPosition + “ \n”; } else if (errorType == “RuntimeError”) { if (args.lineNumber != 0) { errMsg += “Line: “ + args.lineNumber + “ \n”; errMsg += “Position: “ + args.charPosition + “ \n”; } errMsg += “MethodName: “ + args.methodName + “ \n”; } From the Library of Wow! eBook . /> < ;asp: TextBox id=”txtSSN” Runat=”server” /> < /asp: WizardStep> < ;asp: WizardStep ID=”WizardStep3” Title=”Step 2” StepType=”Finish”> < ;asp: Label id=”lblPhone” Text=”Phone Number:”. AssociatedControlID=”txtPhone” Runat=”server” /> <br /> < ;asp: TextBox id=”txtPhone” Runat=”server” /> < /asp: WizardStep> < ;asp: WizardStep ID=”WizardStep4” Title=”Summary” StepType=”Complete”>. Using the Rich Controls Please complete our survey so that we can improve our products. < /asp: WizardStep> < ;asp: WizardStep ID=”WizardStep2” Title=”Step 1”> < ;asp: Label id=”lblSSN” Text=”Social