Silverlight Progress in an AJAXed GridView

This is a quick article on combining Silverlight and AJAX together to make richer user experiences for your existing Web Applications.

There are three parts to this sample:

• The first part is building a standard asp.net gridview that binds to an xml file, and making it run under ajax.


• The second part is about creating a simple silverlight progress indicator.


• The third part is about combining the 2 samples together to make a datagrid which uses Silverlight as its progress indicator, rather than HTML.

Part One - Building a simple databound ajax gridview

1) Create a new website in ASP.NET
2) Create an Xml File (called mydata.xml) and drop it in the App_Data folder. My Xml is below:

<?xml version="1.0" encoding="utf-8" ?>
<Items>
  <Item Name="Item1"/>
  <Item Name="Item2"/>
  <Item Name="Item3"/>
  <Item Name="Item4"/>
  <Item Name="Item5"/>
  <Item Name="Item6"/>
  <Item Name="Item7"/>
  <Item Name="Item8"/>
  <Item Name="Item9"/>
  <Item Name="Item10"/>
  <Item Name="Item11"/>
  <Item Name="Item12"/>
  <Item Name="Item13"/>
  <Item Name="Item14"/>
  <Item Name="Item15"/>
</Items>

3) Drop an XmlDataSource onto the page, and set the datafile

<asp:xmldatasource runat="server" id="itemsDataSource" datafile="~/App_Data/MyData.xml"></asp:xmldatasource>

4) Drop a gridview onto the page and set the datasource

<asp:GridView ID="GridView1" runat="server" DataSourceID="itemsDataSource" AllowPaging="True" PageSize="5" OnDataBinding="GridView1_DataBinding"></asp:GridView>

5) Add some code to send the page to sleep for a few seconds on databind

protected void GridView1_DataBinding(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            System.Threading.Thread.Sleep(5000);
        }
    }

6) You should now be able to run the sample on your site
7) If all is okay, we can now ajaxify it, so drop a scriptmanager onto the page, drop an UpdatePanel and UpdateProgress on the page
8) Stick the gridview within the update panel, and put a message like Hello World in the Update progress. You should now have some like the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" DataSourceID="itemsDataSource" AllowPaging="True"
                    PageSize="5" OnDataBinding="GridView1_DataBinding">
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Hello World
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
<asp:xmldatasource runat="server" id="itemsDataSource" datafile="~/App_Data/MyData.xml"></asp:xmldatasource>
</html>

Part 2 - Creating the Silverlight Page (1.1, but 1.0 will also work)

1) Add a silverlight project to your solution
2) Modify the Xaml to the following (this will create a rotating label with the text "Please Wait"

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="MySilverlightApplication.Page;assembly=ClientBin/MySilverlightApplication.dll"
        Width="150"
        Height="150"
        Background="White"
        >
  <Canvas.Triggers>
    <EventTrigger>
      <BeginStoryboard>
        <Storyboard Storyboard.TargetName="myRotate"
                    Storyboard.TargetProperty="Angle"
                    RepeatBehavior="Forever"
                    >
          <DoubleAnimation From="0" To="360" Duration="0:0:05"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
  <TextBlock x:Name="myTextBlock" Text="Please Wait" Canvas.Left="25" Canvas.Top="50">
    <TextBlock.RenderTransform>
      <RotateTransform x:Name="myRotate" Angle="0" CenterX="30" CenterY="10"/>
    </TextBlock.RenderTransform>
  </TextBlock>
</Canvas>

You should now be able to run your project and all will be fine and dandy.

Part 3 - Integrating the two together

1) On your website, click "Add Silverlight Link", and click on your Silverlight project
2) Copy the silverlight.js file to your website
3) Copy TestPage.html.js to your website and rename it to Default.aspx.js
4) Comment out the section of the Default.aspx.js which does the document.body.onload, your Default.aspx.js file should now look like this

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.1",
            enableHtmlAccess: "true"
        },
        events: {}
    });
     
