Chapter 03



Specialized  Server  Controls

 Gjetja e kontrolleve 

protected void Button1_Click(object sender, EventArgs e)

        {

            Button b = sender as Button;

            if (b != null)

            {

                Label c = (Label)b.Parent.FindControl("Label1");

                if (c != null)

                {

                    c.Text = "text changed in handler";

                }

            }

        }

 

Kontrollet e specializuara

  • Literal
  • Table, TableRow, dhe TableCell
  • Image
  • ImageButton
  • ImageMap
  • Calendar
  • FileUpload
  • Panel
  • MultiView
  • View
  • Wizard

 

Literal 

The Literal control is useful when you need to add text to the output of the page dynamically (from the server) but do not want to use a Label. If your text is static, you can simply add it to the markup of the page (you do not need a Label or a Literal control). The Literal control contains the Mode property, which is used to specify particular handling of the content of the Text property.

 

Mode

Description

PassThrough

The Text content is rendered as is. This includes HTML markup and

script. These items are output to the page and processed by the browser

as HTML and script.

Encode

The Text content is HTML-encoded; that is, any HTML markup or script is

actually treated like text and not HTML or script.

Transform

The Text content is converted to match the markup language of the

requesting browser, such as HTML, Extensible Hypertext Markup

Language (XHTML), Wireless Markup Language (WML), or Compact Hypertext

Markup Language (cHTML). If the markup language is HTML or

XHTML, the content is passed through to the browser. For other markup

languages, invalid tags are removed.

 

protected void Page_Load(object sender, EventArgs e)

        {

            Literal1.Text =     @"This is an <font size=7>example</font><script>alert(""Hi"");</script>";

            Literal2.Text =     @"This is an <font size=7>example</font><script>alert(""Hi"");</script>";

            Literal3.Text =     "This is an <font size=7>example</font><script>alert(\"'Hi'\");</script>";

            Literal1.Mode = LiteralMode.Encode;

            Literal2.Mode = LiteralMode.PassThrough;

            Literal3.Mode = LiteralMode.Transform;

        }

 

   

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

    <asp:Literal ID="Literal2" runat="server"></asp:Literal>

    <asp:Literal ID="Literal3" runat="server"></asp:Literal>


 Table, TableRow, dhe  TableCell

 HTML provides the <table> tag for defi ning a table, the <tr> tag for creating a row, and the <td> tag for defi ning a column in the row. Web developers should be very familiar with these tags. ASP.NET provides the Table control for creating and managing tables without these tags. Like its HTML counterpart, the Table control can be used to display static information on a page. However, the Table control’s real power comes from the ability to programmatically add TableRow and TableCell controls from your code at run time. If you only need to display static information, consider using the HTML tags instead.

 

<asp:Table ID="Table1" runat="server">   </asp:Table>

 

protected void Page_Init(object sender, EventArgs e)

        {

            Table1.BorderWidth = 1;

            for (int row = 0; row < 5; row++)

            {

                TableRow tr = new TableRow();

                for (int column = 0; column < 3; column++)

                {

                    TableCell tc = new TableCell();

                    tc.Text = string.Format("Row:{0} Cell:{1}", row, column);

                    tc.BorderWidth = 1;

                    tr.Cells.Add(tc);

                }

                Table1.Rows.Add(tr);

            }

        }

 

Image

 The Image control’s primary property, ImageUrl, indicates the path to the image that is downloaded from the browser and displayed on the page. This property maps directly to the href attribute of the <img> element in HTML. Some additional properties to consider when working with the Image control are as follows:

-          The Image control also contains a property called AlternateText. You can set this property to display a text message in the user’s browser when the image is not available or the browser is set to not render the image.

-          The ImageAlign property of the Image control can be set to NotSet, Left, Right, Baseline, Top, Middle, Bottom, AbsBottom, AbsMiddle, or TextTop. These settings specify the alignment of the image in relation to the other objects on the Web page.

-          The DescriptionUrl property is an accessibility feature that is used to provide further explanation of the content and meaning of the image when using nonvisual page readers. This property sets the longdesc attribute of the <img> element that is generated. This property should be set to the Uniform Resource Locator (URL) of a page that contains details of the image in text or audio format.

-          Setting the GenerateEmptyAlternateText property to true will add the attribute alt=”” to the <img> element that the Image control generates. From the accessibility perspective, any image that does not contribute to the meaning of the page, such as a blank image or a page-divider image, should always carry this attribute; it causes the nonvisual page readers to simply ignore the image.

  

<asp:Image ID="Image1" runat="server" />


protected void Page_Load(object sender, EventArgs e)

        {

            Image1.ImageUrl = "images/whale.jpg";

            Image1.DescriptionUrl = "WhaleImageDescription.htm";

            Image1.AlternateText = "This is a picture of a whale";

        }

 

 

ImageButton

The ImageButton control is represented as an <asp:ImageButton> element in Source view and has no content, so you can write this element as a singleton element. Like the Image control, the ImageButton control’s primary property, ImageUrl, indicates the path to an image that can be downloaded from the browser and displayed. This property maps directly to the src attribute of the <input> element in HTML. Because the ImageButton inherits from the Image control, it also contains the AlternateText, DescriptionUrl, ImageAlign, and GenerateEmpty-AlternateText properties. The ImageButton control has a Click and Command event that functions like the Button control.

 

protected void Page_Load(object sender, EventArgs e)

        {

            ImageButton1.ImageUrl = "images/redblue.jpg";

            ImageButton1.AlternateText =

            "This is a button. The left side is red. The right is blue.";

        }

 

        protected void ImageButton1_Click1(object sender, ImageClickEventArgs e)

        {

            Literal1.Text = string.Format("Button Clicked at {0},{1}", e.X, e.Y);

        }

 

<asp:ImageButton ID="ImageButton1" runat="server"

        onclick="ImageButton1_Click1" />

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

 

ImageMap

The ImageMap control is used to display a clickable image on a Web page that can be used to PostBack to the Web server when the image is clicked. This control differs from the Image-Button control in that the ImageMap control allows you to define regions or “hot spots” that cause a PostBack, whereas clicking anywhere on an ImageButton causes a PostBack.

The ImageMap control generates an <img usemap=”#myMap”> element in HTML. In addition, a <map name=”myMap”> element with nested <area> elements is also created when rendering to HTML.

Like the Image control, the ImageMap control’s primary property, ImageUrl, indicates the path to the image that can be downloaded from the browser and displayed. This property maps directly to the src attribute of the <img> element in HTML. Because the ImageMap inherits from the Image control, it also contains the AlternateText, DescriptionUrl, ImageAlign, and GenerateEmptyAlternateText properties.

In Source view, the ImageMap control is represented as an <asp:ImageMap> element and has nested hot spot elements that can be CircleHotSpot, RectangleHotSpot, and Polygon-HotSpot elements.

HotSpot Properties:

Property

Description

AccessKey

The keyboard shortcut for a HotSpot. You can place only a single character into this property. If this property contains “C,” for example, a Web user can press Alt+C to navigate to the HotSpot.

AlternateText

The text that is displayed for a HotSpot when the image is unavailable or renders to a browser that does not support images. This also becomes the ToolTip.

HotSpotMode

The behavior of the HotSpot when it is clicked. Can be NotSet, Inactive, Navigate, or PostBack.

NavigateUrl

The URL to navigate to when a HotSpot object is clicked.

PostBackValue

The string that is passed back to the Web server and is available in the event argument data when the HotSpot is clicked.

TabIndex

The tab index number of the HotSpot.

Target

The target window or frame that displays the Web page and is linked to the HotSpot.

 

 <asp:ImageMap ID="ImageMapStopLight" runat="server"

        onclick="ImageMapStopLight_Click" Width="200" Height="230">

</asp:ImageMap><br /><br />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

 

