必备的东西：
Windows XP/Vista/7/2003/2008
Visual Studio 2005 or 2008 (download the correct version of Home Site project above)
.NET Framework 2.0 and ASP.NET AJAX 1.0
今天，很多浏览器提供了使用tab的能力去浏览更多的网页和网站。当然这是一个非常有用的功能来替代同时打开几个浏览器，但如果提供在一个页面中浏览多个网页也非常的不错。
例如，如果你的主页是由很多不同的有用的Web工具或者站点组成，一个tab页面将可能非常的有用。使用框架集，IFRAME等等，都是宿主外部内容的典型方式。这些方法允许你在单个页面上宿主多个网页。 但是使他们能正确的布局却非常不容易。 更不用说去处理页面和IFRAME的scrollbars等问题。
这篇文章中，尝试去宿主外部数据，提供了一个基本的解决方案,利用ASP.NET，AJAX和javascript 去处理一些遇到的麻烦。
计划
主旨是提供一个简单的宿主外部数据的方案，这个解决方案有下面这些简单的需求。
1、提供一个tab界面，方便浏览。
2、提供一个配置方法来添加tab
3、使每个tab页都能宿主配置的页面
基本的技术需要是：
1、仅当tab被选中的时候，加载外部的数据内容
2、保证纵向的scrollbars的设置成显示，而且仅当需要处理的数据溢出的时候，才显示scrollbars 。
3、保证该解决方案是能跨浏览器工作
解决方案的名字和主页面的名字都是 Home Site
分析
对于这个解决方案，我决定使用JQuery UI Tabs 来实现表格式的导航功能。我以前也使用过商业的开源的tab控件。但是JQuery UI Tabs 是轻量级的，实现非常地简单，而且是免费的。
除了JQuery 和tab控件以及.net提供的功能，不需要其它的控件。 VS2005 将足以结合整个项目的开发环境，选择C#作为开发语言。
我将使用一个IFRAME的宿主网站内容，由于跨站点（又名跨域）的安全限制，使用JQuery UI Tabs去宿主外部网页将无法直接工作。
设计
这里有一个为客户提供视觉上的最低限度的需求： 
该解决方案，将需要三种不同的功能模块：
1、配置模块
2、使用JQuery UI Tabs 插件的tab界面
3、使用IFRAME元素宿主网页内容办法。
配置模块：
一个需求的功能是是使tab可配置。 我选择最低限度，将tab的配置信息放到一个xml文件之中。虽然我可以更进一步的深入，使tab能的动态增加和删除，我决定在本文的第二篇中提供此功能。
XML文件的格式如下：
代码
| |
namespace HomeSite
{
///
/// Tab configuration static handling class
///
public static class TabConfiguration
{
///
/// This class returns a collection of TabDefinition classes created from
/// parsing the tab definitions defined in the TabConfig.xml file.
///
/// The Page reference
/// calling this class
///
public static ArrayList LoadConfiguration(Page page)
{
// Local container for tab definitions
ArrayList tabList = new ArrayList();
try
{
// Read the contents of the TabConfig.xml file
StreamReader reader = new StreamReader(new FileStream(
page.MapPath("./TabConfig.xml"),
FileMode.Open, FileAccess.Read));
string xmlContent = reader.ReadToEnd();
reader.Close();
reader.Dispose();
// Create an XML document and load the tab configuration file contents
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(xmlContent);
// Iterate through each tab definition, create a TabDefinition class,
// and add the TabDefinition to the local ArrayList container
foreach (XmlNode node in xmlDoc.SelectNodes("/configuration/tab"))
{
TabDefinition tab = new TabDefinition();
tab.ID = node.Attributes["id"].Value;
tab.DisplayName = node.Attributes["displayName"].Value;
tab.Path = node.Attributes["path"].Value;
tabList.Add(tab);
}
}
catch
{
// Do nothing
}
// Return the tab definition
return tabList;
}
}
///
/// This class serves as the container for a tab definition
///
public class TabDefinition
{
///
/// Member variable for the Unique ID for the tab
///
private string _id;
///
/// Member variable for the displayed name of the tab
///
private string _displayName;
///
/// Member variable for the web page URL to host in the tab (IFRAME)
///
private string _path;
///
/// Property for the Unique ID for the tab
///
public string ID
{
get { return _id; }
set { _id = value; }
}
///
/// Property for the displayed name of the tab
///
public string DisplayName
{
get { return _displayName; }
set { _displayName = value; }
}
///
/// Property for the web page URL to host in the tab (IFRAME)
///
public string Path
{
get { return _path; }
set { _path = value; }
}
}
}
现在，让我们看看Home Site 的主页的标记
代码
http://www.w3.org/1999/xhtml">
Home Site 页面的隐藏代码如下：
代码
namespace HomeSite
{
///
/// Home Site (default) web page code behind class
///
public partial class _Default : System.Web.UI.Page
{
///
/// On page load we need to create the tab
/// list items for tab interface construction
///
///
///
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
AddTabsToForm();
}
///
/// This method calls to our business logic
/// class to read the tab configuration file,
/// which will return an ArrayList of TabDefinition
/// classes. This method iterates
/// through the ArrayList building HTML controls to add to the tab panel.
///
protected void AddTabsToForm()
{
foreach (TabDefinition tab in TabConfiguration.LoadConfiguration(this.Page))
{
HtmlGenericControl tabListItem = new HtmlGenericControl();
tabListItem.TagName = "li";
tabListItem.InnerHtml = " tab.DisplayName + "\" href=\"ContentLoader.aspx?ID=" +
tab.ID + "&Path=" + tab.Path +
"\">" + tab.DisplayName + "";
panelList.Controls.Add(tabListItem);
}
}
}
}
遇到的问题
我遇到的主要的问题是跨浏览器的情况下自动适应IFRAME的大小，该方案在IE 8，Firefox v3.5.6，和谷歌v3.0.195.38浏览器进行测试。
我必须进行浏览器检测，根据IFRAME在三个浏览器测试的尺寸，调整相应的宽度和高度。当浏览器改变大小的时候，Chrome 和FireFox看起来IFRAME有个固定的高度。 但是， IE8看来来会丢失在IFRAME和浏览器顶部之间的padding。调整宽度和高度特别是IE似乎应该尽可能的减少IFRAME到IE浏览器窗口的底部“蜷缩”影响。
限制
1、以下JavaScript将使你加载的网页跳出IFRAME，我不知道任何解决办法此（如果存在）。Code Project 网站上目前拥有类似下面的代码，这样配置选项指向http://www.codeproject.com/非常的容易，这里重现描述的动作。
2、在浏览器中，Web网页被迫改变页面本身的大小，有可能跳出IFRAME窗体，从而取代了前父窗口。
3、我没有使用Safari，Opera，早期版本的IE浏览器，或任何其他浏览器的早期版本测试的此解决方案，所以要在Home Site中适当地调整heightAdjust和widthAdjust变量，适应没有测试的IE浏览器或低于IE8浏览器的版本。
总结和兴趣点
虽然这种解决方案不是很复杂，通过一个标签界面宿主外部网站内容。这是我所见过的许多网络论坛和博客要求的功能。请注意：您也可以配置标签可显示自己相关的域名或网站（在同一台服务器）。