//    // Give the keyboard focus to the Silverlight control by default
//    document.body.onload = function() {
//      var silverlightControl = document.getElementById('SilverlightControl');
//      if (silverlightControl)
//      silverlightControl.focus();
//    }

}

5) Modify the head tag of your default.aspx to include the javascript files

<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
    <style type="text/css">
        .silverlightHost
        {
            width: 150px;
            height: 150px;
        }
    </style>
</head>

6) Modify the Update Progress to include your silverlight control

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <div id="SilverlightControlHost" class="silverlightHost">

                    <script type="text/javascript">
                        createSilverlight();
                    </script>

                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

7) You should now be able to run your website and have a Silverlight progress indicator.

You will obviously be able to do even cooler things like proper animations, media etc

Have fun, the full source is available on my skydrive

Code Reuse (in Silverlight Today)

Following on from my previous posting where I ask for some support in Visual Studio for Code Reuse with Silverlight projects. Daniel Moth (one of Microsoft UK's evangelists) kindly posted a current workaround suggestion in the comments on a workaround that you can use today to reuse code between Silverlight and Non Silverlight projects.

You can read in more detail about Daniel's workaround in his MSDN article that he did last year (which is Compact Framework related).

They key thing that Daniel is suggesting, is that to reuse common code in both Silverlight and Non Silverlight projects, you should do the following.

1) Create two versions of the assembly (one silverlight and one regular .NET Framework)
2) Create the class in the regular class library as normal
3) In the silverlight version of the project -> Select Add Existing Item -> and within the Open File Dialog, select the "Add as Link" option

Daniel also suggests that you can use the following techinques to handle the differences between framework implementations

• Conditional Compilation


• Extension Methods


• Partial Types

This is some really great workarounds from Daniel on how to getting around some of these issues today and promotes a great way for you to be able to reuse code already (rather than cutting and pasting).

I still have one major concern, which is that there is still quite alot of overhead to reusing code. You still have to maintain two versions of each assembly (3 if you wish to reuse between silverlight, compact framework, and full .NET Framework), you as a developer need to constantly check your code compiles against the 2 platforms, you need to think about your compiler directives etc.

Although this is a great workaround (and I recommend you use these techniques), I still think that Visual Studio should provide us this support, using a technique such as the virtual assembly reference (that i suggested in my previous post).

Thanks again to Daniel for this workaround and I believe he will be writing up a Silverlight version of his article (which I look forward to), however there should be enough information here to get you going with code reuse between Silverlight and Non Silverlight projects today.

Silverlight and Code Reuse with non Silverlight applications

One of the problems we face with Silverlight is that Silverlight Projects can only reference Silverlight Class libraries, and other types of projects (such as WPF) cannot reference those Silverlight class libraries.

For example if I have a common static class has one static method that returns hello world.

namespace MyCrossCode
{
    public static class Common
    {
        /// <summary>
        /// Returns Hello World
        /// </summary>
        /// <returns></returns>
        public static string HelloWorld()
        {
            return "Hello World";
        }
    }
}

Then its logical that i would want to be able to share that class in 2 different versions of my application without code duplication.

With the current referencing model it leaves us in an awkward situation as we want to be able to resuse common code if possible in both applications without having to maintain two versions of the code.

I suggest one solution for Microsoft would be to provide us the ability in Visual Studio to be able to add code compliant with both the targetted version of the .NET Framework and with Silverlight. Compilation would produce us two versions of the assembly and the Silverlight version is automatically included in our Silverlight apps and the non Silverlight version for our Windows versions of our applications.

One way this could be achieved is the using a concept of Virtual Assembly reference, so rather than referencing the assembly directly, we reference a virtual assembly. So if its a Silverlight Application it will use the Silverlight version of the assembly, and if its non Silverlight it will use the non Silverlight version. The key thing about compliant projects is that non cross compatible code will fail to compile.

