Need help with ASP.NET AJAX and updating Silverlight 2.0 content
Last post 08-28-2008 2:08 AM by kamii47. 4 replies.
Sort Posts:
04-26-2008 7:25 PM
Need help with ASP.NET AJAX and updating Silverlight 2.0 content

Hi all,

I'm using .NET 3.5 and Silverlight 2 Beta 1. I'm new to Silverlight so it's possible I'm not conceptualizing this properly.

Basically, we have a basketball Tablet PC application that allows inputs of shots, fouls, etc. that uploads a new XML file via FTP every so often. People can "watch" the progress of the game on an ASP.NET web site.

Currently, I'm using UpdatePanels that update based on a timer (every 15 seconds). The event on the UpdatePanel reads in the new XML data and updates a number of literals that contain the current game score, period, time left, etc. However, every time that happens I also want to pass a new Shots array to a Silverlight control that displays shot location on the court, whether the shot was made or missed, a mouseover of the player who attempted the shot, etc. The Silverlight control then needs to compare the new shots array to the array of shots it already has, removing shots from the canvas that were deleted on the tablet PC (and so are now absent from the XML file), while also adding new updated shots to the canvas one at a time with a small delay so that a user can see what's going on. I've been reading articles all today and yesterday and am a bit confused on how to pass the new shots array in to Silverlight, especially using the same Timer based event that's already updating .NET controls on the page.

Should I be using a Silverlight-based timer instead? Am I just going about this all wrong?

Any help would be greatly appreciated! 

Falcon

Loading...
Joined on 08-07-2006
Posts 3
04-27-2008 3:22 AM
Re: Need help with ASP.NET AJAX and updating Silverlight 2.0 content

Alright, so here's where I'm at now:

Step 1: Create a Timer in Silverlight (http://blogs.msdn.com/silverlight_sdk/archive/2008/03/27/make-a-silverlight-timer-silverlight-2.aspx)
    Unfortuately, it looks like this will have to be a separate timer from the one I'm using in ASP.NET AJAX unless someone has a suggestion. I don't like the  idea of two timers running simultaneously, but I'm not sure what else to do.

Step 2: Each time the timer gets to the specified time, use WebClient to connect to an .aspx page that will return the updated shots as XML or JSON (http://blogs.msdn.com/silverlight_sdk/archive/2008/04/01/using-webclient-and-httpwebrequest.aspx)

Step 3: Figure out which shots, if any, have been removed, and remove them from the shots array and UI in Silverlight. Figure out which shots, if any, are new, and add them to the shots array and one at a time with delay to the UI in Silverlight.

Does this sound like an okay way to do things? (I know, ideally, it would be best to only grab the new/removed shots and not have to check the list every time, but unfortunately we don't have time to implement this. This is a class project for a university and we're on a very short time table)

Also, could I get a suggestion on how to display each shot on the canvas? I started out just using an Image and appending a TextBlock on image mouseover, then hiding the TextBlock on mouse leaving (it doesn't appear that I can actually remove the TextBlock, just set the visibility to hidden?), but I wasn't able to position the TextBlock next to the image like I wanted (couldn't find a way to set where the TextBlock was drawn on the canvas when I added it, nor style the TextBlock with a background color, etc.). For each shot, there should be a hit or miss image, and when that image is moused over, a small block of text should pop up next to it saying who took the shot and from how far away. Would there be a better way to store all of that information than having that text be a Tag on the Image and creating a new TextBlock on mouseover from the text in the Tag? Perhaps some sort of composite control for each shot?

I apologize for the newbie questions, but I've had less than a week to try and pick up Silverlight and ASP.NET AJAX and get all of this working, with no previous WPF or Silverlight experience. Until last week I've only worked with .NET 2.0, so I think some of the new terminology and differences in the framework are tripping me up.

Falcon

Loading...
Joined on 08-07-2006
Posts 3
04-29-2008 12:32 AM
Marked as Answer
Re: Need help with ASP.NET AJAX and updating Silverlight 2.0 content

Hello, maybe I don't understand you very well. Let's see. You don't want to display a real time video of a basketball game. Instead, you want to display some information of the game.

First, please don't use UpdatePanel. Any post back, including partial post back, will cause the Silverlight application to reload. You can use a single Silverlight timer. In this timer's Tick event handler, you can update the Silverlight content as well as call JavaScript functions to update the html content. Please refer to http://msdn2.microsoft.com/en-us/library/cc221359(vs.95).aspx to see how to call JavaScript functions from managed code.

You can create a class named Shot to represent information such as whether this shot hits or misses, and the player. After getting the xml document, you can use LINQ to XML to parse it and load the data into a list of Shot classes. Then you can use data binding to display those information. You can use a ListBox with a custom DataTemplate. This can save you a lot of troubles. There're a series of tutorials on ScottGu's blog. I suggest you to read the 3rd and the 5th tutorials.

Finally, you can use the Popup Control to hide/show some contents. Or you can of course set their Visibility directly.

shanaolanxing - This posting is provided "AS IS" with no warranties, and confers no rights.

Yi-Lun Luo - MSFT

Loading...
Joined on 10-29-2007
Posts 2,406
04-29-2008 1:26 AM
Marked as Answer
Re: Need help with ASP.NET AJAX and updating Silverlight 2.0 content

 Thanks for the response.

 Here's what I have so far:

 

(That was all test data, so of course the stats, score and amount of shots don't match up. The tablet PC app is calculating most of the stats, so I'm just reading them in from XML instead of recalculating them all) 

Currently, the Silverlight application resides outside of the Update Panel, because of course, it would be horrible to reload the Silverlight application every time. There are 2 separate update panels on the page: one before the Silverlight control and after, but they both use the same 15-second timer as a trigger to update.

I'm using 2 separate, simultaneous 15 second timers; one in Silverlight and one in ASP.NET AJAX. If I get time, I'd like to switch all of that over to using the Silverlight timer and calling JavaScript from managed code, like you described. 2 different timers definitely feels like a hack to me.

I ended up using a .aspx file to parse the XML on the server and am sending the response to Silverlight via JSON. I'm using the built-in JSON deserialization to turn the JSON into a List of Shot objects, with things like the X/Y coordinates, point value, player, team, etc. as members of that class. LINQ to XML would probably be better since you could go directly from the XML to Shot objects, but after reading around 200 different Silverlight pages with tutorials and watching around 20 videos, my head was swimming. =P It's also really confusing when around 3/4 of the tutorials are in Silverlight 1.0 and it's not always clear to someone who's brand new to Silverlight how to move them over to 2. That being said, I really do appreciate those of you who are pumping out the tutorials and videos. They can really help when some of the other documentation feels disjointed or unfinished.

After that, I'm maintaining a few Dictionary<Int32, Shot> for constant-time access and keeping the Shot ID integer as the key. This way, I can keep a list of all of the currentShots, a list of the newShots that need to be added to the canvas one at a time with a time delay, and the list of tempShots that have come in from JSON that I need to compare to the currentShots to see which need to be removed, updated, and added. That also allowed me to keep a dictionary of <Int32, Image> which holds all of the current Images on the canvas. I add the image to the Canvas and that dictionary at the same time (with the Image Tag describing the shot, something like "PlayerName missed a shot from 25 feet") then if a shot gets removed I can access it via that dictionary to switch the visibility, then remove it from the dictionary since to me it's "removed". I'm assuming if I had used LINQ to XML, updates, adds, and removes could be handled automatically somehow with databinding, correct? I can easily see how that would be handled with a ListBox, but with what I was doing with absolutely positioned Images for shots, it isn't as clear to me. (Unless the custom DataTemplate would allow for me to do exactly what I did using a ListBox) I'd probably need some sort of custom control to databind to at that point, which would probably be the same amount of work or more than the way I ended up doing it.

The last thing I'd like to do is add DropdownLists to the HTML/.aspx page that would access the managed code using JavaScript and allow people to filter the shots by player, period, and hit/miss once the game is over. (The game also allows you to play through the game in order once the game is finished, accessed by the "Game Playback" button in the linked picture) I just haven't had a chance to wrap my head around LINQ and the managed code/JavaScript bridges yet.

Falcon

Loading...
Joined on 08-07-2006
Posts 3
08-28-2008 2:08 AM
Re: Need help with ASP.NET AJAX and updating Silverlight 2.0 content

Any help regarding this Post http://silverlight.net/forums/t/23654.aspx 

"May I access js in xaml"

Don't wants to use silverlight timer and and partial post back via update panel. 

Kamran Shahid
Sr. Software Engineer
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
Netprosys Inc.
www.netprosys.com

Remember to click "Mark as Answer" on the post that helps U

kamii47

Loading...
Joined on 05-26-2005
Karachi, Pakistan
Posts 50
Page view counter