protected void Page_Load(object sender, EventArgs e)

        {

            ImageMapStopLight.ImageUrl = "images/semafor1.jpg";

            ImageMapStopLight.AlternateText = "Stoplight picture";

            ImageMapStopLight.HotSpotMode = HotSpotMode.PostBack;

            RectangleHotSpot redHotSpot = new RectangleHotSpot();

            redHotSpot.Top = 40;

            redHotSpot.Bottom = 90;

            redHotSpot.Left = 80;

            redHotSpot.Right = 130;

            redHotSpot.PostBackValue = "RED";

            ImageMapStopLight.HotSpots.Add(redHotSpot);

            RectangleHotSpot yellowHotSpot = new RectangleHotSpot();

            yellowHotSpot.Top = 101;

            yellowHotSpot.Bottom = 150;

            yellowHotSpot.Left = 80;

            yellowHotSpot.Right = 130;

            yellowHotSpot.PostBackValue = "YELLOW";

            ImageMapStopLight.HotSpots.Add(yellowHotSpot);

            RectangleHotSpot greenHotSpot = new RectangleHotSpot();

            greenHotSpot.Top = 161;

            greenHotSpot.Bottom = 210;

            greenHotSpot.Left = 80;

            greenHotSpot.Right = 130;

            greenHotSpot.PostBackValue = "GREEN";

            ImageMapStopLight.HotSpots.Add(greenHotSpot);

        }

        protected void ImageMapStopLight_Click(object sender, ImageMapEventArgs e)

        {

            Label1.Text = "You clicked the " + e.PostBackValue + " rectangle.";

        }

 

Calendar

The Calendar control is represented as an <asp:Calendar> element in Source view. It can contain style elements to change the look of the control. When rendered to a user’s browser, the control generates an HTML <table> element and a set of associated JavaScript.

The Calendar control can be used to select a single date or multiple dates. The Selection-Mode property controls this. It can be set to one of the following settings:

Day Allows selection of a single date.

DayWeek Allows the selection of either a single date or a complete week.

DayWeekMonth Allows selection of single date, a complete week, or the whole month.

None Does not allow you to select any date.

The Calendar control contains many additional properties that can be used to adjust the format and behavior of this control.

Calendar Properties:

Property

Description

Caption

The text that is rendered in the Calendar.

CaptionAlign

The alignment of the caption: Top, Bottom, Left, Right, or NotSet.

CellPadding

The space between each cell and the cell border.

CellSpacing

The spacing between each cell.

DayHeaderStyle

The style to be applied to days of the week.

DayNameFormat

The format for the names of the days of the week: FirstLetter,FirstTwoLetters, Full, Short, Shortest.

DayStyle

The default style for a calendar day.

FirstDayOfWeek

The day of the week to display in the first column of the Calendar control.

NextMonthText

The text to be displayed in the next month navigation control; “>” is the default. This only works if ShowNextPrevMonth property is true.

NextPrevFormat

The tool that sets the format of the next and previous navigation controls. Can be set to CustomText (default), Full-Month (for example, January), or ShortMonth (for example,

Jan).

NextPrevStyle

The style to be applied to the next and previous navigation controls.

OtherMonthDayStyle

The tool that specifies the style for days on the calendar that are displayed and are not in the current month.

PrevMonthText

The text to be displayed in the previous month navigation control, which defaults as “<”. This only works if the ShowNextPrevMonth property is true.

SelectedDate

The date selected by the user.

SelectedDates

A collection of DateTime values that represents all of the dates that were selected by the user. This property contains only a single date if the SelectionMode property is set to

CalendarSelectionMode.Day, which allows only single date selection.

SelectedDayStyle

The style of the selected day.

SelectionMode

A value that indicates how many dates can be selected. Value can be Day, DayWeek, DayWeekMonth, or None.

SelectMonthText

The text displayed for the month selection column. The default value is “>>”.

SelectorStyle

The style for the week and month selectors.

SelectWeekText

