Putting it all together (ASP.Net, Ajax and Silverlight)

I know that many of you will argue on the need to put all these technologies to work together, after all they are intended for different sides of the Internet cloud (ASP.net on the server, Ajax on the server & client and silverlight on the client). My experience though has shown that nothing is carved in stone when it comes to software development. Imagine for example that you have a nice GridView control (ASP.NET) containing data that you need to update without refreshing the whole page (Ajax) and at the same time display a nice graph of these data using an animated silverlight control. Is this possible and how would you go through with it?

Working on the last few days on a similar project made me realize that such a project is doable but it gets more and more complicated as you cross the server – client boundaries. You must always question your self where the code you’re writing will run and what effect will have. It’s relatively easy, for example, to call a web service from your silverlight control using an Ajax web service proxy but what if your silverlight control depends on your server side web form state? It’s not that easy for example, to change your silverlight chart, after a GridView Ajax postback, caused by selecting a row.

So my two cent (from the work I’ve done) for those of you that wish to engage in such a project are:

• Use the script manager’s  scripts section to reference the Silverlight.js script file (and any other javascript files you fill like) otherwise you’ll end up with namespace conflicts (Sys is defined both in Ajax and Silverlight).
  

  <asp:ScriptManager ID="m_scriptManager"
      runat="server" 
      EnablePartialRendering="true"
      LoadScriptsBeforeUI="true">
      <scripts>
          <asp:ScriptReference Path="javascript/Silverlight.js" />
          <asp:ScriptReference Path="Default.aspx.js" />
          <asp:ScriptReference Path="xaml/Scene.xaml.js" />
      </scripts>
  </asp:ScriptManager>

• Don’t put the silverlight control host inside an update panel. I faced several timing issues, when I tried it, with the createSilverlight method. You can always write the object tag manually and avoid the createSilverlight method and thus the timing issues (I didn’t try it, I’m only guessing that it will work) but then you’ll loose all the functionality provided by the Silverlight.js script file (error handling, version checking, event hooking etc.). After all silverlight is a client control and does not need to be updated through a postback wether that is an Ajax one or not you can update it using javascript code.
• When you need your Silverlight control to communicate with the Server side web form, use hidden server controls and trigger them with client side javascript code (asp.net works in a similar way – holds hidden fields to postback data). To update the gridview I spoke about in the previous example, when a specific series of the graph is clicked, you could use a hidden LinkButton for each series of data and trigger it using javascript.
  Aspx

  <asp:LinkButton ID="itemLink" runat="server" CssClass="Hidden"
    CommandArgument="something to specify which link was clicked"
    CommandName="Select"></asp:LinkButton>

  xaml

  <Polygon Name="Match the id of the hyperlik"
      MouseLeftButtonDown='javascript:seriesClick' ... />
  

  Script

  function seriesClick(sender, eventArgs)
  {
   // args= ... prepare your event args
    __doPostBack(sender.name, args);
  } 

  Server Side Event Handler

  protected void invisbleLinks_Command(object source, 
    CommandEventArgs e)
  {  //do what ever you need
  }

• Things are much easier, when you need to call a javascript method to update the silverlight control. All you need to do is use the scriptManager’ s register script methods, passing the script function you want to call.

  ScriptManager.RegisterStartupScript(
      this, this.GetType(),
      "RenderPageScript",
      "Javascript function you want to call after an ajax post back",
      true);