Last week, with Matias Bonaventura, Julian Dominguez and Pablo Constantini, we created a WPF demo application using Prism-v2 that shows both way interaction between different modules of the application and different WPF WebBrowser controls.

Below you can find some of the highlights of how this application works. The demo shows interaction between the WPF application and a Web application hosted in a WebBrowser control. How this is done is explained with further detail in the blog post.

Quickstart Overview

The demo has the following main components:

• CustomersModule: This module is responsible for handling the information of the different customers. It gets the information from a WCF WebService. It has a single view, CustomerView, with a DataGrid to show the customers.  The view is placed in the "CustomersRegion" (top left of the screen).
• LocationModule: This module contains a single view which in turn hosts a WPF WebBrowser control (and a progress bar to show when the page is loading). This control shows the place of residence of the customer through Bing Maps. This view is placed in the "LocationRegion" (bottom of the screen).
• OrdersModule: This module contains a single view which has a WPF WebBrowser control. This control shows a different ASP.NET page with a customer order, based on the customer that is selected in the CustomersView DataGrid. The view is shown in the "OrdersRegion".
• A Web Application that allows shipping different customer orders.
• A WCF service that manages Customers and Orders (this is for the Web app and the WPF app to share the same data).

The image below shows the layout of the application:

How does the application work?

When a customer from the DataGrid is selected a command is executed (through an attached behavior with the DataGrid's SelectionChanged event). This command publishes an event using the EventAggregator to notify the Presenter's of the OrdersView and LocationView in the other modules.

The OrdersView updates the page it shows in the WebBrowser control, and the LocationView updates the customer's address in a BingMap.

When the user clicks the "Ship Order" button from the WebSite hosted in the WebBroser control from the OrdersView:

1. The WCF Web Service is updated with the data of the Shipped Order (marks the order as shipped).
2. The view listens to the published JS event in the site hosted by the WebBrowser control and notifies its Presenter (I go over how this communication takes place later in this post).
3. The Presenter fires an event through EventAggregator.
4. The event is handled by the CustomersViewModel which updates the customer list through the WebService.
5. The Customers DataGrid is updated.

Implementation Specifics

To enable the WebSite to communicate with the WebBrowser control (via JS events) the following steps were performed:

1. Created the OrdersScriptableModel class (located in the OrdersView code behind), which is serialized as JS.
2. Fire a JS event from this class in the page and this in turn notifies the view.
3. Publish an event (using the EventAggregator) to establish communication with the CustomersViewModel to update the customers list (performing a call to the WebService).

There are other possible approaches, such as going over the different controls in the current WebBrowser.Document to listen for JS events.

You can also check out some tips about using WCF services in Prism in this post by Matias.

Source Code

Disclaimer

This code is provided "AS IS" with no warranties, and confers no rights.

Download

We uploaded the sample to the Prism codeplex site. You can get the sample from here.

Hope this sample application is useful!!!