Silverlight专题（12） - 基于Silverlight的Live Search网页搜索

前言：

最近几天微软Live Search公布了重新架构了的Live Search API（版本为2.0 Beta）

该API律属于微软的最新Live Search Service项目 – Silk Road（丝绸之路）

那么如何在Silverlight中调用Live Search Service呢来进行网页，图片，资讯等的搜索呢？

本篇以及后面几篇文章将带大家走进Silverlight+Live Search的美妙世界

准备工作：

请到http://search.live.com/developers申请一个AppID，这个AppID是你访问Live Search的验证信息

用你的hotmail或者msn账号登陆就可以申请了

（以前的Live Search API 1.1 的AppID申请也完成了他的使命，当然大家还可以继续使用以前的AppID来访问1.1版本的Live Search Service啦）

另外大家可以下载最新的SDK： Live Search SDK 2.0 Beta

该SDK包含了API以及示范例子的代码（包括VB和C#版本）

Live Search 2.0共有三种访问协议：

• JSON
• XML
• SOAP

在Live Search的这一系列文章中，我将一直使用SOAP协议来访问，因为其使用C#访问非常便捷

大家可以根据自己的项目的需要使用合适的协议

下面让我们开始

1. 创建一个Silverlight项目
2. 添加一个Service Reference如下

其中Address中的地址格式如下：http://api.search.live.net/search.wsdl?AppID=你申请的AppID

点击Go，如果你输入的地址正确而且有网络连接，应该就能搜索到和上图一样的LiveSearchService

填写你希望的调用的Namespace并点击OK，等待数秒后会弹出如下窗口

不用管它，点OK就可以了

查看下这个Service提供的对象接口

这里面没有LiveSearchService这个对象，也就是你下载到的SDK中的访问LiveSearchService的方式以及不一样了

（两天前还有的，昨晚我再次尝试的时候就没有了，这样做的原因相必是为了与WCF兼容或者是已经采用WCF来提供Service接口了）

取而代之的是LiveSearchPortTypeClient，大家把它当成WebClient类似的东西就很容易领悟到它的调用方式了

也就是说最新的Document与最新提供的LiveSearchService的接口有些出入，不过我已经把这个问题解决

解决方案：

• UI展示代码如下：

1     <UserControl.Resources>
2         <ControlTemplate x:Key="DefaultBtnTemplate" TargetType="Button">
3             <Border CornerRadius="8" x:Name="border">
4                 <Border.Background>
5                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
6                         <GradientStop Color="#FFB2E09A"/>
7                         <GradientStop Color="#FF4E942F" Offset="0.7"/>
8                     </LinearGradientBrush>
9                 </Border.Background>
10                 <TextBlock Margin="{TemplateBinding Padding}" Foreground="White" Text="{TemplateBinding Content}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
11                 <vsm:VisualStateManager.VisualStateGroups>
12                     <vsm:VisualStateGroup x:Name="FocusStates">
13                         <vsm:VisualState x:Name="Focused"/>
14                         <vsm:VisualState x:Name="Unfocused"/>
15                     </vsm:VisualStateGroup>
16                     <vsm:VisualStateGroup x:Name="CommonStates">
17                         <vsm:VisualState x:Name="Normal"/>
18                         <vsm:VisualState x:Name="MouseOver">
19                         </vsm:VisualState>
20                         <vsm:VisualState x:Name="Pressed"/>
21                         <vsm:VisualState x:Name="Disabled"/>
22                     </vsm:VisualStateGroup>
23                 </vsm:VisualStateManager.VisualStateGroups>
24             </Border>
25         </ControlTemplate>
26     </UserControl.Resources>
27     <Grid x:Name="LayoutRoot" Background="#3c3c3c">
28         <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10">
29             <Grid.RowDefinitions>
30                 <RowDefinition Height="Auto"/>
31                 <RowDefinition Height="Auto"/>
32                 <RowDefinition Height="Auto"/>
33             </Grid.RowDefinitions>
34             <Grid.ColumnDefinitions>
35                 <ColumnDefinition Width="Auto"/>
36                 <ColumnDefinition Width="Auto"/>
37             </Grid.ColumnDefinitions>
38             
39             <TextBox x:Name="KeywordsCtl" Width="400"/>
40             <Button x:Name="SearchBtnCtl" Content="Search" Padding="30,5" Margin="4,0,2,0" Template="{StaticResource DefaultBtnTemplate}" Grid.Column="1" Click="SearchBtnCtl_Click"/>
41             <TextBlock Foreground="White" Grid.Row="1" x:Name="WebNumCtl" Margin="2"/>
42             <ListBox x:Name="WebPanelCtl" Grid.Row="2" Grid.ColumnSpan="2" Margin="2,0" BorderThickness="0" Background="#3c3c3c" Height="500">
43                 <ListBox.ItemTemplate>
44                     <DataTemplate>
45                         <StackPanel Width="480">
46                             <HyperlinkButton Content="{Binding Title}" NavigateUri="{Binding OriginalUrl}" TargetName="_blank"/>
47                             <TextBlock TextWrapping="Wrap" Foreground="White" Text="{Binding Description}" Margin="0,2"/>
48                             <TextBlock Text="{Binding DisplayUrl}" Foreground="Green" FontSize="10"/>
49                         </StackPanel>
50                     </DataTemplate>
51                 </ListBox.ItemTemplate>
52             </ListBox>
53         </Grid>
54     </Grid>

