Popup control in ASP.NET 2.0 using VB.NET

In this article I am going to describe Popup control in ASP.NET 2.0.
  • 4792
 

Introduction:

 

In this article you will see how easy it is to use a simple DIV layer as a popup window that contained an ASP.NET Server control (List box). You will also see how on a mouse click inside a Textbox, you can able to popup a window which is nothing except a DIV Layer with some CSS formatting.

 

For Example:  Through this example you can learn how the popup controls create?

  

Html code for popup control:

 

<%@ Page language="VB" Inherits="PopupWithDiv.ParentPage" CodeFile="ParentPage.aspx.vb" %>

<!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><font color= "#ff9933" size=6>Popup Window with DIV Layer</font></p>

</div>

<!-- Body Section -->

<div id="content">

<table border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td><label for="txtCountry" style="font-size: larger; text-transform: capitalize; color: purple">Country :</label></td>

<td><asp:TextBox id="txtCountry" runat="server" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')" BackColor="#FFC0FF" BorderColor="Fuchsia">Click here</asp:TextBox></td>

<td width="50"></td>

<td><label for="txtCity"style="font-size: larger; text-transform: capitalize; color: purple">City :</label></td>

<td><asp:TextBox id="txtCity" runat="server" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCity')" BackColor="#FFC0FF" BorderColor="Fuchsia">Click here</asp:TextBox></td>

</tr>

</table>

</div>

<%-- Country --%>

<div class="popupWindow" id="divCountry">

<table cellSpacing="0" cellPadding="0" width="250px" 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" BackColor="rosybrown" ForeColor="gold" ></asp:ListBox></td>

</tr>

</table>

</div>

<%-- City --%>

<div class="popupWindow" id="divCity">

<table cellSpacing="0" cellPadding="0" bgColor="#2557ad" width="250px" 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="lstCity" runat="server" AutoPostBack="True" width="100%" rows="10" BackColor="RosyBrown" ForeColor="Gold"></asp:ListBox>

</td>

</tr>

</table>

</div>

</form>

</body>

</HTML>

 

 

Code behind code:

 

 

 

Imports System

 

Imports System.Collections

Imports System.ComponentModel

Imports System.Data

Imports System.Drawing

Imports System.Web

Imports System.Web.SessionState

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports System.Web.UI.HtmlControls

 

Namespace PopupWithDiv

    ' <summary>

    ' Summary description for ParentPage.

    ' </summary>

    Partial Public Class ParentPage

        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

            ' Load data into Country List box

            If Not Page.IsPostBack Then

                ' Load data from XML into a DataSet

                Dim ds As DataSet = New DataSet()

                ds.ReadXml(Server.MapPath("countries.xml"))

 

                Me.lstCounTry.DataSource = ds.Tables(0).DefaultView

                Me.lstCounTry.DataTextField = "name"

                Me.lstCounTry.DataBind()

            End If

        End Sub

 

                   #region Web Form Designer generated code

        Protected Overrides Sub OnInit(ByVal e As EventArgs)

            ' CODEGEN: This call is required by the ASP.NET Web Form Designer.

 

            InitializeComponent()

            MyBase.OnInit(e)

        End Sub

        ' <summary>

        ' Required method for Designer support - do not modify

        ' the contents of this method with the code editor.

        ' </summary>

        Private Sub InitializeComponent()

            Me.lstCounTry.SelectedIndexChanged += New EventHandler(lstCounTry_SelectedIndexChanged)

            Me.lstCity.SelectedIndexChanged += New EventHandler(lstCity_SelectedIndexChanged)

        End Sub

#End Region

                   #region ListBox Event Handler

        Private Sub lstCounTry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)

            ' Set the value in the textbox

            Me.txtCounTry.Text = Me.lstCounTry.SelectedValue

 

            ' Load and Filter the lstCity

            Dim ds As DataSet = New DataSet()

            ds.ReadXml(Server.MapPath("cities.xml"))

 

            Dim dv As DataView = ds.Tables(0).DefaultView

            dv.RowFilter = "country = '" + Me.lstCounTry.SelectedValue + "'"

 

                             / Bind lstCity

            Me.lstCity.DataSource = dv

            Me.lstCity.DataTextField = "name"

            Me.lstCity.DataBind()

        End Sub

 

        Private Sub lstCity_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)

            ' Set the value in the textbox

            Me.txtCity.Text = Me.lstCity.SelectedValue

        End Sub

#End Region

    End Class

End Namespace

 

 

 

 

Output: When you debug your application and click on the first textbox then you get the following output. It means the popup control opens.  

 

 

  untitled 1.JPG

 

Figure 1: You are seeing the popup window in this figure.

 

This window will close automatically after some time or you can close it yourself.

When you select any country then you can select any city of that country from other popup window. If you will not select ant city then other popup window will open but you can not see the city in this example.

 

After select ant country you will see the following output.

 

 

  untitled3.JPG

 

Figure 2: second popup window is open.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.