ASP.NET Server Controls

1. ASP.NET Server Controls ASP.NET

2. Some Additional ASP.NET Controls … • XML • AdRotator • Calendar • File Upload

3. XML Technologies (Page 1) • Extensible Markup Language (XML) • Like HTML, is a markup language that provides access to structured content • Not limited to a predefined set of tags or to being displayed in a browser • Sort of a "combination of HTML and database"—developer defines tag style elements • Can be shared across applications, file systems, and operating systems • XML standards maintained by the W3C (World Wide Web Consortium)

4. XML Technologies (Page 2) • XSL Transformations (XSLT) • A language for transforming (formatting) XML documents • XSLT stylesheets • Stylesheets format XML documents • Use XSLT to interact with an XML document • Can format individual or groups of elements within the XML document • A form of XSL that transforms the XML data using processing rules in the XSLT stylesheet

5. XML Technologies

6. Well-Formed XML Documents • An XML document must be well-formed (follow XML standards): • One root element—all other elements must be nested within it—do not mix nesting elements: • Incorrect: <b>Welcome to <i>Tara Store</b></i> • Correct: <b>Welcome to <i>Tara Store</i></b> • Always enclose attribute values within quotes, i.e. <p align = "center"> • Case sensitive—opening and closing tags must match

7. Open products.xml The Prologue (Page 1) • The first section of an XML document <?xml version="1.0" encoding="utf-8" ?> • Continues global information such as XML version, formatting information, and schema definitions • The "?" character indicates this statement is a processing instruction and does not contain data • The character-encoding property (values are UTF-8 or UTF-16), which describes any coding algorithms, is optional

8. The Prologue (Page 2) • An additional, optional statement may be included which references a CSS stylesheet or an XSLT file (an XML stylesheet) to format the XML document <?xml:stylesheet type="text/css" href="taragifts.css" ?>

9. The XML Body (Page 1) • Complies with the XML DOM (Document Object Model) standards • XML documents must have a logical structure • The root element (node) must nest all the elements and the data • Root node can contain many other elements • All tags must be nested within the root node • Root node is a container element • Elements within the root may serve as container elements for subordinate objects

10. The XML Body (Page 2) • In the following example, "productlist" is the root node; there are many subordinate"product" nodes: <productlist> <product> <code>387-463-55-00</code> <name>Waterford Crystal Shamrock Paperweight</name> <price>99.00</price> <category>Waterford</category> <image>547.gif</image> <rating>4</rating> </product> … </productlist>

11. Modifying an XML File with the XML Designer • Editing XML data (click either tab at the bottom of the designer window): • Manually in XML view in which case IntelliSense and color coding is implemented • In Data view (in rows and columns, similar to the MS Access datasheet view) • Filename extension for an XML document is "*.xml"

12. XML View

13. Data View

14. Using Special Characters in an XML Document • &nbsp; represents a non-breaking space in HTML • Certain character entities are not supported within the tags because they are used to separate XML elements • Replace these characters with markup codes: Character XML Markup Code ' &apos; " &quot; & &amp; < &lt; > &gt

15. Open listProducts.xsl XSLT Stylesheets(Page 1) • Contains format information for the XML file • Can contain a combination of HTML tags, style (CSS) rules and XSLT commands • First line (root node) identifies the version of XML and indicates it is an XSLT stylesheet • Root node name is xsl:stylesheet • Example: <xsl:stylesheet version="1.0"> <!-- Put your formatting code here --> </xsl:stylesheet> • The usual file extension for XSLT stylesheets is ".xsl"

16. XSLT Stylesheets(Page 2) • The xmlns:xsl attribute indicates the schema • Schema (rules) are XSL Transform standards which are maintained by the W3C • Example: <xsl:stylesheet version="1.0" xmlns:xsl= "http://www.w3.org/1999/XSL/Transform"> <!-- Put your formatting code here --> </xsl:stylesheet>

17. The Main Template • For documents with simpler formatting requirements, all formatting may be implemented by using a single main template • The main template is a code block which contains instructions that apply formatting to an XML document • In more complex documents, the main template is used to implement the format processing and a series of element templates specify the exact formatting

