WCF

MVVM Light template and WCF services (or any ASP.NET application for that matter)

Laurent Bugnion — Wed, 07 Dec 2011 21:36:33 GMT

I was recently made aware of a couple of people having issues with WCF services (or ASP.NET applications) when using the MVVM Light project template for Silverlight. There is a blog post and a StackOverflow question, so what exactly is happening there?

Well in fact it is pretty simple when you know how Silverlight connects to web services. Due to the security model of Silverlight, the application cannot connect to a web site if it is not originating of this very website. In laymen’s terms, it means that the application can only connect to a web server if it also comes from the same webserver. For example, if the Silverlight application is served by http://www.galasoft.com, it won’t be able to connect to, say, http://www.cnn.com without getting an exception. We talk about cross-domain access restrictions.

Of course there are ways around that, for instance a website can specifically give access to Silverlight applications through a configuration file.

In the case that concerns us, it is exactly what is happening. You see, the MVVM Light Silverlight project template creates a Silverlight application without an ASP.NET host. I didn’t add one because I didn’t want to complicate the template too much. And also, to be honest, because adding a web project is super easy, but of course only if you know how to do, and this is exactly what we will do here!

Creating the application

The steps to create the application and the WCF service are as follows:

Create the MVVM Light application using the MVVM Light project template for Silverlight.
Right click on the solution in the Solution Explorer and select "Add, New Project from the context menu.
From the WCF category, select a WCF Service Application and create it.
Build the application.
Right click on the MVVM Light project and select Add Service Reference from the context menu.
In the Add Service Reference dialog, click on Discover.
Make sure that the found service is the one you want to connect to, and click on OK.
In the MVVM Light application, open the file Model/DataService.cs and modify the code as follows:

public class DataService : IDataService
{
    public void GetData(Action<DataItem, Exception> callback)
    {
        var client = new ServiceReference1.Service1Client();
        client.GetDataCompleted += ClientGetDataCompleted;

        client.GetDataAsync(1234, callback);
    }

    void ClientGetDataCompleted(
        object sender, 
        ServiceReference1.GetDataCompletedEventArgs e)
    {
        var callback = e.UserState as Action<DataItem, Exception>;

        if (callback == null)
        {
            return;
        }

        if (e.Error != null)
        {
            callback(null, e.Error);
        }

        callback(new DataItem(e.Result), null);
    }
}

This code uses an asynchronous service call pattern where the callback (a reference to a method passed as Action by the caller) is saved in the service call. Then when the asychronous call returns (in the Completed event), the callback is retrieved from the UserState. If an error occurred, the callback can be used to pass this error to the caller. Otherwise, a new DataItem class is created and passed to the called.

Details about this pattern can be found in my talks Understanding the MVVM pattern and Deep Dive MVVM.

So why doesn’t it work?

If you run the application now (making sure that the MVVM Light project is selected as Startup Project), you will first see a warning dialog and then an exception. What happened?

What happened here is exactly the cross-domain issue I mentioned: The Silverlight application is not explicitly hosted into a web application, so Visual Studio is using an auto-generated HTML page instead, and running it from the embedded web server (“Cassini”). In fact, unless you explicitly specified otherwise, the test page is run in “file mode” instead of HTTP mode. The URI in the web browser window starts with C:\ for instance, instead of http://.

In those conditions, the access to the WCF service is (justly) denied, and you get a security exception.

Correcting the error

In order to correct the error, you can either add a cross-domain policy file to your WCF application, or host the Silverlight application in the same web project as the WCF service. Let’s do that now:

Right click on the WCF Service application in the Solution Explorer, and select Properties from the context menu.
On the left, select the Silverlight Applications tab.
Click on Add.
Select Use an existing Silverlight project in the solution and make sure that your MVVM Light application is selected in the combo box.
Make sure that Add a test page that references the control is checked, as well as Enable Silverlight debugging.
Press Add.

This creates two new files in your WCF Service application: One is suffixed TestPage.html and the other is suffixed TestPage.aspx. We typically don’t need the ASPX one so you can safely delete it.

Right click on the WCF Service application and select Set as StartUp Project from the context menu.
Right click about the HTML test page and select Set as Start Page from the context menu.

By doing this, we force Visual Studio to serve the HTML page and the Silverlight application from the same URL as the WCF Service, and to serve it as HTTP. This is possible because a WCF Service application is nothing else than an ASP.NET web server running WCF. So the same web server can deliver HTML, Silverlight and of course WCF.

If you run the application now, you will see the following result:

Note that the warning shown earlier will still appear, but it is really just a warning, and you can safely turn it off. Just remember the cross-domain restriction when you publish your Silverlight application to another web server!

Success, we hit the WCF service and returned with a valid result! In fact, you can verify by placing breakpoints in the DataService.GetData method on the client, and in the Service1.GetData method on the server. Then press F5 to run the application in Debug mode and notice how you can easily debug both the client and the server at the same time.

What about the opposite way?

It is also possible to add a new MVVM Light application to an existing WCF Service application with the following steps (I am going a bit faster now, I am sure you will get it easily):

