Creating a ASP.NET MVC HTML Helper for Silverlight
Abstract: This article covers how to create a custom ASP.NET MVC HTML Helper that will render the required HTML to host a Silverlight application (XAP file). Some knowledge of ASP.NET MVC is required.
Over the last few weeks I have started investing some time in learning ASP.NET MVC (specifically ASP.NET MVC 2). This has nothing with the ongoing "Silverlight is dead" debate and I actually started a deep dive into the technology back in August 2010. I think that ASP.NET MVC is very important for Silverlight developers to learn (more on this in another blog post), because of its obvious positioning in Microsoft's HTML5 tooling investments (more on that in MIX 2011).
Intro to HTML Helpers
HTML Helpers have the following qualities:
- Usually implemented via extension methods
- Usually implemented part of a static class
- In .NET 4.0/C# 4.0 utilize optional parameters to minimize the initialization signature
- Used inline with HTML in ASP.NET MVC Views to create dynamic content, while minimizing the code written and maintained
HTML Helpers in ASP.NET MVC are there to minimize how much code you need to write. For example, instead of having to write 100 lines of HTML every time there is an input form. You could create an HTML Helper that does this for you. This minimizes the code, improves maintenance of your code and abstracts that component into its own SRP (single responsibility principle) method.
ASP.NET MVC versions 1 through 3 include a ton of HTML Helpers. These helpers include basic methods for rendering simple HTML like a text box to more complex helpers. If you download the ASP.NET MVC 3 source code, you will see a lot of very complex HTML Helpers. These HTML helpers can render complex HTML with interactive HTML. For example, my companion site (http://www.silverlightbusinessintelligence.com
Creating a Silverlight HTML Helper
In order to create an ASP.NET MVC HTML Helper to host Silverlight we simply need to create a extension method that renders the HTML shown above. When creating an HTML helper for an HTML component, you should analyze which parameters would be helpful to make the HTML more dynamic. For example, for the Silverlight helper we could potentially have the following parameters:
- URI location of the Silverlight XAP file
- Silverlight minimum runtime version (minRuntimeVersion parameter)
- Width and height dimensions of the Silverlight div tag
- Silverlight application initialization parameters
In addition to the flexibility, the HTML Helper should provide a simple method signature. For example, if I just want to provide the location of the Silverlight XAP file; why would I want to pass in all of these additional method parameters. This is ideal for using the new .NET 4.0/C# 4.0 optional parameter syntax.
The rest of the HTML Helper is very simple; combining the method parameters with the static HTML div tag and rendering the content. You are essentially building a .NET string that contains HTML content. This can be done several ways (as shown below). I used the string.Format method (because it uses StringBuilder for performance behind the scenes) and optionally for a cleaner "non-string" method you can use LINQ to XML to create the HTML string all in C#.
Creating the HTML using string.Format
Creating the HTML using LINQ to XML
The final piece of the HTML Helper is to return an HTMLString object (which overrides some string method implementations). The HTMLString object is used by most ASP.NET MVC helpers (considered a best practice).
Using the Silverlight HTML Helper
Using the Silverlight HTML Helper in an ASP.NET MVC View is incredibly simple. Using the C# inline code in the view, all that needs to happen is to execute the HTML Helper method. In the example below, I pass in the URI of the Silverlight XAP file and two optional height & width parameters.
If you are not familiar with C# optional parameters, notice the syntax below. "objectContainerWidth: ...". We can specify the optional parameter we want to pass into the method and the value. If the HTML Helper had 20 parameters the syntax of this method would be very bloated. However, optional parameters make the syntax very terse.
Where and Why Would you want to do this?
There are a couple great uses of this Silverlight HTML Helper. The first use is to simply host Silverlight applications in ASP.NET MVC. If you create a "new Silverlight Project" and host it in a ASP.NET MVC project, you don't get a good hosting environment. What actually happens is that you get an aspx page that is completely outside ASP.NET MVC views. The screen shot below shows the SilverlightApplication2TestPage.aspx page that is a classic ASP.NET page that does not go through the ASP.NET MVC runtime. This is obviously not helpful if you want to host Silverlight in ASP.NET MVC.
Another great use of this Silverlight HTML Helper is to create dynamic web sites that include a lot of Silverlight content. My companion site for my Silverlight BI books had a requirement of this. I have over 60 Silverlight demos I needed to host on the web with different Silverlight versions. If you navigate to http://silverlightbusinessintelligence.com/Demos
you can see the Silverlight HTML helper in action.
I wanted to keep the Views dynamic. Therefore, using the Silverlight HTML Helper I can pull all of the values from a SQL Server table and dynamically create the views for each respective demo. All those optional parameters for the Silverlight HTML helper come from the database.
Sample of some of my Silverlight HTML Helper Parameters stored in a database table