如何将 HTML 解析 (HAP) 绑定到 ListBox DataTemplate

Question

我当前正在运行以下代码，以使用适用于 WP7 的 HTML Agility Pack 来解析 HTML 链接。

编辑******************************** 建议更改的代码

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,
    }

    );

这会将以下内容输出到滚动查看器

每行中有多个 td，用于航班、时间、航空公司等。想要做的是将每个 td 内部文本绑定到列表框 dataTemplate。

下面是我认为 XAML 看起来像

<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 的示例：

 <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>

所以问题是：如何将每个 td 结果绑定到其自己的文本块？

Answer 1

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

这是你的代码：

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> 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;

Answer 2

您可以创建一个绑定到 UI 的简单模型对象：

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

然后使用 Select 投影将文档转换为航班列表：

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,
              ...
           }

然后将此 Flight 实例列表绑定到您的 UI。

我不熟悉 HTML Agility Pack，因此我假设它的 Linq API 与 Linq to XML 类似或相同。您可能需要稍微调整上面的查询代码，但一般方法应该没问题。