Open the existing WCF Service application.
Right click on the Solution and select Add New Project.
Select the MVVM Light project template for Silverlight and add a new project.
Build the application.
Just like before, add a Service Reference to the Silverlight application.
Again, just like before, add the Silverlight application to the WCF Service application (WCF Project Properties, Silverlight Applications, Add…).

Summary

Hopefully the confusion around this is cleared now. In summary:

Silverlight applications are restricted to access cross-domain web servers (unless explicitly authorized to do so).
The default MVVM Light application does not have an explicit host, so it runs off the default test page.
You can however easily add the MVVM Light application to the WCF Service application and then run it and debug it.

Note that the steps above can be used to add an MVVM Light application (or any Silverlight application) to any ASP.NET application, be it WCF Service application, ASP.NET MVC application or “classic” ASP.NET application.

Happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Microsoft Shape

Laurent Bugnion — Tue, 26 Oct 2010 07:22:40 GMT

Today I have been invited by Microsoft Switzerland to present three of our awesome Windows Phone 7 applications on stage at their yearly Shape conference. It was a great moment, and I felt super proud to show the IMDb app, the Twitter app and the SBB Mobile app. The response was excellent, I didn’t have one single demo effect, was able to stream a movie preview live from the IMDb app, to show most features of the Twitter app, to load a timetable and purchase a ticket from the SBB app, and all this in slightly more than 10 minutes! How cool is that??

The two former apps (IMDb and Twitter) are already available from the marketplace:

The SBB Mobile app is not available yet, but it is in the process of submission and it should be ready very soon for download. All the three apps are free!

WCF RIA Services demo

I also talked about WCF RIA Services, and here are the promised code samples:

The full WCF RIA Services sample, with Customizing columns, Executing CRUD, Displaying messages, Validating, Filtering, Enhancing the UX, Paging, Showing errors, Reconciling data, Printing, Copy/paste, Running out of the browser...
The same sample modified to run out-of-the-browser (OOB).

Once downloaded, right click on the zip file, select Properties, and if you see an Unblock button on the General tab, click it!. Then only extract the content.

The slides are here. The session was recorded and will be posted on Microsoft servers soon (stay tuned for more info!!)

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Posting the source code for my #mix09 and #techdays (Belgium) talk

Laurent Bugnion — Tue, 24 Mar 2009 23:06:30 GMT

Note: I just updated the title for this article, sorry to all of you who were waiting for the TechDays Belgium source code and didn't realize it was here :)

I just posted the source code of the demo applications I used in my MIX09 talk "Working across the client continuum".

The source code is structured as follows:

DotNetContinuum: This solution contains the following projects:
- DotNetContinuum: a WCF service configured with 2 endpoints (SOAP and JSON), as well as 3 client applications:
- DotNetContinuum.Mvc: An ASP.NET MVC application showing a "pure" ASP.NET MVC application enhanced with AJAX content. See the following files
  - HomeController.cs (in Controllers): Contains the "ServerDateTime" action.
  - ServerDateTime.aspx (in Views/Home): Contains the view code for ServerDateTime.
  - Index.aspx (in Views/Home): Start page for the MVC application, contains the links to ServerDateTime, as well as the AJAX code.
  - Silverlight.html: Start page for the Silverlight application.
- DotNetContinuum.SL: A Silverlight application connecting to the WCF service in an asynchronous way. See the following files:
  - Page.xaml: Front end with a very simple UI.
  - Page.xaml.cs: Code behind with the code to connect to the WCF service.
- DotNetContinuum.Wpf: A WPF application connecting to the WCF service in an asynchronous way. See the following files:
  - Window.xaml: Front end with a very simple UI.
  - Window.xaml.cs: Code behind with the code to connect to the WCF service.
Customers: This solution is a WCF service reading a list of customers from an XML file and delivering them as a list of Customer objects.
- CustomerAccess.cs: Contains the LINQ to XML code used to read and write the XML file.
- Customer.cs: The class used to pass information between the service and the client.
- CustomerService.svc.cs: The service implementation.
- Customers.xml: The "data base" of customers
- Note also that there is a unit test project in the solution, used to unit test the WCF service.
CustomersApplication: This solution contains client applications for the Customers WCF service.
- CustomersApplication.Mvc: An ASP.NET MVC and AJAX client.
  - HomeController.cs: Contains the "ShowCustomers" action.
  - ShowCustomers.aspx: Contains a mix of ASP.NET MVC and AJAX code to interact with the WCF service.
  - Silverlight.html: Start page for the Silverlight application.
- CustomersApplication.SL: The Silverlight application connecting to the WCF service and showing the list of customers.
- CustomersApplication.WPF: Same application, implemented in WPF.

The last applications (CustomersApplication.SL and CustomersApplication.WPF) are implemented using the MVVM pattern, and share a maximum of code.

As soon as I have a moment, I will post a walkthrough of my demos. In the mean time, you can catch the Powerpoint slides and the talk's video from the MIX09 session page.

Have fun!!

My #MIX09 session is available in video

Laurent Bugnion — Sat, 21 Mar 2009 07:09:41 GMT

