AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1060&pId=-1
How to Popup a Window Using DIV Layer in ASP.NET 1.x/2.x
page
by Bilal Haidar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 53404/ 55

Introduction

In a project I am currently working on (ASP.NET 1.1), one of the Web Forms included has a set of three controls that represent a certain feature in the system.  Suppose those controls are simple DropDownLists.  When a value is being selected in the first DropDownList, the data present in the second DropDownList should be filtered by the first value selected.  The same idea applies on the third DropDownList.

This form is going to be used by end users who know nothing about ASP.NET or about development in general.  All they want is a fancy web form that makes their life easy.

A decision has to be made as to what to use in place of those three controls.  Do we use DropDownLists or do we use Textboxes with some sort of popup window to fill the data in the Textbox?  Well, we came up with a very nice and fancy solution; use a Textbox and hook up the OnClick client side event to a JavaScript method pops up a Div layer, including a ListBox to select a value from.

A solution without using any normal popup windows or using the old fashioned DropDownLists to filter selection!

The HTML WebForm

We will build a very simple WebForm that includes two Textboxes.  For each Textbox we will attach the OnClick client event to fire a JavaScript method that will do the job of popping up the Div Layer or the magical Popup window.

Listing 1

<%@ Page language="c#"
 Codebehind="ParentPage.aspx.cs" AutoEventWireup="false"
 Inherits="PopupWithDiv.ParentPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>Parent Page</title>
            <LINK href="main.css" type="text/css" rel="stylesheet">
            <script src="jsPopup.js" type="text/javascript"></script>
                  <script language="javascript">
                  <!--
                        // Prevent users from typing any text 
                        // into the Textbox
                        function ProtectBox(e) 
                        {
                              return false;
                        }
                        
                  //-->
                  </script>
      </HEAD>
      <body>
            <form id="Form1" method="post" runat="server">
                  <!-- Header Section -->
                  <div id="header">
                        <p>Popup Window with DIV Layer</p>
                  </div>
                  <!-- Body Section -->
                  <div id="content">
                        <table border="0" cellpadding="0" cellspacing="0">
                              <tr valign="top">
                                    <td><label for="txtCountry">Country :</label></td>
                                    <td><asp:TextBox
 id="txtCountry" runat="server" OnKeyDown="return
 ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"></asp:TextBox></td>
                                    <td width="50"></td>
                                    <td><label for="txtCity">City :</label></td>
                                    <td><asp:TextBox
 id="txtCity" runat="server" OnKeyDown="return
 ProtectBox(event);" OnClick="PopupArea(event, 'divCity')"></asp:TextBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- Country --%>
                  <div class="popupWindow" id="divCountry">
                        <table cellSpacing="0" cellPadding="0" width="100%"
 bgColor="#2557ad" border="0">
                              <tr>
                                    <td align="right"><span style="CURSOR: hand"
 onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="close.gif"
 border="0"></span></td>
                              </tr>
                              <tr>
                                    <td>
                                          <asp:ListBox
 id="lstCountry" runat="server"
 AutoPostBack="True" width="100%"
 rows="10"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- City --%>
                  <div class="popupWindow" id="divCity">
                        <table
 cellSpacing="0" cellPadding="0" width="100%"
 bgColor="#2557ad" border="0">
                              <tr>
                                    <td
 align="right"><span style="CURSOR: hand"
 onclick="jsAreaClose('divCity')"><img alt="Hide Popup" src="close.gif"
 border="0"></span></td>
                              </tr>
                              <tr>
                                    <td>
                                          <asp:ListBox
 id="lsCity" runat="server" AutoPostBack="True"
 width="100%" rows="10"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>                  
            </form>
      </body>
</HTML>

The areas in bold are the ones important for this Popup window to properly function.  On the mouse click, a JavaScript function is being called: PopupArea.

That function is being defined in an accompanying JavaScript file.  We will not go into its details, but this function is the one responsible for showing the pop up window, i.e. to show the DIV layer.

As you can see, we have added two DIV layers at the end of the page above, one for countries and one for cities.  Each one holds an ASP.NET ListBox from which the user will select.

Figure 1 shows the page in action when viewed in a browser.  It shows how the DIV Layers are being pop up.

Figure 1

 

When a click is done inside a Textbox, the window is shown on the client-side without any post back.

Now, it is time to populate the List boxes with some data to simulate a real situation.

Page Code-behind

In the code behind the page, we are going to load all the data to the countries’ list box from an XML file, already populated with some country names.  Listing 1 below shows how to populate the country list box

Listing 2: Populate Country ListBox

// Load data into Country List box
if (!Page.IsPostBack)
{
// Load data from XML into a DataSet
  DataSet ds = new DataSet();
  ds.ReadXml(Server.MapPath("countries.xml"));
 
  this.lstCountry.DataSource = ds.Tables[0].DefaultView;
  this.lstCountry.DataTextField = "name";
  this.lstCountry.DataBind();
}

In this stage when the page runs, the user can select a country as shown in the Figure 2.

Figure 2

Now, when the user selects a country the country listbox event handler will be fired.

It will fill the item selected in the country Textbox.

Then it loads the cities' data from a sample XML file data and filters the data so that only cities of the selected country will be selected.

Listing 3 shows the country ListBox event handler.

Listing 3

private void lstCountry_SelectedIndexChanged(object sender, EventArgs e)
{
  // Set the value in the textbox
  this.txtCountry.Text = this.lstCountry.SelectedValue;
 
  // Load and Filter the lstCity
  DataSet ds = new DataSet();
  ds.ReadXml(Server.MapPath("cities.xml"));
 
  DataView dv = ds.Tables[0].DefaultView;
  dv.RowFilter = "country = '" + this.lstCountry.SelectedValue + "'";
 
  // Bind lstCity
  this.lstCity.DataSource = dv;
  this.lstCity.DataTextField = "name";
  this.lstCity.DataBind();
}           

The user is now able to select a city out of a set of cities of the country he/she has chosen.  Figure 3 shows this scenario.

Figure 3

The event handler of the city Listbox does nothing except place the selected city in the Texbox.

In the project we have been working on, we have used the free MagicAjax Panel so that all the post backs done when selecting values from ListBoxes are done in an asynchronous fashion and the results are great.  To get more information about MagicAjax, visit their website at http://www.magicajax.net.

Downloads
Conclusion

In this article we have seen how easy it is to use a simple DIV layer as a popup window that contained an ASP.NET Server control (Listbox).  We have seen how on a mouse click inside a Textbox, we were able to popup a window which was nothing except a DIV Layer with some CSS formatting.

The popup implementation in this article should give you many ideas about how you can make use of such popup windows to make your web forms fancier and friendlier.

Hope you enjoyed this article.

Happy Dot Netting!!


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 11:08:34 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search