The text of the week selection in the week selector.

ShowDayHeader

An indicator that shows whether the day header should be displayed.

ShowGridLines

An indicator that tells whether grid lines should be displayed.

ShowNextPrevMonth

An indicator for whether the next and previous month selectors should be displayed.

ShowTitle

An indicator for whether the title should be displayed.

TitleFormat

A tool that sets the format for displaying the month (Month),or the month and year (MonthYear).

TitleStyle

The style for the title.

TodayDayStyle

The style of today’s date.

TodaysDate

Today’s date.

UseAccessibleHeader

A control that, when set to true, generates <th> for day headers (default), or, when set to false, generates <td> for day headers to be compatible with version 1.0 of the .NET

Framework.

VisibleDate

A display that specifies which month to display in the Calendar control.

WeekendDayStyle

The style of weekend days.

 

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"

     OnVisibleMonthChanged="Calendar1_VisibleMonthChanged" OnDayRender="Calendar1_DayRender"></asp:Calendar>

    <asp:Label ID="LabelAction" runat="server" Text="Label"></asp:Label>

 

       

Hashtable _scheduleData;

        protected void Page_Load(object sender, EventArgs e)

        {

            _scheduleData = GetSchedule();

            Calendar1.Caption = "Personal Schedule";

            Calendar1.FirstDayOfWeek = FirstDayOfWeek.Sunday;

            Calendar1.NextPrevFormat = NextPrevFormat.ShortMonth;

            Calendar1.TitleFormat = TitleFormat.MonthYear;

            Calendar1.ShowGridLines = true;

            Calendar1.DayStyle.HorizontalAlign = HorizontalAlign.Left;

            Calendar1.DayStyle.VerticalAlign = VerticalAlign.Top;

            Calendar1.DayStyle.Height = new Unit(75);

            Calendar1.DayStyle.Width = new Unit(100);

            Calendar1.OtherMonthDayStyle.BackColor = System.Drawing.Color.Cornsilk;

            Calendar1.TodaysDate = new DateTime(2014, 2, 1);

            Calendar1.VisibleDate = Calendar1.TodaysDate;

        }

        private Hashtable GetSchedule()

        {

            Hashtable schedule = new Hashtable();

            schedule["2/9/2014"] = "Vacation Day";

            schedule["2/18/2014"] = "Budget planning meeting @ 3:00pm";

            schedule["2/24/2014"] = "Dinner plans with friends @ 7:00pm";

            schedule["2/27/2014"] = "Travel Day";

            schedule["3/5/2014"] = "Conf call @ 1:00pm";

            schedule["3/10/2014"] = "Meet with art director for lunch";

            schedule["3/27/2014"] = "Birthday Mom";

            return schedule;

        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)

        {

            LabelAction.Text = "Selection changed to: " + Calendar1.SelectedDate.ToShortDateString();

        }

        protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)

        {

            LabelAction.Text = "Month changed to: " + e.NewDate.ToShortDateString();

        }

        protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

        {

            if (_scheduleData[e.Day.Date.ToShortDateString()] != null)

            {

                Literal lit = new Literal();

                lit.Text = "<br />";

                e.Cell.Controls.Add(lit);

                Label lbl = new Label();

                lbl.Text = (string)_scheduleData[e.Day.Date.ToShortDateString()];

                lbl.Font.Size = new FontUnit(FontSize.Small);

                e.Cell.Controls.Add(lbl);

            }

        }

 

 


FileUpload

 

The FileUpload control is used to allow a user to select and upload a single file to the server. The control displays as a text box and Browse button. The user can either type a file name and path into the text box or click the Browse button and select a file. This control generates an <input type=”file”> element when rendered as HTML to a browser.

The FileUpload control does not cause a PostBack to the Web server. After the user selects a file, the user needs to cause a PostBack using a different control, such as a Button. The Post-Back causes the file to be uploaded to the server as posted data. At the server, the page code does not run until the file is uploaded to server memory.