Anyways, I hope Microsoft looks at implementing this solution (or another solution) to this problem (especially in the Silverlight 2.0 timeframe).

VS2008 Web Development Hotifx

This is a very welcome hotfix from Microsoft, fixing some of the common web issues with VS2008 that I'm sure a lot of us have been experiencing.

You can download the hotfix from here.

Details of the hotfix via ScottGu's blog

Visual Studio 2008 now available to MSDN Subscribers

'Nuff said

Silverlight and WCF Services

This is a pretty good article on how to expose a WCF service to AJAX. AJAX accessing uses JSON to interact with web services. In order to achieve that you need to make the service as Scriptable.

Although this article is describing interacting AJAX and WCF, the same technique applies for exposing WCF services to Silverlight. Please note for silverlight you must have the service running under the same domain (as cross domain communication isn't supported at this time).

18th / 19th of March in the UK

On MSDN Flash, Daniel Moth has indicated something big is happening on the 18th and 19th of March.

I am assuming it is some sort of marketing launch for Visual Studio 2008, since the US marketing launch is February.

I guess I need to block out those dates

ASP.NET rebuilding inapproriately

I have been aware of this awhile now, but it has only annoyed me enough today to blog about it.

If you are using Orcas Beta 2, ASP.NET Web Application Projects, if you modify the aspx file (not the code behind), it seems to be forcing recompile of the whole app. Aaaaargh.

I may have got some funny setting go on, but it is annoying

Visual Studio 2008 - Go Online

Today, our TFS server was offline for a few hours.

VS2005 is normally a pain and requires me to track what changes i have made, and then prat around for around half an hour trying to get my changes checked in.

VS2008 is a dream, just click the "Go Online" button, and off it goes and works out which files you have changed.

I think this might be one of the best new features of Visual Studio 2008

Bug: Attaching to Debugger with asp.net development web server

I know i use a strange method of debugging but nonetheless it has always worked in Visual Studio 2005.

I start the asp.net development server via the command line and then attach to the debugger whilst working in asp.net.

This has always worked in Visual Studio 2005, but doesn't seem to work in Visual Studio 2008. I thought it might be something I have done on my machine (hence why i haven't blogged about it before), however Allister ran into the same issue yesterday.

