Professional ASP.NET 3.5 in C# and Visual Basic Part 23 pdf

Turning sections on and off, which means activating or deactivating a series of View controls within a MultiView control, is similar to changing the visibility of Panel controls.. Each o

Trang 1

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 aBytearray and aMemoryStreamobject are created First, the

MemoryS-treamobject is created using the FileUpload control’sFileContentproperty as you did previously Then

it’s fairly simple to use theMemoryStreamobject’sToArray()method to populate themyByteArray()

instance After the file is placed into aBytearray, you can work with the file contents as necessary

MultiV iew and V iew Ser ver 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 of

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

Trang 2

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>

<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>

<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>

Trang 3

Figure 3-41

This example shows three views expressed in the MultiView control Each view is constructed with an

<asp:View>server control that also needsIDandRunatattributes A button is added to each of the

first two views (View1andView2) 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’sActiveViewIndexattribute is assigned

a value By default, theActiveViewIndex, 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 theActiveViewIndexproperty to0, 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,

theActiveViewIndexis assigned to the first View control

Each of the buttons in the MultiView control triggers theNextViewmethod.NextViewsimply adds one

to theActiveViewIndexvalue, 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 button 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 theirOnClick

events:

Trang 4

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, thePreviousViewmethod subtracts one from theActiveViewIndexvalue, thereby showing the

previous view in the view series

Trang 5

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 thePage_PreRenderevent, 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 seesStep 1 of 3on the first view, which

changes toStep 2 of 3on the next view, and so on

Wizard Ser ver 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>

This is the second step.</asp:WizardStep>

This is the third and final step.</asp:WizardStep>

</WizardSteps>

Trang 6

</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 theWizardStepsare defined is based completely on

the order in which they appear within the<WizardSteps>element

The<asp:Wizard>element itself contains a couple of important attributes The first isDisplaySideBar

In this example, it is set toTrueby default — meaning that a side navigation system in the displayed

control enables the end user to quickly navigate to other steps in the process TheActiveStepIndex

attribute of the 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 the

Trang 7

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 theTitleproperty’s value that you give to each of the<asp:WizardStep>elements in the Wizard

control:

By default, each wizard step created in Design view is titledStep X(withXbeing the number in the

sequence) You can easily change the value of theTitleattributes 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

AllowReturnattribute By setting this attribute on one of the wizard steps toFalse, 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 toTrue:

<asp:WizardStep runat="server" Title="Step 1" AllowReturn="False">

Working with the StepType Attribute

Another interesting attribute in the<asp:WizardStep>element isStepType TheStepTypeattribute

defines the structure of the buttons used on the steps By default, the Wizard control places only a Next

Trang 8

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, theStepTypeattribute is set toAuto,

meaning that the Wizard control determines the placement of buttons You can, however, take control of theStepTypeattribute in the<asp:WizardStep>element to make your own determination about which buttons are used for which steps

In addition toAuto,StepTypevalue options includeStart,Step,Finish, andComplete.Startmeans

that the step defined has only a Next button It simply allows the user to proceed to the next step in the series A value ofStepmeans that the wizard step has Next and Previous buttons A value ofFinish

means that the step includes a Previous and a Finish button.Completeenables 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>

This is the second step.</asp:WizardStep>

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 aStepTypeset toComplete, 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 theHeaderText

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=" Step by Step with the Wizard control "

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

Trang 9

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 theDisplayCancelButtonattribute 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

Trang 10

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 theCancelButtonType,

Finish-StepButtonType,FinishStepPreviousButtonType,NextStepButtonType,PreviousStepButtonType,

andStartStepNextButtonTypeattributes 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 includeButton,Image, andLink.Buttonis the default and means that the navi-gation system uses buttons A value ofImageenables you to use image buttons, andLinkturns 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 theCancelDestinationPageUrlor theFinishDestinationPageUrl

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 theCancelButtonText,FinishStep ButtonText,FinishStepPreviousButtonText,NextStepButtonText,PreviousStepButtonText, and the

StartStepNextButtonTextattributes

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 form The

developer, dealing with the inputted values of the form, has a few options because of the various events that are available 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

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

Định dạng
Số trang	10
Dung lượng	423,33 KB