18. Formatting the Main Template (Page 1) • The xsl:template element surrounds and identifies each XSL template element • The match attribute specifies the node to be formatted • The slash (/) indicates that formatting starts at the root node, that is the entire XML document will be formatted • Example: <xsl:template match="/"> … </xsl:template> • It is not necessary to format all of the elements

19. Formatting the Main Template (Page 2) • The xsl:for-each element is a processing instruction that implements looping • Used to select every XML element of specific node-set (members of the collection of child elements) • Example: <xsl:for-each select="//product"> … </xsl:for-each> • Opening tag also may be written: <xsl:for-each select="productlist/product"> …

20. Formatting the Main Template (Page 3) • The xsl:apply-templates element is a processing instruction that applies a template to the current element and/or its child element(s) • The select attribute limits processing to only the child element that matches the value of the attribute • A series of select attributes also can specify the order in which the child nodes are processed • Example: <xsl:apply-templates select="name" />

21. Formatting the Main Template (Page 4) • Example: <xsl:template match="/"> <html><head><title>Tara Store Product List</title> ... </head> <body> <h1>Products and their categories.</h1> <xsl:for-each select="//product"> <xsl:apply-templates select="name" />: <xsl:apply-templates select="category" /> <br /> </xsl:for-each> </body></html> </xsl:template>

22. Element Templates • Element templates work together with the xsl:apply-templates elements in the main template • They provide the specific (usually more detailed) formatting information for each match in the main template • Element templates are coded outside of the main template, usually following it • Individual templates should be defined for each of the elements in the main template

23. Using Element Templates (Page 1) • The match attribute of the xsl:template element matches and element name from the main template • The xsl:value-of element can be used to extract the value of an XML element • Add its value to output stream of the transformation • The period (.) indicates that everything within the node (specifed by the match attribute) is selected • Example: <xsl:template match="product"> <b><xsl:value-of select="." /></b> </xsl:template>

24. Using Element Templates (Page 2) • To apply a template to all the other elements, use an asterisk (*) as the value for the match property: <xsl:template match="*"> <div class="product"> <xsl:value-of select="."/> </div> </xsl:template>

25. Using Element Templates (Page 3) • The div tag uses the class defined in the embedded (or possibly even a linked) stylesheet to determine how to format the output: <xsl:template match="name"> <div class="product"> <b>Product Name: <xsl:value-of select="." /> </b><br /> </div> </xsl:template>

26. Creating an XSLT Stylesheet

27. Open listproducts.aspx Inserting the XML Control (Page 1) • The XML control holds a place for the existing formatted XML file within the HTML or ASP document along with its formatting • It is found by selecting the "Web Forms" tab of the Toolbox with the other ASP.NET server controls • Used to insert the contents of the XML document into the Web page • The XML control does not have a style attribute • Should be placed in a container (i.e. a Panel) to position it at an absolute location

28. Inserting the XML Control (Page 2) • For the XML control, set the following properties: • DocumentSource attribute identifies a physical or virtual path to the XML document • TransformSource attribute identifies the physical or virtual path to the XSL or XSLT stylesheet • Creates the following header tag: <asp:Xml runat="server" id="Xml1" TransformSource="listproducts.xsl" DocumentSource="products.xml" />

29. listproducts.aspx

30. listproducts.aspx in Browser

31. Modifying XSLT Stylesheets • Specify HTML attributes with xsl:attribute element • An assignment operator (=) is implied, never keyed • For example, to create a hyperlink <xsl:template match="image"> <a> <xsl:attribute name="href"> <xsl:value-of select="." /> </xsl:attribute> Click here to go to the Web site. </a> </xsl:template>

32. Insert an Image with XSLT Stylesheet • Example: <xsl:template match="image"> <img> <xsl:attribute name="src"> <xsl:value-of select="." /> </xsl:attribute> <xsl:attribute name="align"> left </xsl:attribute> </img> </xsl:template>

33. Inserting a Table with XSLT Stylesheet • The table tags should be outside the for-each loop <xsl:template match="/"> <table border="0" cellspacing="10"> <tr><th>Image</th> ... </tr> <xsl:for-each select="//product"> <tr> <td><xsl:apply-templates select="image"/></td> … </tr> </xsl:for-each> </table> </xsl:template>

