Silverlight integrates Asp.net Ajax technology applications

Silverlight will support developers in creating a wide range of web applicationsProgramWe will soon see the arrival of a visual wave of Web applications,

Web pages can be drawn using flexible media playback, animation, and vector graphics. This will facilitate the expansion of Web applications. This article describes an example of a stock marquee.

In this example, selectCode3209 of APP shares are used as samples, which can be embedded into existing code and provide a better query than the "HTML <marquee>" tag

Ticker. In order to give users the most value, it is necessary to effectively obtain information from the server through the Internet for transactions. Will be discussed through integration

Silverlight and Asp.net Ajax are used to create a wide array of B/S applications. Similar visual effects can also be created through other channels, with the main focus being

How to integrate these two technologies. Ajax is used to continuously obtain new stock information and send it to Silverlight for display. The key points of this solution are as follows:

1. Use XAML and Silverlight

2. Use Asp.net ajax to achieve no refreshing display.

Client installation:

Silverlight 1.1 Alpha, and any browser

Development and Server installation:

1. Microsoft. NET 2.0 framework. This example is developed using vs2005.

2. Silverlight 1.1 Alpha (or confirm to contain the Silverlight. js file)

3. Download Asp.net Ajax at http://ajax.asp.net/

Overview:

In the following example, three levels of content are introduced.

Continuous changes:

The following shows a continuously changing view. The program contains two textblocks, which are partially displayed when they are within the scope of the silverlikes control. Danda

At the end of ticketext2, ticketext1 data will be copied, and tickertext2 information will be updated during the animation startup process. Theory

In the above section, we can get a lot of textblocks. In order to make it simple, we only need two examples.

Use Asp.net ajax to call Web Services. Asp.net Ajax will register the Web services that use the <asp: servicereference> label for you.

An external cirpt proxy is automatically generated. After the page is loaded, some data on the xamltextblock is returned to the web service. Below is

The sequence diagram of message passing between different objects:

Using queues to share data between Silverlight and Asp.net Ajax

Because not all data is retrieved through Ajax at the same time, the program uses Asp.net textbox as a pair column in updatepanel. Asp.net Ajax

Constantly update data, while Silverlight periodically extracts data from the queue.

Createsilverlight. js

Description of each file

The following code runs the Silverlight plug-in. If you do not install sliverlight, you will be prompted to install the Silverlight plug-in.

// Contains callto Silverlight. JS, example below loads tickertape. XAML

Function createsilverlight ()

{

Silverlight. createobjectex ({

Source: "tickertape. XAML ",

Parentelement: Document. getelementbyid ("silverlightcontrolhost "),

ID: "silverlightcontrol ",

Properties :{

Width: "500 ",

Height: "25 ",

Version: "0.95 ",

Background: "#00000000 ",

Iswindowless: false,

Enablehtmlaccess: true },

Events :{}

});

}

Ticker. aspx

This page uses Silverlight to display the securities quotation data and ASP. netajax to retrieve data from the server, and treats the textbox as a queue. asp. netajax

The stock data will be filled in the queue. When it is passed to the Silverlight control through JavaScript, it will be deleted from the queue.

<! -- Ajax code -->

<Asp: scriptmanager runat = "server" id = "scriptmanager">

<Services>

<Asp: servicereference Path = "stockupdate. asmx"/>

</Services>

</ASP: scriptmanager>

The following Asp.net Ajax code undertakes a few important tasks. By adding the <asp: scriptmanager> control, we can access Asp.net

The method provided by Ajax. To use aps.net Ajax, you must have this control on the page. This Code also registers the call when loading the leaf surface for the first time.

Javascirpt's Web Service stockupdate. asmx.

<Asp: updatepanel id = "stockpanel" runat = "server">

<Contenttemplate>

<Asp: timer id = "refreshtimer" runat = "server" interval = "3000"

Ontick = "refreshtimer_tick"> </ASP: timer>

<Asp: textbox id = "newstockqueue" runat = "server" width = "500">

</ASP: textbox>

</Contenttemplate>

</ASP: updatepanel>

The following code uses the Ajax component to regularly access the server and arrange to enter the textbox of the new stock queue

<Asp: updatepanel id = "stockpanel" runat = "server">

<Contenttemplate>

<Asp: timer id = "refreshtimer" runat = "server" interval = "3000"

Ontick = "refreshtimer_tick"> </ASP: timer>

<Asp: textbox id = "newstockqueue" runat = "server" width = "500">

</ASP: textbox>

</Contenttemplate>

</ASP: updatepanel>

Tickertape. XAML

The XAML runs in the siverlight plug-in. It will scroll through the screen to display the stock quotation data, and the textblocks in the West will contain the stock market data.

<! -- These contain the stock market information that are visible

The client. -->

<Textblock X: Name = "tickertext1" canvas. Top = "3" fontsize = "12"

Foreground = "yellow" fontfamily = "Arial black" text = ""/>

<Textblock X: Name = "tickertext2" canvas. Top = "3" fontsize = "12"

Foreground = "yellow" fontfamily = "Arial black" text = ""/>

Storyboadrd moves the data from the left until it reaches the display edge, and then calls the refreshticker code to extract the data from tickertext2

Copy to tickertext1, update data from the queue to ticekertext2, and restart the animation.

<! -- This storyboard will animate the text boxes below,

Moving them to the left until they hit the end.

Then it will restart, giving the appearance of continuously moving

Information -->

<Storyboard X: Name = "tickeranimation" completed = "refreshticker">

<Doubleanimation X: Name = "animationtext1"

Storyboard. targetname = "tickertext1"

Storyboard. targetproperty = "(canvas. Left)" begintime = "0"

Duration = "0: 16" from = "1" to = "-550"/>

<Doubleanimation X: Name = "animationtext2"

Storyboard. targetname = "tickertext2"

Storyboard. targetproperty = "(canvas. Left)" begintime = "0"

Duration = "" From = "550" to = "0"/>

</Storyboard>

Stockupdate. asmx

This is a simple Web Service. It provides a way to access the makretmanager class to access

Webserices and Asp.net Ajax will automatically generate a Web Proxy.

Modify the code on the code page.

After adding system. Web. Extensions and Asp.net Ajax namespace to GAC

// This is the ASP. NET Ajax reference we need

Using system. Web. Script. Services;

We can also add the scriptserviece attribute to the class.

[WebService (namespace = "http://xxxx.name/")]

[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]

[Scriptservice]

Public class stockupdate: system. Web. Services. WebService

Marketmanager. CS

This class provides virtual random stock and some transaction and price information.

Web. config

Automatically generated without special changes

Silverlight can produce rich, shocking visual effects and good user interaction before multi-browsing, but it is just an empty shell and requires data

No doubt, Asp.net Ajax is the best way to retrieve data from the server.

Download the sample source code: tickersample_src.zip (11.29 KB)