Click here to Skip to main content
Click here to Skip to main content

Include static JS / CSS / image files from IsolatedStorage in WebBrowser control

, 8 Aug 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Include static JS / CSS / image files from IsolatedStorage in the WebBrowser control.

Introduction

In your project, you probably need to generate dynamic HTML, or to get an HTML fragment from a web service and to display it in a WebBrowser control. In those cases, you would not load at any time the JS, CSS, or images from the network but you could include it in your application package (XAP).

Solution

To demonstrate how to do that, we will take an example that will get the HTML code from a web service:

<div data-role='fieldcontain'>
 <fieldset data-role='controlgroup'>
  <legend>Do you agree to this request?</legend>
  <input type='checkbox' name='agree-1' id='agree-1' />
  <label for='agree-1'>I agree</label>
 </fieldset>
</div>

As you see, this HTML calls data-role from jQuery Mobile. In our demo, we will include the jqueryMobile JS and CSS files in our XAP package.

The first step is to add your files in a directory, for example: HTML and to set the "Build Action" to "Content".

The next step is to concat the HTML received from the WebService with the our HTML body. For that, we will write a method BuildHTML.

public string BuildHTML(string htmlFromWS)
{
    StringBuilder html = new StringBuilder(@"<!DOCTYPE html>
                    <html class=""ui-mobile-rendering"">
                    <head>
                        <meta charset=""utf-8"" />
                        <meta name=""viewport"" 
                          content=""initial-scale=1.0; maximum-scale=1.0"" />
                        <link rel=""stylesheet"" 
                          type=""text/css"" 
                          href=""/html/jquery.mobile.structure-1.0.1.min.css"" />
                        <link rel=""stylesheet"" 
                          type=""text/css"" 
                          href=""/html/style.css"" />
                        <script type=""text/javascript"" 
                          src=""/html/jquery-1.7.1.min.js""></script>
                        <script type=""text/javascript"" 
                          src=""/html/jquery.mobile-1.0.1.min.js""></script>
                    </head>
                    <body style=""-webkit-user-select: none;"">
                        <div style=""padding:80px 0 0 0"" 
                          data-role=""page"">
                        <div data-role=""content"">");
 
    html.Append(htmlFromWS);
    html.Append("</div></div></body></html>");
    return html.ToString();
}

As you can see, the CSS and the JavaScript is referenced with the URL /html/... This means that the webbrowser will load the files from isolatedstorage, with a relative URI. Unfortunately, adding the files as Content in the solution doesn't add them into IsolatedStorage. For that, we will write the method CopyContentToIsolatedStorage.

public static void CopyContentToIsolatedStorage(string file)
{
    // Obtain the virtual store for the application.
    IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
 
    if (iso.FileExists(file))
        return;
 
    var fullDirectory = System.IO.Path.GetDirectoryName(file);
    if (!iso.DirectoryExists(fullDirectory))
        iso.CreateDirectory(fullDirectory);
 
    // Create a stream for the file in the installation folder.
    using (Stream input = Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream)
    {
        // Create a stream for the new file in isolated storage.
        using (IsolatedStorageFileStream output = iso.CreateFile(file))
        {
            // Initialize the buffer.
            byte[] readBuffer = new byte[4096];
            int bytesRead = -1;
 
            // Copy the file from the installation folder to isolated storage. 
            while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0)
            {
                output.Write(readBuffer, 0, bytesRead);
            }
        }
    }
}

and now, you can add this code in the beginning of your page:

CopyContentToIsolatedStorage("html/themes/images/ajax-loader.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-white.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-white.png");
 
CopyContentToIsolatedStorage("html/jquery-1.7.1.min.js");
CopyContentToIsolatedStorage("html/jquery.mobile-1.0.1.min.js");
CopyContentToIsolatedStorage("html/style.css");
CopyContentToIsolatedStorage("html/jquery.mobile.structure-1.0.1.min.css"); 

and then, we just have to concat the HTML and send it to the WebBrowser control. But be careful, there is a tip to force the WebBrowser to load the HTML and its files ! You have to save an HTML file into IsolatedStorage in the root folder of your css/js files.

string htmlFromWS = ...;
// Concat our html
string html = BuildHTML(htmlFromWS);
var bytes = Encoding.UTF8.GetBytes(html);
// Get the iso store
IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
// Write the html in the html/index.html
using (IsolatedStorageFileStream output = iso.CreateFile("html/index.html"))
{
    output.Write(bytes, 0, bytes.Length);
}
// navigate to the html/index.html
wb.Navigate(new Uri("html/index.html", UriKind.Relative));

And that's it, the WebBrowser control will load the CSS, JS, and your HTML from IsolatedStorage! You can find the source code here: Download source code - 100 KB.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nicolas Humann
Technical Lead
France France
Specialized in .net technologies for many years, I am a technology fan in both asp.net and wpf/silverlight, using c# and .NET 4.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRanjan.D27-Mar-13 14:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141030.1 | Last Updated 8 Aug 2012
Article Copyright 2012 by Nicolas Humann
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid