概述

Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫(huà)、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。

本節(jié)將綜合前面幾篇介紹與瀏覽器交互部分內(nèi)容，做一個(gè)綜合示例——Live Search

準(zhǔn)備知識(shí)

在本示例中，我們將通過(guò)調(diào)用Live Search API，在Silverlight中動(dòng)態(tài)創(chuàng)建DOM結(jié)構(gòu)，將搜索的結(jié)果展現(xiàn)出來(lái)。在使用Live Search API之前，需要先去Live Search Developer Center申請(qǐng)一個(gè)應(yīng)用程序ID。

申請(qǐng)完成后應(yīng)用程序ID大約在10分鐘左右生效。關(guān)于Live Search API的有關(guān)詳細(xì)信息，請(qǐng)大家參考這里。

編寫(xiě)ASMX

直接調(diào)用API，返回的信息可能有很多，為了簡(jiǎn)單起見(jiàn)，我們對(duì)返回的結(jié)果做一些處理，編寫(xiě)一個(gè)SearchResultItem類(lèi)：

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

添加對(duì)Live Search API的Service引用，地址為：http://soap.search.live.com/webservices.asmx?wsdl。

在ASMX中對(duì)返回的結(jié)果進(jìn)行一些處理，Silverlight程序最后將直接調(diào)用ASMX。在調(diào)用Live Search時(shí)需要指定應(yīng)用程序ID以及本地化的信息等，查詢(xún)的參數(shù)將在Silverlight程序中調(diào)用時(shí)傳入。

[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();}

測(cè)試一下我們的服務(wù)是否正常：

修改測(cè)試頁(yè)

在測(cè)試ASPX中，修改Silverlight插件的樣式控制，并添加一個(gè)div用來(lái)顯示搜索的結(jié)果：

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

定義幾個(gè)簡(jiǎn)單的樣式：

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

實(shí)現(xiàn)Silverlight程序

編寫(xiě)一個(gè)簡(jiǎn)單的Silverlight界面，使其看起來(lái)如圖所示：

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="網(wǎng)頁(yè)搜索結(jié)果" Foreground="#59990E"               FontSize="16" Margin="20 0 0 0"></TextBlock></Grid>

在Silverlight項(xiàng)目中添加對(duì)于ASMX的引用，并編寫(xiě)“Search”按鈕的實(shí)現(xiàn)，對(duì)于如何調(diào)用ASMX，可以參考一步一步學(xué)Silverlight ：數(shù)據(jù)與通信之ASMX。動(dòng)態(tài)創(chuàng)建DOM結(jié)構(gòu)，并將結(jié)果顯示出來(lái)：

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

運(yùn)行看一下效果，查詢(xún)博客園：

結(jié)束語(yǔ)

本文綜合了前面關(guān)于瀏覽器集成以及數(shù)據(jù)與通信部分的內(nèi)容，開(kāi)發(fā)了一個(gè)綜合的示例——Live Search。你可以從這里下載本文示例代碼。

NET技術(shù)：一步一步學(xué)Silverlight ：綜合實(shí)例之Live Search，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。