Silverlight in an Existing Asp.Net MVC Project

Today’s Task:

Add some Silverlight content to an existing Asp.Net MVC project. The MVC project contains the standard CRUD for the application, while the Silverlight is meant to provide rich visualization of the data.

Prerequisites:

• VS 2010
• An existing Asp.Net MVC 2.0 project
• Expression Blend 4.0 (installs Silverlight 4 and Silverlight 4 SDK)
• Silverlight 4.0 tools for Visual Studio 2010

Creating the Project:

As stated in the opening and prerequisites, I am starting with an existing Asp.Net MVC application. You should have Blend 4 installed, and have also installed the Silverlight 4 tools for Visual Studio.

1) Right click on your web project and choose add new item (ctrl+shift+a). From the add new Item window, click on Silverlight under Installed Templates and then select the Silverlight Application. Name your Silverlight application appropriately. In my example, I have named my project DataVisualization. Click Add

2) The next screen that comes up is the “Add Silverlight Application” screen. I accepted the defaults with the follow exception, I changed the location from being a sub folder of my MVC application to one level higher. The destination folder, ClientBin is still created in your MVC application. Make sure that you select Silverlight 4 for the version. Finally click Add.

3) You should now have the following in your solution.

• Your existing Asp.Net MVC application
• A new Silverlight 4 application named DataVisualization
• A DataVisualizationTestPage.aspx in your MVC application
• A DataVisualizationTestPage.html in your MVC application
• A Silverlight.js in your MVC application

We will eventually remove the test pages, but for now we will leave them so that they can serve their intended purpose.

4) Build the solution. You should see a DataVisualization.xap added to the ClientBin folder in your MVC application.

5) Right click on DataVisualization.html and choose view in browser. You should see an empty page in the browser, but get no errors. Right clicking anywhere in the browser window should bring up the Silverlight context menu.

Integrate the Silverlight Application

In this stage, we are going to make our new Silverlight application appear like it’s part of the rest of our MVC application. Right now if you browse to it, it doesn’t look like its part of anything. We also want to be able to allow our users to navigate thru our web application so we need our existing menu to show up.

1) Either create a new controller/view or re-use an existing controller/view in your MVC application to house your Silverlight application. I’m going to reuse an existing controller called Dashboard, which has one view, Index.

2) Open up your view, and the DataVisualizationTestPage.aspx file. We need to move some stuff over to our view so it displays our Silverlight application. I have some pre existing styling and layout defined, so my view is going to look differently from yours. I also store my java script files in a specific location, so I will be moving the included silverlight.js as well. The screen shot below shows what I am starting with in the view for reference.

3) If you don’t have any existing standard for your JavaScript, you can place the two script tags from the test page somewhere before the reference to the Silverlight object. For example, place the two script tags just below the second content place holder. Next, copy the form tag inclusive and paste it into your view. For me, I pasted it into my div tag that I have setup to control my formatting. In the screen shots below you can see my view, and resulting web page. We still have an empty Silverlight control, but now it looks like its actually part of our website.

4) Remove the DataVisualizationTest.aspx page, but keep the HTML page as we will need it in the next section.

Working with Blend

The final step is to begin adding content to our Silverlight application. For this we are going to switch to Blend to make sure that we are able to work in both tools.

1) Start up Blend and choose to open an existing project. Browse to the location of your DataVisualization project (folder that contains DataVisualization.csproj) and open it. You should see the content of your project listed on the left under the project tab (assuming default Blend layout) and the empty MainPage.xaml in the middle. Notice that we have a solution called DataVisualization, and that I did not open up my existing MVC application solution.

2) Go to Project in the tool bar, and click Run Project (or press F5). You will see that our empty MainPage is shown using the DataVisualizationTest.html page, and that we are using the local Asp.Net development server. This is good enough for me. I’m hoping that with this setup I can work independently of my MVC application, and more importantly, a designer would be able to work independently as well. When deploying my application to production, I can remove the DataVisualizationTest.html page.

3) TFS Integration – At this point I can’t figure out how to get Blend to work with TFS. It’s possible since I downloaded the trial version that it does not include TFS support, or I need to install Team Explorer on top of Blend. For now I can use the Explorer add-in to get by.

Conclusion

At this point we have a functioning Silverlight application, integrated with an existing Asp.Net MVC application. We are able to work independently of the web application in Blend and vice-versa. This is my first attempt at this type of solution, so I will post a follow-up in the future to report back how well it worked, and if I needed to make any changes.