One-step learning of Silverlight 2 series (25): Live Search for integrated instances

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

This section describes how to interact with the browser in the previous sections and provides a comprehensive example-Live Search

Prerequisites

In this example, we call the Live Search API to dynamically create a DOM structure in Silverlight and display the Search results. Before using the Live Search API, you must apply for an Application ID in the Live Search Developer Center.

The Application ID takes effect in about 10 minutes after the application is completed. For more information about the Live Search API, see here.

Write ASMX

Directly calling the API may return a large amount of information. For the sake of simplicity, we will perform some processing on the returned results and compile a SearchResultItem class:

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

Add a Service reference to the Live Search API address: http://soap.search.live.com/webservices.asmx? Wsdl.

The returned results are processed in ASMX. The Silverlight program will directly call ASMX. When you call Live Search, you must specify the Application ID and localization information. The queried parameters are passed in when called in the Silverlight program.

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

Test whether our service is normal:

Modify test page

In the ASPX test, modify the style control of the Silverlight plug-in and add a div to display the search results:

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

Define several simple styles:

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

Implement the Silverlight Program

Compile a simple Silverlight interface to make it look like:

The XAML declaration is as follows:

<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 = "#62a21" Margin = "20 0 0 0" Content = "Search" FontSize = "16" Click = "btnSearch_Click"> </Button> </StackPanel> <TextBlock Grid. row = "2" Text = "Webpage Search Result" Foreground = "# 59990E" FontSize = "16" Margin = "20 0 0 0"> </TextBlock> </Grid>

Add a reference to asmx in the Silverlight project and compile the "Search" button implementation. For how to call ASMX, refer to the following steps to learn Silverlight 2 series (15 ): ASMX for data and communication. Dynamically create a DOM structure and display the result:

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

Run the command to check the effect and query the blog:

Conclusion

This article integrates the previous content about browser integration and data and communication, and develops a comprehensive example-Live Search. You can download the sample code from here.