Simple Functions for HTML Interop

I used the below functions on several occasions to transfer data between a server and Silverilght application.

The blog integration between .NET Blog Engine and my Silverlight navigation on top of this site is done using this method.

You can see the blog title “You Had Me At Hello World” in the Silverlighg navigation window on top.

The interop is easy and I tried it in IE, Firefox, Chrome, Opera. Define an HTML like this:

[code:html]<span style="visibility: hidden; display: none; height: 0px; width: 0px; border: 0px">

    <span id="titleText">You Had Me At 'Hello World!'</span>

    <span id="titleLink">http://nokola.com/blog/</span>

    <span id="titleDescription">Coding and Special Effects for Silverlight</span>

</span>

[/code]

And then use the functions from within your Silverlight app like this:

[code:c#]HtmlDocument doc = HtmlPage.Document;
string str = doc.GetTextFromHtmlPage("titleText", "nokola.com");
string uriString = doc.GetTextFromHtmlPage("titleLink", "http://nokola.com");
string str3 = doc.GetTextFromHtmlPage("titleDescription", null);[/code]

Nothing fancy, but works :)

Here’s the source:

[code:c#]using System.Windows.Browser;

namespace EasyPainter
{
    /// <summary>
    /// Common functions for HTML interop
    /// </summary>

    public static class HtmlDocumentExtensions
    {
        /// <summary>
        /// Retrieves the text contents of a given HTML element by ID
        /// Sample html:
        ///    <span style="visibility: hidden; display: none; height: 0px; width: 0px; border: 0px">
        ///        <span id="titleText">You Had Me At 'Hello World!'</span>
        ///    </span>
        /// </summary>
        /// <param name="doc"></param>
        /// <param name="elementId"></param>
        /// <returns></returns>

        public static string GetTextFromHtmlPage(this HtmlDocument doc, string elementId)
        {
            HtmlElement elementById = doc.GetElementById(elementId);
            if (elementById != null)
            {
                object property = elementById.GetProperty("innerText");
                if (property != null)
                {
                    return property.ToString();
                }
                property = elementById.GetProperty("textContent");
                if (property != null)
                {
                    return property.ToString();
                }
            }
            return null;
        }

        /// <summary>
        /// Retrieves the text contenst of HTML element by ID with a default value
        /// in case the element is missing or empty
        /// </summary>
        /// <param name="doc"></param>
        /// <param name="elementId"></param>
        /// <param name="defaultValue"></param>
        /// <returns></returns>

        public static string GetTextFromHtmlPage(this HtmlDocument doc, string elementId, string defaultValue)
        {
            string textFromHtmlPage = doc.GetTextFromHtmlPage(elementId);
            if (string.IsNullOrEmpty(textFromHtmlPage))
            {
                return defaultValue;
            }
            return textFromHtmlPage;
        }
    }

}[/code]