Professional ASP.NET 3.5 in C# and Visual Basic Part 20 pptx

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 144 Chapter 3: ASP.NET Web Server Controls Choosing a Date Format to Output from the Calendar When you use the Calendar1_SelectionChanged event, the selected date is written out using the ToShortDateString() method. The Calendar control also allows you to write out the date in a number of other formats, as detailed in the following list: ❑ ToFileTime : Converts the selection to the local operating system file time: 128571156000000000 . ❑ ToFileTimeUtc : Converts the selection to the operating system file time, but instead of using the local time zone, the UTC time is used: 128570976000000000 . ❑ ToLocalTime : Converts the current coordinated universal time (UTC) to local time: 6/4/2008 7:00:00 PM . ❑ ToLongDateString : Converts the selection to a human-readable string in a long format: Thursday, June 05, 2008 . ❑ ToLongTimeString : Converts the selection to a time value (no date is included) of a long format: 12:00:00 AM . ❑ ToOADate : Converts the selection to an OLE Automation date equivalent: 39604 . ❑ ToShortDateString : Converts the selection to a human-readable string in a short format: 6/4/2008 . ❑ ToShortTimeString : Converts the selection to a time value (no da te is included) in a short for- mat: 12:00 AM . ❑ ToString : Converts the selection to the following: 6/4/2008 12:00:00 AM . ❑ ToUniversalTime : Converts the selection to universal time (UTC): 6/4/2008 6:00:00 AM . Making Day, Week, or Month Selections By default, the Calendar control enables you to make single day selections. You can use the Selection- Mode property to change this behavior to allow your users to make week or month selections from the calendar instead. The possible values of this property include Day , DayWeek , DayWeekMonth ,and None . The Day setting enables you to click a specific day in the calendar to highlight it (this is the default). When you use the setting of DayWeek , you can st ill make individual day selections, but you can also click the arrow next to the week (see Figure 3-25) to make selections that consist of an entire week. Using the setting of DayWeekMonth lets users make individual day selections or w eek selections. A new a rrow appears in the upper-left corner of the calendar that enables users to select an entire month (also shown in Figure 3-25). A setting of None means that it is impossible f or the end user to make any selections, which is useful for calendars on your site that are informational only. Working with Date Ranges Even if an end user makes a selection that encompasses an entire week or an entire month, you get back from the selection only the first date of this range. If, for example, you allow users to select an entire month and one selects July 2008, what you get back (using ToShortDateString() )is 7/1/2008 —the first date in the date range of the selection. That might work for you, but if you require all the dates in the selected range, Listing 3-21 shows you how to get them. 144 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 145 Chapter 3: ASP.NET Web Server Controls Figure 3-25 Listing 3-21: Retrieving a range of dates from a selection VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Label1.Text = " < b >< u > You selected the following date/dates: < /u >< /b >< br > " For i As Integer = 0 To (Calendar1.SelectedDates.Count - 1) Label1.Text += Calendar1.SelectedDates.Item(i).ToShortDateString() & _ " < br > " Next End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head id="Head1" runat="server" > < title > Using the Calendar Control < /title > < /head > Continued 145 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 146 Chapter 3: ASP.NET Web Server Controls < body > < form id="form1" runat="server" > < div > < asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" SelectionMode="DayWeekMonth" > < /asp:Calendar >< p > < asp:Label ID="Label1" runat="server" >< /asp:Label >< /p > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Label1.Text = " < b >< u > You selected the following date/dates: < /u >< /b >< br > "; for (int i=0; i < Calendar1.SelectedDates.Count; i ++ ){ Label1.Text += Calendar1.SelectedDates[i].ToShortDateString() + " < br > "; } } < /script > In this example, the Calendar control lets users make selections that can be an individual day, a week, or even a month. Using a For Next loop, you iterate through a selection by using the SelectedDates.Count property. The code produces the results shown in Figure 3-26. You can get just the first day of the selection by using the following: VB Calendar1.SelectedDates.Item(0).ToShortDateString() C# Calendar1.SelectedDates[0].ToShortDateString(); And you can get the last date in the selected range by using: VB Calendar1.SelectedDates.Item(Calendar1.SelectedDates.Count-1).ToShortDateString() C# Calendar1.SelectedDates[Calendar1.SelectedDates.Count-1].ToShortDateString(); As you can see, this is possible using the Count property of the SelectedDates object. 146 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 147 Chapter 3: ASP.NET Web Server Controls Figure 3-26 Modifying the Style and Behavior of Your Calendar There is a lot to the Calendar control — definitely more than can be covered in this chapter. One nice thing about the Calendar control is the ease of extensibility that it offers. Begin exploring new ways to customize this control further by looking at one of the easiest ways to change it — applying a style to the control. Using Visual Studio, you can give the controls a new look-and-feel from the Design view of the page you are working with. Highlight the Calendar control and open the control’s smart tag to see the Auto Format link. That gives you a list of available styles that can be applied to your Calendar control. The Calendar control is not alone in this capability. Many other rich controls offer a list of styles. You can always find this capability in the control’s smart tag. Some of the styles are shown in Figure 3-27. In addition to changing the style of the Calendar control, you can w ork with the control during its ren- dering process. The Calendar control includes an event called DayRender that allows you to control how a single date or all the dates in the calendar are rendered. Listing 3-22 shows an example of how to change one of the dates being rendered in the calendar. 147 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 148 Chapter 3: ASP.NET Web Server Controls Figure 3-27 Listing 3-22: Controlling how a day is rendered in the Calendar VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Calendar1_DayRender(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) e.Cell.VerticalAlign = VerticalAlign.Top If (e.Day.DayNumberText = "25") Then 148 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 149 Chapter 3: ASP.NET Web Server Controls e.Cell.Controls.Add(New LiteralControl(" < p > User Group Meeting! < /p > ")) e.Cell.BorderColor = Drawing.Color.Black e.Cell.BorderWidth = 1 e.Cell.BorderStyle = BorderStyle.Solid e.Cell.BackColor = Drawing.Color.LightGray End If End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head id="Head1" runat="server" > < title > Using the Calendar Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender" Height="190px" BorderColor="White" Width="350px" ForeColor="Black" BackColor="White" BorderWidth="1px" NextPrevFormat="FullMonth" Font-Names="Verdana" Font-Size="9pt" > < SelectedDayStyle ForeColor="White" BackColor="#333399" >< /SelectedDayStyle > < OtherMonthDayStyle ForeColor="#999999" >< /OtherMonthDayStyle > < TodayDayStyle BackColor="#CCCCCC" >< /TodayDayStyle > < NextPrevStyle ForeColor="#333333" VerticalAlign="Bottom" Font-Size="8pt" Font-Bold="True" >< /NextPrevStyle > < DayHeaderStyle Font-Size="8pt" Font-Bold="True" >< /DayHeaderStyle > < TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" Font-Bold="True" BackColor="White" BorderWidth="4px" > < /TitleStyle > < /asp:Calendar > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { e.Cell.VerticalAlign = VerticalAlign.Top; if (e.Day.DayNumberText == "25") { e.Cell.Controls.Add(new LiteralControl(" < p > User Group Meeting! < /p > ")); e.Cell.BorderColor = System.Drawing.Color.Black; e.Cell.BorderWidth = 1; e.Cell.BorderStyle = BorderStyle.Solid; e.Cell.BackColor = System.Drawing.Color.LightGray; } } < /script > 149 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 150 Chapter 3: ASP.NET Web Server Controls In this example, you use a Calendar control with a little style to it. When the page is built and run in the browser, you can see that the 25th of every month in the calendar has been changed by the code in the Calendar1_DayRender event. The calendar is shown in Figure 3-28. Figure 3-28 The Calendar control in this example adds an OnDayRender attribute that points to the Calendar1_ DayRender event. The method is run for each of the days rendered in the calendar. The class constructor shows that you are not working with the typical System.EventArgs class, but instead with the DayRen- derEventArgs class. It gives you access to each of the days rendered in the calendar. The two main properties from the DayRenderEventArgs class are Cell and Day .The Cell property gives you access to the space in which the day is being rendered, and the Day property gives you access to the specific date being rendered in the cell. From the actions being taken in the Calendar1_DayRender event, you can see that both properties are used.First,the Cell property sets the vertical alignment of the cell to Top . If it didn’t, the table might look a little strange when one of the cells has content. Next, a check is made to see if the day being rendered (checked with the Day property) is the 25th of the month. If it is, the If Then statement runs using the Cell property to change the styling of just that cell. The styling change adds a control, as well as makes changes to the border and color of the cell. 150 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 151 Chapter 3: ASP.NET Web Server Controls As you can see, working with individual dates in the calendar is fairly straightforward. You can easily give them the content and appearance you want. A nice feature of the Day property is that you can turn off the option to select a particular date or range of dates by setting the Day property’s IsSelectable property to False : VB If (e.Day.Date < DateTime.Now) Then e.Day.IsSelectable = False End If C# if (e.Day.Date < DateTime.Now) { e.Day.IsSelectable = false; } AdRotator Server Control Although Web users find ads rather annoying, advertising continues to be prevalent everywhere on the Web. With the AdRotator control, you can configure your application to show a series of advertisements to the end users. With this control, you can use advertisement data from sources other than the standard XML file that was used with the previous versions of this control. If you a re using an XML source for the ad information, first create an XML advertisement file. The adver- tisement file allows you to incorporate some new elements that give you even more control over the appearance and behavior of your ads. Listing 3-23 shows an example of an XML advertisement file. Listing 3-23: The XML advertisement file < ?xml version="1.0" encoding="utf-8" ? > < Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File" > < Ad > < ImageUrl > book1.gif < /ImageUrl > < NavigateUrl > http://www.wrox.com < /NavigateUrl > < AlternateText > Visit Wrox Today! < /AlternateText > < Impressions > 50 < /Impressions > < Keyword > VB.NET < /Keyword > < /Ad > < Ad > < ImageUrl > book2.gif < /ImageUrl > < NavigateUrl > http://www.wrox.com < /NavigateUrl > < AlternateText > Visit Wrox Today! < /AlternateText > < Impressions > 50 < /Impressions > < Keyword > XML < /Keyword > < /Ad > < /Advertisements > This XML file, used for storing information about the advertisements that appear in your application, has just a few elements detailed in the following table. Remember that all elements are optional. 151 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 152 Chapter 3: ASP.NET Web Server Controls Element Description ImageUrl Takes a string value that indicates the location of the image to use. NavigateUrl Takes a string value that indicates the URL to post to when the image is clicked. AlternateText Takes a string value that is used for display either if images are turned off in the client’s browser or if the image is not found. Impressions Takes a numerical value that indicates the likelihood of the image being selected for display. Keyword Takes a string value that sets the category of the image in order to allow for the filtering of ads. Now that the XML advertisement file is in place, you can simply use the AdRotator control to read from this file. Listing 3-24 shows an example of this in action. Listing 3-24: Using the AdRotator control as a banner ad < %@ Page Language="VB" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > AdRotator Page < /title > < /head > < body > < form id="form1" runat="server" > < asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="MyAds.xml" / > < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis vel justo. Aliquam adipiscing. In mattis volutpat urna. Donec adipiscing, nisl eget dictum egestas, felis nulla ornare ligula, ut bibendum pede augue eu augue. Sed vel risus nec urna pharetra imperdiet. Aenean semper. Sed ullamcorper auctor sapien. Suspendisse luctus. Ut ac nibh. Nam lorem. Aliquam dictum aliquam purus. < /p > < /form > < /body > < /html > The example shows the ad specified in the XML advertisement file as a banner ad at the top of the page. You are not required to place all your ad information in the XML advertisement file. Instead, you can use another data source to which you bind the AdRotator. For instance, you bind the AdRotator to a SqlDataSource object that is retrieving the ad information from SQL Server in the following fashion: < asp:AdRotator ID="AdRotator1" runat="server" DataSourceId="SqlDataSource1" AlternateTextField="AlternateTF" ImageUrlField="Image" NavigateUrlField="NavigateUrl" / > The AlternateTextField , ImageUrlField ,and NavigateUrlField properties point to the column names that are used in SQL Server for those items. 152 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 153 Chapter 3: ASP.NET Web Server Controls The Xml Server Control The Xml server control provides a means of getting XML and transforming it using an XSL style sheet. The Xml control can work with your XML in a couple of different ways. T he simplest method is by using the construction shown in Listing 3-25. This control is covered in more detail in Chapter 10. Listing 3-25: Displaying an XML document < asp:Xml ID="Xml1" runat="server" DocumentSource="~/MyXMLFile.xml" TransformSource="MyXSLFile.xslt" >< /asp:Xml > This method takes only a couple of attributes to make it work: DocumentSource , which points to the path of the XML file, and TransformSource , which provides the XSLT file to use in transforming the XML document. The other way to use the Xml server control is to load the XML into an object and then pass the object to the Xml control, as illustrated in Listing 3-26. Listing 3-26: Loading the XML file to an object before providing it to the Xml control VB Dim MyXmlDoc as XmlDocument = New XmlDocument() MyXmlDoc.Load(Server.MapPath("Customers.xml")) Dim MyXslDoc As XslCompiledTransform = New XslCompiledTransform() MyXslDoc.Load(Server.MapPath("CustomersSchema.xslt")) Xml1.Document = MyXmlDoc Xml1.Transform = MyXslDoc C# XmlDocument MyXmlDoc = new XmlDocument(); MyXmlDoc.Load(Server.MapPath("Customers.xml")); XslCompiledTransform MyXsltDoc = new XslCompiledTransform(); MyXsltDoc.Load(Server.MapPath("CustomersSchema.xslt")); Xml1.Document = MyXmlDoc; Xml1.Transform = MyXslDoc; To make this work, you have to ensure that the System.Xml and System.Xml.Xsl namespaces are imported into your page. The example loads both the XML and XSL files and then assigns these files as the values of the Document and Transform properties. Panel Server Control The Panel server control encapsulates a set of controls you can use to manipulate or lay out your ASP.NET pages. It is basically a wrapper for other controls, enabling you to take a group of server controls along with other elements (such as HTML and images) and turn them into a single unit. 153 . dates in the selected range, Listing 3- 21 shows you how to get them. 144 Evjen c 03. tex V2 - 01/28 /200 8 12 :33 pm Page 1 45 Chapter 3: ASP. NET Web Server Controls Figure 3- 25 Listing 3- 21: Retrieving. changes to the border and color of the cell. 150 Evjen c 03. tex V2 - 01/28 /200 8 12 :33 pm Page 151 Chapter 3: ASP. NET Web Server Controls As you can see, working with individual dates in the calendar. / > The AlternateTextField , ImageUrlField ,and NavigateUrlField properties point to the column names that are used in SQL Server for those items. 152 Evjen c 03. tex V2 - 01/28 /200 8 12 :33 pm Page 1 53 Chapter 3: ASP. NET Web Server