The following properties give you flexible ways to access the uploaded file:

FileBytes The file is exposed as a byte array.

FileContent The file is exposed as a stream.

PostedFile The file is exposed as an object of type HttpPostedFile. This object has properties, such as ContentType and ContentLength.

You need to examine any file that is uploaded to determine if it should be saved; you can examine characteristics such as the file name, size, and Multipurpose Internet Mail Extensions (MIME) type, which specifies the type of file that is being uploaded. When you are ready to save the file, you can use the SaveAs method on the FileUpload control or the HttpPostedFile object.

You can save the file in any location for which you have permission to create files. By default, the requireRootedSaveAsPath attribute of the httpRuntime configuration element in the Web.config file is set to true, which means that you need to provide an absolute path to save the file. You can get an absolute path by using the MapPath method of the HttpServerUtility class and passing to the method the tilde (~) operator, which represents the application root folder.

The maximum size of the file that can be uploaded depends on the value of the MaxRequestLength attribute of the httpRuntime configuration element in the Web.config file. If users attempt to upload a file that is larger than the MaxRequestLength, the upload fails.

 

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />

<asp:FileUpload ID="FileUpload1" runat="server" /><br />

<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />

 

protected void Button1_Click(object sender, EventArgs e)

        {

            if (FileUpload1.HasFile)

            {

                Label1.Text = "File Length: " + FileUpload1.FileBytes.Length

                + "<br />" + "File Name: "

                + FileUpload1.FileName + "<br />" + "MIME Type: "

                + FileUpload1.PostedFile.ContentType;

                FileUpload1.SaveAs(MapPath("~/Uploads/" + FileUpload1.FileName));

            }

            else

            {

                Label1.Text = "No file received.";

            }

        }

 

Panel

The Panel control is used as a control container.

 

<asp:Button ID="ButtonShowHide" runat="server" Text="Login: hide form"

    width="200" onclick="ButtonShowHide_Click"/>

    <asp:Panel ID="Panel1" runat="server" BackColor="Beige" Width="200" >

        <asp:Label ID="Label1" runat="server" Text="User name: "></asp:Label>

        <br />

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <br />

        <asp:Label ID="Label2" runat="server" Text="Password: "></asp:Label>

        <br />

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

        <br />

        <asp:Button ID="ButtonLogin" runat="server" Text="Login" />

    </asp:Panel>


protected void ButtonShowHide_Click(object sender, EventArgs e)

        {

            Panel1.Visible = !Panel1.Visible;

            if (Panel1.Visible)

            {

                ButtonShowHide.Text = "Login: hide form";

            }

            else

            {

                ButtonShowHide.Text = "Login: show form";

            }

        }

 

MultiView dhe View

Like the Panel control, the MultiView and View controls are also container controls; that is, they are used to group other controls. Again, this is useful when you want to treat and manage a group of controls as a single unit. A MultiView exists to contain other View controls. A View control must be contained inside a MultiView. The two controls are meant to work together.

The MultiView is meant to contain many child View controls. It allows you to hide one and then show another View to the user. The MultiView control is also used to create wizards, where each View control in the MultiView control represents a different step or page in the wizard.

The MultiView and the View do not generate any direct HTML elements when rendering because these controls are essentially server-side controls that manage the visibility of their child controls. In Source view, the MultiView control is represented as an <asp:MultiView> element, and the View control is represented as an <asp:View> element nested inside a MultiView.

You can use the ActiveViewIndex property or the SetActiveView method to change the View programmatically. If the ActiveViewIndex is set to -1, no View controls are displayed. If you pass an invalid View or a null (Nothing) value into the SetActiveView method, an HttpException is thrown. Note that only one View control can be active at any time.

 