34. Processing XML Data with an XSLT Stylesheet • XSLT stylesheets can analyze the contents of the element and performs actions • xsl:choose–analyzes the value of the rating • xsl:when–if the condition in the test attribute is met • xsl:otherwise–applies when no choice listed is met • xsl:sort–sorts the data • xsl:if statement–similar to the xsl:if-else-end if • string-length–tests the length of the element

35. The AdRotator Control (Page 1) • Displays a banner ad on a Web page • The banner ad is a hyperlinked image • Changes to different images each time page reloads • The Advertisement File is an XML document that stores the ad information • File extension is ".xml" • First line indicates the version of the XML • Root node always is named Advertisements • Each Ad element contains the properties to create the image and hyperlink

36. The AdRotator Control (Page 2) • Property names for Advertisement File (case sensitive) • ImageUrl creates the src property (absolute or relative address) • NavigateUrl creates the href property (URL) • AlternateText creates the alt property for the image • Impressions indicates the relative frequency the banner ad is displayed (relative to other images in the file) • Keyword property indicates one or more words that categorize the banner ad (compares to KeywordFilter property of the AdRotator control)

37. ads.xml—XML View

38. ads.xml—Data View

39. Inserting the AdRotator Control (Page 1) • The AdRotator control holds a place for the rotating banner within the HTML or ASP document • It is found by selecting the "Web Forms" tab of the Toolbox with the other ASP.NET server controls • The AdvertisementFile property specifies the URL of the Advertisement File

40. Inserting the AdRotator Control (Page 2) • Additional properties: • Height, Width and Style change appearance • ToolTip property stores a message to display the message when the user hovers mouse over image • Target property specifies in which window to open the link (default is "_top", meaning entire browser window which would turn off any frames) • KeywordFilter property retrieves ads where the Keyword matches exactly

41. Creating Web Page to Display AdRotator • getproducts.aspx - retrieves the value from the URL and displays the image Dim imagename As String imagename = Page.Request.QueryString("ID") Image1.ImageUrl = "images/" & imagename • AdRotator.aspx – contains the banner ad • KeywordFilter to Waterford • AdvertisementFile property to ads.xml

42. AdRotator.aspx

43. The Calendar Control (Page 1) • Displays a single calendar month • Change the appearance by setting the style templates and properties • Can also assign a CSS class to the style property • Example: <asp:calendar id="MyCal" runat="server" />

44. The Calendar Control (Page 2) • Some of the Style properties • DayHeaderStyle—sets style for days of the week • DayStyle—sets the style for individual dates • NextPrevStyle—sets style for navigation controls • OtherMonthDayStyle—for dates not in the current month • SelectedDateStyle—sets style for dates selected • SelectorStyle—sets style for month date selection column • TitleStyle—sets the style for the title in the heading • TodayDayStyle—sets style for current date • WeekendDayStyle—sets style for weekend dates

45. The Calendar Control (Page 3) • Some of the Calendar properties (Boolean): • ShowDayHeader—shows/hides days of the week • ShowGridLines—shows/hides the gridlines • ShowTitle—shows/hides the heading title • ShowNextPrev—shows/hides the Navigation controls

46. The Calendar Control (Page 4) • Programs can interact with the calendar: • SelectionChanged event occurs when the user clicks a new date (changes selected date to a new selected date) • SelectedDate property is the new selected date; the calendar control visually indicates to the user which date is selected • VisibleMonthChanged event occurs when the user clicks on the next or previous month hyperlinks

47. calendar.aspx

48. The Calendar Control (Page 5) • Example: Label1.Text = "You selected: " & _ Calendar1.SelectedDate.ToShortDateString() If Calendar1.SelectedDate.ToShortDateString _ = Now.ToShortDateString Then Label2.Text = _ "Today all Waterford products 30% off." Else Label2.Text = _ "All products 10% off this month" End If

49. Working with Multiple Dates • SelectedDates object (collection) retrieves the multiple values selected; use a For-Next loop to iterate through each date that was selected • Count property - number of dates selected • Index position – zero-based • Example: MyCalendar.SelectedDates(intCtr)