I am not ruling out the fact that it might be something wrong with the solution or project files (haven't tried this against different projects), however it is a little annoying.

This has meant that i have been back to using the play button (i could instead use IIS and attach that way, but i don't want too).

Hopefully this will be fixed for the RTM.

Application of multiple CSS Tags & Inheritence

Following my back2basics thing at the moment.

CSS does not support inheritence of tags, however it does support the application of multiple tags.

Therefore the following allows you to apply 2 styles to one label.

<asp:gridview id="myGrid" autogeneratecolumns="true" cssclass="GridStyle1 GridStyle2" runat="server"></asp:gridview>

Interestingly enough i was interested in the order of preference (for style clashes). Using Visual Studio 2008 and its CSS properties functionality, i discovered that the order of preference comes from the order of the tags in the CSS file (first style found takes precedence).

Therefore be careful about how you order your styles in CSS.

Last Night's Nugget in Birmingham

OK,

So i've just done my first ever nugget / speaking gig. My subject was Visual Studio 2008 (Orcas) for Web Developers targeting .NET Framework 2.0.

Thanks to Dave McMahon of NxtGenUG for letting me doing my first ever nugget up there. The guys at our sister region in Birmingham are brilliant, and I will certainly try and get up to their user group as much as possible (it is a trek though).

I was hugely over ambitious with topic, and subsequently ran out of time. Guy Smith-Ferrier was curious before the event on how i was going to cover such a topic in such a short time frame. I think the answer was naiveity, over optimism, and lack of experience. As we later discovered, really I could cover this as a main session rather than as a nugget. Thanks to Dave for humouring me, and let me stretch the time boundaries as long as possible.

Despite my timing problems, and the fact that i barged through the presentation trying to get as many features in as possible, i think it went pretty well. However feedback will reveal all.

A special thanks must go to Guy for being so supportive, and being a brilliant speaker. So I have taken some of advice on board, and I am now bashing on with trying to get more involved in the speaking community. I have taken some great tips from him, and i learned loads from last night, so onwards and upwards to my next speaking gig.

On that point I am offering 2 sessions on Silverlight for DDD6, so hopefully the community will vote for one of them, and I will get a chance to present at such a large event.

Anyways enough of the waffle:

Here are the slides and sample code for last night.

Interview with Scott Guthrie (covers Silverlight, MVC, Offline)

This is kind of interesting.

Its an interview done with Scott Guthrie. A lot of the info in the article, Scott talked about already at Mix, but its just nice to see it in one article.

The interview covers offline access (interesting he gave the same answers in the interview, as the answers he gave when i asked him a similar question at the cup of tea session).

It also covers MVC, Moonlight, Silverlight, asp.net etc.

Starting Development Web Server from Command Line in Orcas Beta 2

This is a followup to my previous post

To start the Development Web Server in Orcas Beta 2 from a command line / batch file, you need to use this command:

"C:\Program Files\Common Files\Microsoft Shared\DevServer\9.0\WebDev.WebServer.EXE" /port:8080 /path:"mywebsitepath"

Visual Studio 2005 and Orcas co-existing, running Web Application Projects

Continuing my series of how to make Visual Studio 2005 and Visual Studio Orcas co-exist, and how Framework targeting works.

There is one further change required for web application projects:

Before conversion:

<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v8.0\WebApplications\Microsoft.WebApplication.targets" /> 

After conversion:

<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v9.0\WebApplications\Microsoft.WebApplication.targets" /> 

If you try this on a machine without VS.NET 2008 Beta 2 installed the project will fail to load because it cannot find the v9.0 path being referred to. The solution is to alter the converted line and replace it (using Notepad) with:

<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v8.0\WebApplications\Microsoft.WebApplication.targets" Condition=" '$(Solutions.VSVersion)' == '8.0'" /> 

<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v9.0\WebApplications\Microsoft.WebApplication.targets" Condition=" '$(Solutions.VSVersion)' == '9.0'" /> 

This way the correct version of the Web Application Projects targets will be loaded depending on the version of VS.NET you are using.

UPDATE:
This does however knacker MSBuild (arrrgh), so the best method is to modify this file in a custom task in TFS (which i guess I will create on monday)

Thanks goes to Tom Blackburn on this one

Orcas Bug? Test View

I have find the quickest way of writing code these days, is to sort of follow Test Driven Development.

I am not anal about it, I just believe it is quicker for me to write code against a unit test, and debug the unit test, rather than the application. This strategy has saved me a ton of time.

Now that I am using Orcas in my commercial environment, annoyingly enough I am getting the following error when i attempt to debug a unit test:

"Failed to queue test run 'ch3@20070806PC01 2007-09-03 13:00:53': Unable to start program 'c:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\vstesthost.exe'."

If i just run the test, it works fine, it is only when i attempt to debug it.

UPDATE
-------------
I've discovered what was causing the problem, I have a little batch file, which i haven't update which starts the WebDevServer (Cassini), but this is launched from .NET Framework 2.0.

I never run VS directly (in my work environment), I always attach to the debugger.
For somereason when i debug the unit test, it seems to clash with the WebDevServer, and it dies a horrible death.

Visual Studio 2005, Visual Studio 2008 co-existing peacefully

If you want Visual Studio 2005, and Visual Studio 2008 to co-exist peacefully for the same projects, this might help you out.

I would recommend you minimize the impact of the conversion wizard by following this procedure.

1) Make a copy of your existing solution file (i.e. to have VS2005 and VS2008 version of the solution file, e.g. MySolution.sln and MySolutionOrcas.sln)

2) Open up the new solution, and choose not to convert any projects in the solution

