（25）：Silverlight 2 综合实例之Live Search_app

概述概述 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据概述 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic,Visual C#,IronRuby,Ironpython，对JsON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。本节将综合前面几篇介绍与浏览器交互部分内容，做一个综合示例——live Search 准备知识在本示例中，我们将通过调用live Search API，在Silverlight中动态创建DOM结构，将搜索的结果展现出来。在使用live Search API之前，需要先去 Live Search Developer Center申请一个应用程序ID。

申请完成后应用程序ID大约在10分钟左右生效。关于live Search API的有关详细信息，请大家参考这里。编写ASMX 直接调用API，返回的信息可能有很多，为了简单起见，我们对返回的结果做一些处理，编写一个SearchResultItem类：

public class SearchResultItem{    public string Title { get; set; }    public string Url { get; set; }    public string Description { get; set; }}

添加对live Search API的Service引用，地址为： [url]http://soap.search.live.com/webservices.asmx?wsdl[/url]。

在ASMX中对返回的结果进行一些处理，Silverlight程序最后将直接调用ASMX。在调用live Search时需要指定应用程序ID以及本地化的信息等，查询的参数将在Silverlight程序中调用时传入。

[WebMethod]public SearchResultItem[] DoSearch(string query){    MSNSearchPortTypeClIEnt s = new MSNSearchPortTypeClIEnt();    SearchRequest searchRequest = new SearchRequest();    int arraySize = 1;    SourceRequest[] sr = new SourceRequest[arraySize];    sr[0] = new SourceRequest();    sr[0].source = SourceType.Web;    searchRequest.query = query;    searchRequest.Requests = sr;    searchRequest.AppID = "C0680205851CCC0E38946DB8FF74156C1C826A86";    searchRequest.CultureInfo = "zh-CN";    SearchResponse searchResponse;    searchResponse = s.Search(searchRequest);    List<SearchResultItem> Lists = new List<SearchResultItem>();    foreach (SourceResponse sourceResponse in searchResponse.Responses)    {        Result[] sourceResults = sourceResponse.Results;        foreach (Result sourceResult in sourceResults)        {            SearchResultItem item = new SearchResultItem();            if ((sourceResult.Title != null) && (sourceResult.Title != String.Empty))                item.Title = sourceResult.Title;            if ((sourceResult.Description != null) && (sourceResult.Description != String.Empty))                item.Description = sourceResult.Description;            if ((sourceResult.Url != null) && (sourceResult.Url != String.Empty))                item.Url = sourceResult.Url;            Lists.Add(item);        }    }    return Lists.ToArray();}

测试一下我们的服务是否正常：

修改测试页在测试ASPX中，修改Silverlight插件的样式控制，并添加一个div用来显示搜索的结果：

<div  style="height:100%;">    <asp:Silverlight ID="Xaml1" runat="server"         Source="~/ClIEntBin/TerryLee.SilverlightGoogleSearch.xap"        Version="2.0" WIDth="857" Height="140" />    <div ID="result"></div></div>

定义几个简单的样式：

<style type="text/CSS">    #result    {        margin-left:20px;    }    .urlstyle    {        color:#59990E;    }    .itemstyle    {        border-bottom:dotted 1px #59990E;        margin-bottom:20px;    }</style>

实现Silverlight程序编写一个简单的Silverlight界面，使其看起来如图所示：

XAML声明如下：

<GrID x:name="LayoutRoot" Background="White">    <GrID.RowDeFinitions>        <RowDeFinition Height="55"></RowDeFinition>        <RowDeFinition Height="50"></RowDeFinition>        <RowDeFinition Height="35"></RowDeFinition>    </GrID.RowDeFinitions>    <GrID.ColumnDeFinitions>        <ColumnDeFinition WIDth="*"></ColumnDeFinition>    </GrID.ColumnDeFinitions>        <Image Source="liveSearch.png" GrID.Column="0"></Image>    <StackPanel GrID.Row="1" OrIEntation="Horizontal">        <TextBox x:name="txtquery" WIDth="400" Height="35"                 margin="50 0 0 0" borderBrush="#3F7801"></TextBox>        <button x:name="btnSearch" WIDth="120" Height="35"                Background="#62A21D" margin="20 0 0 0"                Content="Search" FontSize="16" Click="btnSearch_Click"></button>    </StackPanel>    <TextBlock GrID.Row="2" Text="网页搜索结果" Foreground="#59990E"               FontSize="16" margin="20 0 0 0"></TextBlock></GrID>

在Silverlight项目中添加对于ASMX的引用，并编写“Search”按钮的实现，对于如何调用ASMX，可以参考一步一步学Silverlight 2系列（15）：数据与通信之ASMX。动态创建DOM结构，并将结果显示出来：

private voID btnSearch_Click(object sender,RoutedEventArgs e){    liveSearchWebServiceSoapClIEnt clIEnt = new liveSearchWebServiceSoapClIEnt();    clIEnt.DoSearchCompleted += new EventHandler<DoSearchCompletedEventArgs>(clIEnt_DoSearchCompleted);    clIEnt.DoSearchAsync(this.txtquery.Text);}voID clIEnt_DoSearchCompleted(object sender,DoSearchCompletedEventArgs e){    if (e.Error == null)    {        SearchResultItem[] results = e.Result as SearchResultItem[];        HTMLElement result = HTMLPage.document.GetElementByID("result");        foreach (SearchResultItem item in results)        {            HTMLElement itemElement = HTMLPage.document.CreateElement("div");            itemElement.CSSClass = "itemstyle";            HTMLElement TitleElement = HTMLPage.document.CreateElement("a");            TitleElement.SetAttribute("href",item.Url);            TitleElement.SetAttribute("innerText",item.Title);            HTMLElement descriptElement = HTMLPage.document.CreateElement("div");            descriptElement.SetAttribute("innerText",item.Description);            HTMLElement urlElement = HTMLPage.document.CreateElement("span");            urlElement.SetAttribute("innerText",item.Url);            urlElement.CSSClass = "urlstyle";            itemElement.AppendChild(TitleElement);            itemElement.AppendChild(descriptElement);            itemElement.AppendChild(urlElement);            result.AppendChild(itemElement);        }    }}