<asp:Button ID="Button2" runat="server" Text="&gt;&gt;" CommandName="Step1Next" OnCommand="Command" />

        <asp:Button ID="Button3" runat="server" Text="&lt;&lt;" CommandName="Step2Back" OnCommand="Command" />

        <asp:Button ID="Button4" runat="server" Text="&gt;&gt;" CommandName="Step2Next" OnCommand="Command" />

        <asp:Button ID="Button5" runat="server" Text="&lt;&lt;" CommandName="Step3Back" OnCommand="Command" />

        <asp:Button ID="Button1" runat="server" Text="||" CommandName="Finish" OnCommand="Command" />

        <br /><br /><br />

   

    <asp:MultiView ID="MultiView1" runat="server">

        <asp:View ID="View1" runat="server">

            <asp:Panel BackColor="#f00000" runat="server" Width="400">

                <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label><br />

                <asp:Button ID="Button6" runat="server" Text="Button1" />

            </asp:Panel>           

        </asp:View>

        <asp:View ID="View2" runat="server">       

            <asp:Panel BackColor="#00f000" runat="server" Width="400">

                <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label><br />

                <asp:Button ID="Button7" runat="server" Text="Button2" />

            </asp:Panel>           

        </asp:View>

        <asp:View ID="View3" runat="server">       

            <asp:Panel BackColor="#0000f0" runat="server" Width="400">

                <asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label><br />

                <asp:Button ID="Button8" runat="server" Text="Button3" />

            </asp:Panel>           

        </asp:View>

    </asp:MultiView>

 

    <br /> <br /> <br /> <br />

 

    <asp:MultiView ID="MultiView2" runat="server">

        <asp:View ID="View4" runat="server">

            <asp:Panel ID="Panel1" BackColor="#f00000" runat="server" Width="400">

                <asp:Button ID="Button12" runat="server" Text="&gt;&gt;" CommandName="Step1Next" OnCommand="Command2" /><br />

                <asp:Label ID="Label4" runat="server" Text="Label1"></asp:Label><br />

                <asp:Button ID="Button9" runat="server" Text="Button1" />

            </asp:Panel>            

        </asp:View>

        <asp:View ID="View5" runat="server">       

            <asp:Panel ID="Panel2" BackColor="#00f000" runat="server" Width="400">

                <asp:Button ID="Button13" runat="server" Text="&lt;&lt;" CommandName="Step2Back" OnCommand="Command2" /> <br />

                <asp:Button ID="Button14" runat="server" Text="&gt;&gt;" CommandName="Step2Next" OnCommand="Command2" /> <br />      

                <asp:Label ID="Label5" runat="server" Text="Label2"></asp:Label><br />

                <asp:Button ID="Button10" runat="server" Text="Button2" />

            </asp:Panel>           

        </asp:View>

        <asp:View ID="View6" runat="server">       

            <asp:Panel ID="Panel3" BackColor="#0000f0" runat="server" Width="400">

                <asp:Button ID="Button15" runat="server" Text="&lt;&lt;" CommandName="Step3Back" OnCommand="Command2" />  <br />

                <asp:Button ID="Button16" runat="server" Text="||" CommandName="Finish" OnCommand="Command2" />

                <asp:Label ID="Label6" runat="server" Text="Label3"></asp:Label><br />

                <asp:Button ID="Button11" runat="server" Text="Button3" />

            </asp:Panel>           

        </asp:View>

    </asp:MultiView>

 

protected void Page_Load(object sender, EventArgs e)

        {

            if(!IsPostBack)

            {

                MultiView1.ActiveViewIndex = 0;

                MultiView2.ActiveViewIndex = 0;

            }

        }

        protected void Command(object sender, CommandEventArgs e)

        {

            switch (e.CommandName)

            {

                case "Step1Next":

                    MultiView1.ActiveViewIndex = 1;

                    break;

                case "Step2Back":

                    MultiView1.ActiveViewIndex = 0;

                    break;

                case "Step2Next":

                    MultiView1.ActiveViewIndex = 2;

                    break;

                case "Step3Back":

                    MultiView1.ActiveViewIndex = 1;

                    break;

                case "Finish":

                    //hide control from user to simulate save

                    MultiView1.ActiveViewIndex = -1;

                    break;

            }

        }

        protected void Command2(object sender, CommandEventArgs e)

        {

            switch (e.CommandName)

            {

                case "Step1Next":

                    MultiView2.ActiveViewIndex = 1;

                    break;

                case "Step2Back":

                    MultiView2.ActiveViewIndex = 0;

                    break;

                case "Step2Next":

                    MultiView2.ActiveViewIndex = 2;

                    break;

                case "Step3Back":

                    MultiView2.ActiveViewIndex = 1;

                    break;

                case "Finish":

                    //hide control from user to simulate save

                    MultiView2.ActiveViewIndex = -1;

                    break;

            }

        }

 

 