This means you will be able to develop using Visual Studio 2008, and Target .NET Framework 2.0, but still be able to use Visual Studio 2005 (if required), or if other project members haven't moved across to Orcas yet.

Finally this method should also work with TFS meaning, you can develop with Orcas but your build server will know no better (I haven't tested this yet, but I'm pretty sure it will be OK as I have tested it with msbuild)

If you run into trouble you can do it manually:

For each project file in the solution change the first line from this:

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

to this:

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="2.0">

The important part is the ToolsVersion="2.0", this will mean that VS2008 will not attempt to convert this project, and will target framework 2.0 for you :)

Finally once you have modified all the project files, you can open the new solution file (MySolutionOrcas.sln) in Visual Studio 2008 (Orcas Beta 2)

You can now allow Orcas to convert your solution (and it will not attempt to convert any of the other projects to Visual Studio 2008)

Orcas Framework Multi-Targeting

Within Visual Studio Orcas, the concept of framework targeting is introduced.

You can target any project or solution to any of the following versions of the .NET Framework.

.NET Framework 2.0
.NET Framework 3.0
.NET Framework 3.5

Visual Studio 2008 (Orcas) will always use MSBuild Toolset 3.5, which means that regardless of your targeted framework, and even though the code is compatible with .NET Framework 2.0, it will be generated using the latest C#, VB Compiler (not the compiler that shipped with 2.0).

This means that you can use features that produce IL compatible with .NET Framework 2.0 (e.g. Automatic Properties), but you can't use incompatible features (e.g. LINQ).
The code you deploy will be fully compatible, and will reference the dependant assemblies (system, system.data) that shipped with 2.0, but the IL will be produced by the latest compiler.

There is a word of caution here, if you use new language features you will not be able to continue to use Visual Studio 2005 (or existing TFS Build Server, MSBuild (for .NET 2.0)), you also cannot use Websites (not Web Applications), as this is compiled on the website.

If you are paranoid about beta code, then you should therefore develop in Orcas (ignoring new language features, and build in VS2005, or using the earlier version of MSBuild).

Visual Studio 2008 will also stop you from using the features of an earlier framework, until you retarget the framework (which you can do at anytime, (Right Click on Project, Select Properties, Application Tab, Target Framework)
). The support in the IDE is so good, that it will even hide web control specific to .NET Framework 3.5 (e.g. LINQDataSource and ListView).

There is only one gotcha to really be aware of, if you upgrade a solution to Visual Studio (2008), you will need to prat around with the solution to make it work again in Visual Studio 2005 (i.e. the version number in the solution file). This is a bit of a pain, but not the biggest deal in the world (since this is the only change).

Silverlight Projects that don't run from the filesystem

This is a great post from Mike Ormond about running Silverlight 1.1 Projects in Visual Studio that doesn't run from the file system

Javascript Intellisense Bug in Orcas Beta 2

I've been preparing for the nugget i am doing in Birmingham next month at NxtGenUg (I will follow up details on a later post).

I've been working on the ins and outs of intellisense for Javascript.

For some reason whenever i split code between files, intellisense doesn't seem to like it so much.

So for example if i have a person object function, and a test function in the same class, intellisense will work, and i can see the FirstName and Surname properties.

<script type="text/javascript">
        function Person(firstName, surname)
        {
            /// <summary>This is a person class</summary>
            /// <param name="firstName" value="string">The first name of the person e.g. Johnny</param>
            this.FirstName = firstName;
            this.Surname = surname;
        }

        function Test()
        {
            var newPerson = new Person("fred", "jones");
        }
    </script>

If however i move the Person class from my aspx file into a seperate .js textfile, intellisense breaks.

<script type="text/javascript" src="Person.js"></script>