How to Bind HTML Parse (HAP) to ListBox DataTempla

Question

I am currently running the below code to parse an HTML link using HTML Agility Pack for WP7.

EDIT ******************************** Code with suggested changes

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { var html = e.Result;

var doc = new HtmlDocument();
    doc.LoadHtml(html);

var list = doc.DocumentNode.Descendants("div").ToList();


var node = doc.DocumentNode.Descendants("div")
    .FirstOrDefault(x => x.Id == "FlightInfo_FlightInfoUpdatePanel")
    .Element("table")
    .Element("tbody")
    .Elements("tr").Select(n => new Flight()
    {
        Airline = n.Element("td").Single(j => j.Attribute("class") == "airline").Value,
        FlightType = n.Element("td").Single(j => j.Attribute("class") == "airline").Value,
        Time = n.Element("td").Single(j => j.Attribute("class") == "airline").Value,
    }

    );

This outputs the below into a scrollviewer

There are multiple td's in each line for flight, time, airline etc.. What I would like to do is to bind each td inner text to a listbox dataTemplate.

Here is an example of what I think the XAML would look like

<ListBox Margin="6,6,-12,0" Name="listBox1">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" Width="432" Height="Auto">

                            <TextBlock Text="{Binding Airline}" Foreground="#FF4BCCF5" FontSize="24" />
                            <TextBlock Text="{Binding Flight}" TextWrapping="Wrap" FontSize="22" Foreground="#FF969696" />
                            <TextBlock Text="{Binding Time}" TextWrapping="Wrap" FontSize="20" Foreground="#FF05C16C" />
                            <TextBlock Text="{Binding Origin}" TextWrapping="Wrap" FontSize="20" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

HTML Example:

 <tr class="">
 <td class="airline"><img src="/images/airline logos/NZ.gif" title="AIR NEW ZEALAND LIMITED. " alt="AIR NEW ZEALAND LIMITED. " /></td>
 <td class="flight">NZ8</td>
 <td class="codeshare">&nbsp;</td>
 <td class="origin">San Francisco</td>
 <td class="date">01 Sep</td>
 <td class="time">17:15</td>
 <td class="est">18:00</td>
 <td class="status">DEPARTED</td>
 </tr>

So the question is: How do I bind each td results to its own text block?

Answer 1

You could create a simple model object that you bind to your UI:

public class Flight
{    
    public string Airline { get; set; }
    public string Flight { get; set; }
    public DateTime Time { get; set; }    
}

Then use a Select projection to convert your document into a list of flights:

var node = doc.DocumentNode.Descendants("div")
    .FirstOrDefault(x => x.Id == "FlightInfo_FlightInfoUpdatePanel")
    .Element("table")
    .Element("tbody")
    .Elements("tr").Aggregate("Flight list\n", (acc, n) => acc + "\n" + n.OuterHtml);

List<Flight> flights = node.Elements("td").Select(i =>
           new Flight()
           {
              Airline = i.Element("td").Single(j => j.Attribute("class") == "airline").Value,
              Flight = i.Element("td").Single(j => j.Attribute("class") == "flight").Value,
              ...
           }

Then bind this list of Flight instances to your UI.

I am not familiar with HTML Agility Pack, so I am assuming that its Linq API is similar, or the same as Linq to XML. You might have to tweak the query code above a little bit, but the general approach should be fine.

Answer 2

public class Flight
{    
    public string Airline { get; set; }
    public string Flight { get; set; }
    public DateTime Time { get; set; }    
}

This is your code:

var node = doc.DocumentNode.Descendants("div")
        .FirstOrDefault(x => x.Id == "FlightInfo_FlightInfoUpdatePanel")
        .Element("table")
        .Element("tbody")
        .Elements("tr").Aggregate("Flight list\n", (acc, n) => acc + "\n" + n.OuterHtml);

After

List<Flight> flightList=new List<Flight>();
foreach (HtmlNode tr in node){
    flightList.Add(new Flight(){    
        Airline=tr.Descendants("td")
            .FirstOrDefault(f=>f.Attributes["class"].Value=="airline").InnerHtml,
        Flight=tr.Descendants("td")
            .FirstOrDefault(f=>f.Attributes["class"].Value=="flight").InnerText
// Insert other properties here
    });    
}

listbox1.ItemsSource=flightList;