Wizard

 

The Wizard control is a complex control that is used to display a series of WizardStep controls to a user, one after the other, as part of a user input process. The Wizard control builds on the MultiView and View controls presented previously. It provides functionality to ensure that only one WizardStep control is visible at a time and provides the ability to customize most aspects of the Wizard and WizardStep controls. The most significant use of the Wizard control is to prompt the user for a large amount of data by breaking the data into logical chunks, or steps. The Wizard control presents the user with steps that can be validated, either at the end of the process or in between each step. You certainly can accomplish the same result by using separate Web pages for each logical chunk of data, but the Wizard consolidates the data collection process into a single Web page.

The Wizard control inherits from the CompositeControl class. It uses the BaseWizardStep control, which inherits from the View control. This model is shown in Figure 2-38. Notice that the Wizard control exposes a WizardSteps collection that contains the user interface for each step that is created by a developer. As you can also see from the many styles that can be assigned to parts of the Wizard control, the Wizard control can be significantly customized.

The Wizard control contains a header area that can be customized to display information specific to the step with which the user is currently engaged. The Wizard control also contains a sidebar area that can be used to quickly navigate to steps in the control. You can also programmatically control which step is displayed; you are not constrained to navigating through the steps in a linear fashion.

The built-in navigation capabilities determine which buttons are displayed based on the StepType value. The BaseWizardStep class contains the StepType property that can be set to one of the following values:

WizardStepType.Auto This renders navigation buttons based on the location of the set within the WizardSteps collection property of the Wizard. This is the default.

WizardStepType.Complete This is the last step to appear. No navigation buttons are rendered.

WizardStepType.Finish This is the final data collection step; the Finish and Previous buttons are rendered for navigation.

WizardStepType.Start This is the first one to appear, and only the Next button is rendered.

WizardStepType.Step This is a step between the Start and the Finish steps. The Previous and Next buttons are rendered.

In this example, a wizard gives users the ability to select options on a vehicle. In a typical real vehicle selection scenario, many more options would, of course, be available. This, in turn, would dictate simplifying the option selection for the user (and thus justifying the use of the Wizard control).

To create the form for this example you add a Wizard control to a Web page. Inside the Wizard control are WizardStep controls, one for each selection step, as follows: exterior, interior, options, and summary. The exterior selection step contains three RadioButton controls for selection of red, blue, or black exterior. The interior selection step contains two RadioButton controls for selection of leather or cloth seats.

 

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /><br />

    <asp:Wizard ID="Wizard1" runat="server" OnFinishButtonClick="Wizard1_FinishButtonClick" OnNextButtonClick="Wizard1_NextButtonClick">

        <WizardSteps>

            <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">

                <asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox1" />

                <asp:CheckBox ID="CheckBox2" runat="server" Text="CheckBox2" />

            </asp:WizardStep>

            <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">

                <asp:CheckBox ID="CheckBox3" runat="server" Text="CheckBox3" />

                <asp:CheckBox ID="CheckBox4" runat="server" Text="CheckBox4" />

                <asp:CheckBox ID="CheckBox5" runat="server" Text="CheckBox5" />

                <asp:CheckBox ID="CheckBox6" runat="server" Text="CheckBox6" />

            </asp:WizardStep>

            <asp:WizardStep ID="WizardStep3" runat="server" Title="Summary">

            </asp:WizardStep>

        </WizardSteps>

    </asp:Wizard>

 

       