MIX09 is over, people are slowly going back home. I will be flying home tomorrow, quite a long trip since I will reach Zurich only on Sunday morning.

I had the great pleasure to see that the video of my talk was posted online! This is great, because I didn't have a huge crowd (what do you expect when you "compete" against and Vertigo and their Playboy talk, and the amazing Corrina Black :))

But it's OK, because the people at my talk were really great. I felt wonderful during the talk, and even the small issue I had with Visual Studio didn't manage to disturb me much (even though I kind of freaked out when it happened, you can hardly notice it).

The video is available for download. You can also stream it (Silverlight required) by clicking on the image below. Have fun!

Reminder: My talk at #MIX09

Laurent Bugnion — Thu, 19 Mar 2009 00:58:01 GMT

Tomorrow Thursday 19th of March 2009

Location: Delfino 4105

Working across the .NET continuum

Come see how to build a continuum of client applications including HTML, AJAX, ASP.NET, Microsoft Silverlight, and Windows Presentation Foundation (WPF) that all consume the same Windows Communication Foundation (WCF) service. Learn how to reuse as much code as possible, how to optimize the development process, and how to address key logistical issues like external servers and cross domain communication.

See you there!!

TechDays Belgium is over

Laurent Bugnion — Sat, 14 Mar 2009 11:09:54 GMT

I just held two talks in Antwerp, Belgium, for TechDays and it was really nice. First the Belgian team did a fantastic work welcoming the speakers, and as far as I could say, the attendees were also taken care of in an exemplary way. We had just a small incident (there was a power breakdown about 15 minutes before my show and the whole center went black), but noone panicked and it was taken care of with a lot of care. We started the sessions only 15 minutes late on the last day. Everyone stayed calm. I also want to especially mention the technical teams who were simply AMAZING. Such a great work. Before my first session, the technician called my mobile to tell me that he was available and I could go to the room if I wanted. Once there, they totally made me feel at home, were efficient, polite and interested, and even gave feedback after the talk. I would work again with such a team any time!!

My 2 talks went great, I got approximately 300 people at each. The talks were held in big movie theaters, and we actually used the movie projectors to beam. We had image in image so the speakers were filmed while they talked. The screen was impressive.

I want to thank all the people who made this possible. It was a fantastic experience, and I am looking forward to repeat that soon. For the people who attended my talks, I will post the source code and walkthroughs here after MIX is over, so stay tuned.

Cheers!!

Talking at MIX09: Las Vegas and the continuum

Laurent Bugnion — Sat, 21 Feb 2009 21:33:30 GMT

One of my dreams is going to come true: Since the very first time I attended MIX in 2006, I have wanted to talk there. MIX has a very special meaning for me. It is in the Venetian conference rooms that I heard about Windows Presentation Foundation and what would later become Silverlight. It is there that me and my two colleagues Andreas and James decided that we wanted WPF for the project we had just started at Siemens. A decision that was definitely the right one, from a technical point of view but also from a user experience point of view. It is at MIX 2007 that I started to talk to people from my current firm IdentityMine about the possibility to join them, which I did in December 2008.

In short, the MIX conference has a special place in my professional life, and I am very glad and honored to announce that one of the sessions I proposed has been accepted. Yes, I will be talking at MIX 2009! My session just appeared on the sessions list at
https://content.visitmix.com/2009/sessions/

And my short bio can be seen at
https://content.visitmix.com/2009/speakers/

The session's title is:

Working across the Client Continuum

Come see how to build a continuum of client applications including HTML, AJAX, ASP.NET, Microsoft Silverlight, and Windows Presentation Foundation (WFP) that all consume the same Windows Communication Foundation (WCF) service. Learn how to reuse as much code as possible, how to optimize the development process, and how to address key logistical issues like external servers and cross domain communication.

I really hope I will see many of you at my session. For those of you who cannot come, it will be recorded (like MIX08 and PDC08 were too). But let's face it, nothing replaces the real MIX, and nothing replaces Vegas, baby!

Updated my laptop to the June CTP of .NET 3.0

Laurent Bugnion — Sun, 02 Jul 2006 09:57:00 GMT

I took the time today to install the June CTP of .NET 3.0 (see the checklist hereunder). It went rather well, and I didn't have major problems, but it takes a long time... well, when you do it on the balcony with your kids playing in the pool, it's not that terrible, is it? ;-)

Update: My WPF demo now works with the June CTP.

Uninstall May CTP edition:

Pre-released WinFX Runtime Components Uninstall Tool
Download and run Uninstall tool
Removed Debug tools for Windows
Removed Atlas
Removed FxCop
Removed Web Application project add-in
Removed Windows SDK
Removed WIC

.NET 3.0:

Install WinFX Runtime components June CTP
Install WinSDK June CTP
Install MSDN 2005 (from CD)
Install Orcas development tools June CTP
Reinstall WIC

Atlas:

Install Microsoft Visual Studio 2005 - Update to Support Web Application Projects
Install Visual Studio 2005 Web Application Projects
Download Atlas
Install AtlasSetup.msi
Install AtlasDocumentation.msi
Install AtlasSample.msi
Install AtlasToolkit