Silverlight Feeds - All your Silverlight feeds in one place.

Sponsors

Tuesday, November 16, 2010

Creating a ASP.NET MVC HTML Helper for Silverlight

by bartczernicki.nospam@nospam.gmail.com (Bart Czernicki) via Silverlight Hack on 11/16/2010 8:52:00 AM

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
Basically an HTML helper is a extension method that takes some parameters and renders HTML.  In ASP.NET MVC you have complete control over the rendering of the HTML in your Views.  If you are an ASP.NET developer you can think of it as having the ability to dictate the exact HTML/Javascript that gets surfaced when you drag over any ASP.NET server control.  For example, if you drag over an ASP.NET button server control, ASP.NET handles how that control is rendered on the page.  Of course in ASP.NET you could override the rendering from the server, however it was a major pain.
 
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) for my Silverlight business intelligence book utilizes the Twitter HTML helper that renders my tweets in a nice interactive HTML component with JavaScript that makes the appropriate web service requests.  Some of the advanced HTML helpers include: Facebook, Twitter, video etc.  The beauty of this is that in order to utilize this component I just had to reference it using one line of code.
 
 
Creating a Silverlight HTML Helper
 
In order to host a Silverlight application (XAP file) you need to create the following HTML at a minimum  (if you want error handling you will need additional JavaScript):

 
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
  • Provide a dynamic name for the onError JavaScript method
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 
 
 
Source Code
Attached is the cs file for the Silverlight HTML Helper.  Feel free to extend the HTML Helper as you wish.  I have omitted error checking and rendering the additional JavaScript files.  This could be added simply.   I did this on purpose, because right now ASP.NET MVC does not allow you to render JavaScript in the appropriate places.  You could create two separate HTML Helpers (one for the Silverlight XAP file and one for the JavaScript).  This would allow you to place the Silverlight JavaScript file with all your other js files on the web page.
 
email it!bookmark it!digg it!

Original Post: Creating a ASP.NET MVC HTML Helper for Silverlight

Subscribe

New Feed

Product Spotlight

Recently Updated Sources

Legal Note

The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.

Advertise with us