protected void Page_Load(object sender, EventArgs e)

        {

                if (!IsPostBack)

                {

                 Wizard1.ActiveStepIndex = 0;

                }

        }

        protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

        {

                Wizard1.Visible = false;

                Response.Write("Finished<br />" + Label1.Text);

        }

        protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)

        {

            if (Wizard1.WizardSteps[e.NextStepIndex].Title == "Summary")

            {

                Label1.Text = String.Empty;

                foreach (WizardStep ws in Wizard1.WizardSteps)

                {

                    foreach (Control c in ws.Controls)

                    {

                        if (c is CheckBox)

                        {

                            CheckBox cb = (CheckBox)c;

                            if (cb.Checked)

                            {

                                Label1.Text += cb.Text + "<br />";

                            }

                        }

                    }

 

                }

            }

        }

 

XML

 The Xml control is used to display the contents of an XML document. This control is useful if your data is stored in XML and you need to execute an Extensible Stylesheet Language (XSL) transform. The data can then be rendered for display to a user using the Xml control.

 

ProductList.xml




<?xml version="1.0" encoding="utf-8" ?>
<ProductList>
<Product Id="1A59B" Department="Sporting Goods" Name="Baseball" Price="3.00" />
<Product Id="9B25T" Department="Sporting Goods" Name="Tennis Racket" Price="40.00" />
<Product Id="3H13R" Department="Sporting Goods" Name="Golf Clubs" Price="179.00" />
<Product Id="7D67A" Department="Clothing" Name="Shirt" Price="12.00" />
<Product Id="4T21N" Department="Clothing" Name="Jacket" Price="45.00" />
</ProductList>
 


ProductList.xslt

 

<?xml version="1.0" encoding="utf-8" ?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:msxsl="urn:schemas-microsoft-com:xslt"

xmlns:labs="http://labs.com/mynamespace">

  <xsl:template match="/">

    <html>

      <head>

        <title>Product List</title>

      </head>

      <body>

        <center>

          <h1>Product List</h1>

          <xsl:call-template name="CreateHeading"/>

        </center>

      </body>

    </html>

  </xsl:template>

  <xsl:template name="CreateHeading">

    <table border="1" cellpadding="5">

      <tr >

        <th bgcolor="yellow">

          <font size="4" >

            <b>Id</b>

          </font>

        </th>

        <th bgcolor="yellow">

          <font size="4" >

            <b>Department</b>

          </font>

        </th>

        <th bgcolor="yellow">

          <font size="4" >

            <b>Name</b>

          </font>

        </th>

        <th bgcolor="yellow">

          <font size="4" >

            <b>Price</b>

          </font>

        </th>

      </tr>

      <xsl:call-template name="CreateTable"/>

    </table>

  </xsl:template>

  <xsl:template name="CreateTable">

    <xsl:for-each select="/ProductList/Product">

      <tr>

        <td align="center">

          <xsl:value-of select="@Id"/>

        </td>

        <td align="center">

          <xsl:value-of select="@Department"/>

        </td>

        <td>

          <xsl:value-of select="@Name"/>

        </td>

        <td align="right">

          <xsl:value-of select="format-number(@Price,'$#,##0.00')"/>

        </td>

      </tr>

    </xsl:for-each>

  </xsl:template>

</xsl:stylesheet>

 

 

<asp:Xml ID="Xml1" runat="server"></asp:Xml>
 

 

protected void Page_Load(object sender, EventArgs e)

        {

            Xml1.DocumentSource = "App_Data/ProductList.xml";

            Xml1.TransformSource = "App_Data/ProductList.xslt";

        }

 


ą
Leogena Zhaka,
Dec 4, 2014, 2:25 AM
ą
Leogena Zhaka,
Dec 4, 2014, 2:25 AM