1. Launch Visual Studio 2005 and then select menu item
"File | New Website…"
to create an ASP.NET website named IFrameWay (select
Visual C# as the built-in language).
2. Open the web page "Default.aspx," switch to the
design view, and add controls as seen in the following figure.
Figure 1: The design-time snapshot for Sample 1
As shown from the above figure, this is a basic sample. When
the users input the name of a city and click "Search," the searched
results will be listed inside a DropDownList control just below button "Search."
This process must be asynchronous and the updating should be limited to the
specified area (i.e. within the DropDownList control area).
3. With the aim in mind, let us start the coding. Switch to
the source code view of page "Default.aspx" and embed an iframe
element within the lower right corner of the above table.
Listing 2
<iframe src="subpage.aspx" style="TEXT-ALIGN: center" id="iframe1"
width="100%" height="100%" frameborder="0" scrolling="auto"/>
Note, here we embed another small webpage within the iframe
element.
4. When the user clicks the button "Search," we
need to pass the name of the city he has just entered to the embedded page of
the above iframe element. The following corresponds to the click event handler
of button "Search."
Listing 3
function Search()
{
var city=document.getElementById("txtCity").value;
if(city !="")
{
document.getElementById("iframe1").src=" subpage.aspx?city=" +city;
}
}5. Right click the project, add a new ASP.NET page and name
it "subpage.aspx." In this article this page acts as a broker to
transfer data between the client side and the server side.
6. Drag a DropDownList control onto the page and press F7 to
switch to the CodeFile "subpage.aspx.cs." Here is the merely method
to be programmed with it.
Listing 4
protected void Page_Load(object sender, EventArgs e)
{
string city = Request.QueryString["city"];
switch (city)
{
case "BeiJing":
DropDownList1.Items.Clear();
DropDownList1.Items.Add("Chao Yang");
DropDownList1.Items.Add("Hai Dian");
DropDownList1.Items.Add("East City");
DropDownList1.Items.Add("West City");
break;
case "ShangHai":
DropDownList1.Items.Clear();
DropDownList1.Items.Add("Pu Dong");
DropDownList1.Items.Add("Jing An");
DropDownList1.Items.Add("Hong Kou");
DropDownList1.Items.Add("Xu Hui");
break;
case "WeiFang":
DropDownList1.Items.Clear();
DropDownList1.Items.Add("Fang Zi");
DropDownList1.Items.Add("Wei Cheng");
DropDownList1.Items.Add("Kui Wen");
DropDownList1.Items.Add("Kai Fa");
break;
}
}Here, just for demonstration, we have hard coded the data. We
obtain the passed city from the main page using Request object, and then
populate the control DropDownList1 with the related area data.
That is it - all the things are done on the server side.
7. Now, right click page "Default.aspx," set it as
the startup page and click "Preview in the browser." Without
anything wrong, you will get the run-time snapshot like Figure 2.
Figure 2: The run-time snapshot for Sample 1
When the user inputs the name of his favorite city and clicks
the button "Search," the following DropDownList control will be
populated with the associated area data. Of course, the clicking action only
results in the local updating (i.e. filling in the DropDownList control).
Author's Notes: 1. Today, there are
tons of debates on the Internet on IFrame - good or bad. The very "bad"
may mainly dwell on search engine optimizations; there is, however, a great article
which gives a better idea of utilizing IFrame. 2. Please be sure to differentiate
IFrame (i.e. inline frame) from frame.
An inline frame is just a frame within a single page usually containing another
page - it can exist without having a frameset defined, while a frame is part of
the browser display but exists as part of a frameset.
Next, let us examine the second commonly used approach to
partially update a web page - JavaScript.
