在开发应用程序时,经常需要从Web服务获取HTML片段,并在WebBrowser控件中显示。在这种情况下,不会从网络加载JS、CSS或图像,而是可以将它们包含在应用程序包(XAP)中。
为了演示如何做到这一点,将以一个示例为例,该示例将从Web服务获取HTML代码。示例HTML代码如下:
<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>
如所见,此HTML调用了jQuery Mobile的data-role。在演示中,将在XAP包中包含jqueryMobile JS和CSS文件。
第一步是将文件添加到一个目录中,例如:HTML,并设置“构建操作”为“内容”。
接下来,将编写一个名为BuildHTML的方法,用于将从WebService接收到的HTML与HTML主体连接起来。
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();
}
如所见,CSS和JavaScript文件的引用使用了URL /html/...,这意味着WebBrowser将从隔离存储中加载文件,使用相对URI。
不幸的是,将文件作为内容添加到解决方案中并不会将它们添加到隔离存储中。为此,将编写一个名为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);
}
}
}
}
现在,可以在页面的开头添加此代码:
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");