This article provides an IFRAME element used to host web pages using asp.net and JQueryUITabsplug-in. Essential:
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
Today, many browsers use tabs to browse more web pages and websites. Of course, this is a very useful function to replace several browsers at the same time, but it is also very good if you provide a page to browse multiple web pages.
For example, if your home page is composed of many different useful Web tools or sites, a tab page may be very useful. The use of Frame Sets, IFRAME, and so on are typical methods of hosting external content. These methods allow you to host multiple webpages on a single page. However, it is not easy for them to make the correct layout. Not to mention handling issues such as scrollbars of pages and IFRAME.
In this article, we tried to host external data and provided a basic solution to solve some problems encountered by using ASP. NET, AJAX, and javascript.
Plan
The purpose is to provide a simple external data hosting solution, which has the following simple requirements.
1. A tab interface is provided to facilitate browsing.
2. Provide a configuration method to add a tab
3. Make each tab page host the page configured
The basic technical requirements are:
1. Only when the tab is selected, external data content is loaded.
2. Ensure that the vertical scrollbars is set to display, and scrollbars is displayed only when the data to be processed overflows.
3. Ensure that the solution works across browsers.
The solution name and Home Page name are both Home Site
Analysis
For this solution, I decided to use JQuery UI Tabs to implement table-based navigation. I have used commercial open-source tab controls before. However, JQuery UI Tabs is lightweight and easy to implement and free of charge.
In addition to JQuery, tab controls, and. net functions, other controls are not required. VS2005 combines the development environment of the entire project and selects C # As the development language.
I will use the content of an IFRAME host website. Due to cross-site (also known as cross-origin) security restrictions, using JQuery UI Tabs to host external webpages will not work directly.
Design
Here is a minimum visual requirement for customers:
This solution requires three different functional modules:
1. Configuration Module
2. Use the tab interface of the JQuery UI Tabs plug-in
3. Use the IFRAME element to host the webpage content.
Configuration module:
A required feature is to enable tab configuration. I select the minimum option to put the tab configuration information in an xml file. Although I can go further to enable the dynamic addition and deletion of tabs, I decided to provide this function in the second article of this article.
The XML file format is as follows:
Code
The Code is as follows:
Parameter description:
Id = unique ID of the tab. This ID cannot contain spaces
DisplayName = Name displayed in the tab Header
Path = URL with query parameters. "http: //" is optional.
The configuration file name is TabConfig. xml. Now you must manually add or delete the tab to update the configuration file of the solution.
Content Loader:
It can be said that no content loading module requires IFRAME to set an internal list item for the tab page. However, if IFRAME is in an independent host webpage that uses an anchor as a child element of each tab list item element, I feel that there is no better control than IFRAME in terms of functionality and testing:
If you want to, make the content loader a common module that accepts the query string parameters to correctly set the IFRAME element. The parameters are the unique ID and source attribute values of the element, that is, the URL of the webpage.
Another content loader is designed to load the IFRAME throughout the page (scrolling is set to auto ). In addition, the webpage body must hide overflow (by setting style attributes) to avoid repeated scroll bars. Especially when the browser is changed. Finally, the processing of the scroll bar must be cross-browser.
Tab page
The tab interface code is very simple. You can get detailed DEMO code from the JQuery UI Tabs documentation instructions. The implementation of JQuery UI Tabs in the document is different from that of JQuery UI Tabs: The href of each tab anchor directs to the content loading page, and then loads the required webpage to IFRAME.
Some additional things
The above label, I think it is very convenient to use a p to display the header, logo, or even some links or menu items. For a better requirement, I want to fold the header so that the page of each tag host can have a maximum visual effect.
The final design layout is as follows:
Code/Development
Starting from the content loader, the following is a tag:
Code
The Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true"
CodeBehind = "ContentLoader. aspx. cs" Inherits = "HomeSite. ContentLoader" %>
ContentLoader
The real magic is the css code. I set the margin of the body to 0 and the overflow to hidden. Prevent scrollbars from appearing on the page body.
The scrolling of IFRAME is set to auto. Therefore, if you need a scroll bar, only IFRAME is provided to it. Because there is a large amount of space around IFRAME that is hard to see, set margins to 0 and set the height and width of IFRAME to 100% to ensure that the webpage content occupies as much space as possible. Note that the Literal control is used in html labels. As you will see the following hidden code, the purpose of using Literal is to allow background code injection into the IFRAME element, which can construct the correct querystring ID and Path parameters.
Code
The Code is as follows:
Using System;
Using System. Data;
Using System. Configuration;
Using System. Collections;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Web. UI. HtmlControls;
Namespace HomeSite
{
///
/// Content Loader code behind class
///
Public partial class ContentLoader: System. Web. UI. Page
{
///
/// On Page Load we need to capture query string parameters, construct
/// An IFRAME element, and inject the IFRAME element into our Literal control
///
///
///
Protected void Page_Load (object sender, EventArgs e)
{
String id = "";
String path = "";
// Validate we have valid querystring parameters
// Namely "ID" and "Path"
If (HasValue (Request ["ID"]) &
HasValue (Request ["Path"])
{
// Set our local variables
Id = Request ["ID"]. Trim (). ToString ();
Path = Request ["Path"]. Trim (). ToString ();
// Prepend the path URL with http: // if needed
If (! Path. ToLowerInvariant (). StartsWith ("http ://"))
Path = "http: //" + path;
// Construct the IFRAME element and set the Text value of the Literal control
Literal1.Text = "";
}
Else
{
// Either query parameter or both are not set or do not
// Exist (not passed as request parameters)
Literal1.Text = "An" +
"Error occurred while attempting to load a web page .";
}
}
///
/// Simple static class used to validate the value of querystring
/// Parameter is not null or an empty string
///
/// The object to check
/// Returns true if the object (string)
/// Has a value; false otherwise.
Public static bool HasValue (object o)
{
If (o = null)
Return false;
If (o is String)
{
If (String) o). Trim () = String. Empty)
Return false;
}
Return true;
}
}
}
As long as you pass the querystring ID and Path parameters to it, the loaded page can be run independently. View the webpage through VS2005, with the URL example: http: // localhost: 49573/ContentLoader. aspx? ID = 1234 & Path = www.amazon.com.
The Code is as follows:
Using System;
Using System. Data;
Using System. Configuration;
Using System. Collections;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Web. UI. HtmlControls;
Using System. IO;
Using System. Xml;
Using System. Text;
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
/// ArrayList of TabDefinition classes
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 ;}
}
}
}
Note that the LoadConfiguration method must be provided for the page instance to correctly introduce the location of TabConfig. xml. I could have used XmlTextReader, but I chose to use StreamReader to read the content of the entire configuration file and parse the tab configuration information using the XmlDocument object. Because I think it is much better to quickly dump the entire configuration file than to open the configuration file through process parsing. This is the case when XmlTextReader is used.
Now, let's take a look at the Home Site homepage tag.
Code
The Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true"
CodeBehind = "Default. aspx. cs" Inherits = "HomeSite. _ Default" %>
Home Site
Type = "text/css" rel = "stylesheet"/>
Type = "text/css" rel = "stylesheet"/>
