Tips & Tricks

Display Random Records In An Expression Web Data View

Great for "Quote of the Day" and similar stuff...

In the right-hand column of my home page, directly under the latest news blurb, you will find a box labeled "Seen on the 'net:" which contains a partial quote from a message thread as well as a link to the original post. These "Seen on the 'net" vignettes are drawn from an XML data file and displayed in random order each time the home page is loaded or refreshed. It's done using standard Expression Web ASP.NET controls along with a few lines of added c# script.

How it's done

This is not going to be a frame-by-frame demonstration which leads you every step of the way. On the other hand, if you have a basic understanding of creating data views in Expression Web, I am confident you will find everything you need to make this work for yourself.

The data file

Create a new XML file with a layout similar to the one illustrated below. In this case, each "item" consists of three fields labeled number, quote, and url. If this were a "Quotation of the Day" project, there might not be a need for the url field; on the other hand, you may want to have an "author" field in its place.

<?xml version="1.0" encoding="utf-8" ?>
<Sections>
     <item
          number="0"
          quote="Around a week ago, I spotted that I was down to a single screw on my T-3. A little anxious searching of this group and online, gave me www.infosystemspro.com. Today a nice little parcel arrived in Scotland from Connecticut and my T3 is perfect again. So, just a testimonial that the service from this site is first class and I'd really recommend it to anyone missing those screws."
          url="http://www.nabble.com/Screws-p7900328.html"
     />
     <item
          number="1"
          quote="I've dealt with Carmine before when I needed replacements for my T3 (which lived in a hard case, making the lost screws equally perplexing), and am glad to do business with him again. I received my replacement screws last week - thanks Carmine - great service."
       url="http://www.palminfocenter.com/forum/viewtopic.php?p=177817"
     />
</Sections>

Note that in the actual file, the data for each field (number, quote, url) exists on a single long line, although I believe it could be entered as you probably see it above. The number field should begin with "0" and increase by 1 for each successive entry; do not skip any numbers - you will understand why as we move along.

Now that you have prepared the XML data file, open or create new the desired web page for editing - it must of course be an .aspx page for the data controls to function. Find a lonely spot on the page, perhaps under the footing or at the bottom of a cell and drag & drop an ASP.NET "DropDownList" control there. Bind the control to the previously created XML file and then set the control's "Visible" property to "False". We are going to use this control "behind the scenes" as a convenient way to automatically determine the number of entries in the XML file; this way, as you add more XML entries, you won't need to adjust the code to keep up.

Find the spot on your page where you want the actual data display and drag & drop your XML file. Arrange the data layout and format as desired. Set a filter based on the "number(@number)" field so that only a single record is displayed, like this:

Making it work

Switch to code view for your web page and insert the following at the top of the page's "#BeginEditable" section or any other convenient place:

<%@ Page Language="C#"%>
<%@ Import Namespace="System.Xml"%>
<%@ Import Namespace="System.Xml.Xsl"%>
<script type="text/c#" runat="server">
    protected void Page_Load(Object Sender, EventArgs e)
    {
       // force the list to bind with the data source
       DropDownList1.DataBind();

       // get a random number between 0 and number of XML entries
       Random Rnd1 = new Random(unchecked((int) DateTime.Now.Ticks));
       int showWhat = Rnd1.Next(0,DropDownList1.Items.Count);

       // make it available to the XSL stylesheet
       XsltArgumentList Args = new XsltArgumentList();
       Args.AddParam("showWhat", "", showWhat);
       Xml2.TransformArgumentList = Args;
    }
</script>

If you have more than one DropDownList on your page (or if you have altered the default name) you will need to edit the two instances of "DropDownList1" in the code. In addition, the last line of the script - Xml2.TransformArgumentList = Args; - will likely need some adjustment. Those first four characters, "Xml2" in this case, need to point to the id of the view control you just created. Look through the page code for a line similar to the following:

<asp:Xml runat="server" documentSource="xml/SeenOnTheNet.xml" transformSource="styles/eenOnTheNet.xsl" id="Xml2" />

and note the value of the "id" field. Adjust the script above as necessary so these values agree.

Save your web page. When you do so, you will be prompted to also save the automatically created .xsl style sheet. Once this has been done, open the style sheet in the editor, go to code view, and insert the following directly below the list of 20 or so "<xsl:param name=..." entries at the top of the code window:

<xsl:param name="showWhat"></xsl:param>
<xsl:template match="/X">
<html><body>
    showWhat =
    <xsl:value-of select="$showWhat"/>
    <br />
</body></html>
</xsl:template>

Just one final step

Scroll down a few lines in the code until you find:

<xsl:variable name="Rows" select="/Sections/item[number(@number) = '2' ]" />

and replace the '2' with $showWhat, as below:

<xsl:variable name="Rows" select="/Sections/item[number(@number) = $showWhat ]" />

Save the .xsl file. If you return to the .aspx page at this point, you will see something like "There are no items to show in this view" but not to worry. Save the .aspx page if necessary and then preview in browser. Upon first load, you should see a randomly selected "Quotation". Each successive reload or refresh should produce another random item from your XML file.