Four Ways to Locally Update a Web Page
page 3 of 12
by Xianzhong Zhu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 55246/ 148

Sample 1

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.


View Entire Article

User Comments

Title: d   
Name: d
Date: 2012-10-24 12:04:07 PM
Comment:
d
Title: Locally update a web page   
Name: Santosh
Date: 2010-05-04 3:41:59 AM
Comment:
It's an amazing and really very very helpful article. After reading this article, I have become a fan of this site.... I request you to not delete this article, as it may be very helpful to many people.
Title: updating a web page   
Name: Mrs.
Date: 2009-05-19 3:23:22 PM
Comment:
this is great
Title: Download Links Does Not Work   
Name: Tarik
Date: 2008-11-07 9:04:04 AM
Comment:
Good Article , But Please Review The Downloads Links
Title: Mr.   
Name: Joydip Kanjilal
Date: 2008-10-16 10:25:58 AM
Comment:
Excellent!
Title: how up date webpage   
Name: MUHAMMAD YOUNUS TOOR
Date: 2008-09-08 10:32:32 PM
Comment:
I WANT LEARN ABOUT WEB PAGE MAKIN G






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-11-14 6:55:42 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search