一步一步學Silverlight 2系列（25）：綜合執行個體之Live Search

概述

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引用，位址為：http://soap.search.live.com/webservices.asmx?wsdl。

在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);
        }
    }
}      

運作看一下效果，查詢部落格園：

結束語

本文綜合了前面關于浏覽器內建以及資料與通信部分的内容，開發了一個綜合的示例——Live Search。你可以從這裡下載下傳本文示例代碼。