KeywordsCtl用于搜索词的输入

SearchBtnCtl为搜索按钮

WebNumCtl用来展示共搜索到多少条新闻

WebPanelCtl用于展示得到的搜索结果

其中WebPanelCtl用到了DataBinding（数据绑定）

• 底层代码：

1 private void SearchBtnCtl_Click(object sender, RoutedEventArgs e)
2 {
3     LiveSearchPortTypeClient liveSearchClient = new LiveSearchPortTypeClient();
4     SearchRequest webRequest = new SearchRequest();
5     webRequest.AppId = "44980C5CFA65792B3CDFF33A5CBF2CFAD17E3349";
6     webRequest.Market = "zh-CN";
7     webRequest.Version = "2.0";
8     webRequest.Sources = new SourceType[] { SourceType.Web };
9     webRequest.Query = this.KeywordsCtl.Text.Trim();
10     webRequest.Options = new SearchOption[] { SearchOption.EnableHighlighting };
11     webRequest.Web= new LiveSearchServiceRef.WebRequest();
12     webRequest.Web.Count = 30;
13     webRequest.Web.CountSpecified = true;
14 
15     liveSearchClient.SearchAsync(webRequest);
16     liveSearchClient.SearchCompleted += new EventHandler<SearchCompletedEventArgs>(liveSearchClient_SearchCompleted);
17 }
18 
19 void liveSearchClient_SearchCompleted(object sender, SearchCompletedEventArgs e)
20 {
21     SearchResponse liveSearchResponse = e.Result;
22     LiveSearchServiceRef.WebResponse webResponse = liveSearchResponse.Web;
23     this.WebNumCtl.Text = String.Format("共{0}条搜索结果",webResponse.Total);
24     List<WebInfo> m_webInfoList = new List<WebInfo>();
25     if (webResponse.Results.Length > 0)
26     {
27         foreach (WebResult webResult in webResponse.Results)
28         {
29             WebInfo webInfo = new WebInfo();
30             webInfo.Title = webResult.Title;
31             webInfo.Description = webResult.Description;
32             webInfo.PublishDateTime = webResult.DateTime;
33             webInfo.OriginalUrl = webResult.Url;
34             webInfo.DisplayUrl = webResult.DisplayUrl;
35             m_webInfoList.Add(webInfo);
36         }
37 
38         this.WebPanelCtl.ItemsSource = m_webInfoList;
39     }
40 }

SearchRequest用来定义AppID以及搜索市场，使用的搜索版本等

Query用于提供给LiveSearchService搜索词

Sources用来定义搜索来源，目前共有

Image，InstantAnswer，News，PhoneBook，RelatedSearch，SpellCheck，Web七种，美国市场还有AD

（注意：你在SearchRequest定义了哪几种搜索源，那么SearchResponse的Response类型也就只有那几种）

代码12，13行用于定义SearchResponse返回多少条结果

LiveSearchPortTypeClient通过异步的方式调用初始化的SearchRequest

LiveSearchPortTypeClient将通过SearchCompleted这个事件回传给客户端查询结果，也就是这里的SearchResponse

38行将获得的数据绑定给WebPanelCtl，这样我们就得到了查询的信息了

其中WebInfo对象是用来存储获取的网页信息，其定义如下

1 namespace LiveSearchWeb4Silverlight
2 {
3     public class WebInfo
4     {
5         public string Title { get; set; }
6         public string Description { get; set; }
7         public string PublishDateTime { get; set; }
8         public string OriginalUrl { get; set; }
9         public string DisplayUrl { get; set; }
10     }
11 }

效果展示：

你可以在搜索框中输入些搜索词来得到结果

我的一些搜索结果展示以及与Live Search的比较

 

源代码下载：