asp.net This article Bilal Haidar will lead you through the use of DIV elements to create pop-up forms that can contain simple HTML elements or contain ASP.net server controls. And there is no use of the traditional window functions and showmodaldialog/showmodelessdialog functions in the implementation (traditional we use window.open, or ShowModalDialog Such a function to make pop-up windows--daily notes)
Recently I've been using asp.net1.1 technology to develop a form, the form contains a collection of three controls that are used to display system information. You can assume that these controls are simple drop-down boxes, and when the first Drop-down box is selected, the value of the second Drop-down box will display the result of the first filter, Similarly, the third Drop-down box will be displayed according to the selection of the second Drop-down box.
This technique for forms is often used to get a better user experience for end-users who do not know the ASP.net technology.
Do you use DropDownList or a TextBox control with pop-up form functionality when you decide to use the alternatives to these controls?
Well, we've got a good solution: Use the TextBox control and hook the onclick event to trigger the Div pop-up form, including using the ListBox control to select the value of the data
One does not use any regular popup forms or outdated DropDownList to accomplish this function
The HTML WebForm
We have built a simple webform, he contains some textbox, each textbox has attached the OnClick event, with a section of JavaScript code to pop up the form, the code is as follows:
<%@ 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" > </asp:TextBox> </td>
<TD width= "" ">" </td>
<td> <label for= "txtcity" >city: </label> </td>
<td> <asp:textbox
Id= "txtcity" runat= "server" > </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"
>Border= "0" > </span> </td>
</tr>
<tr>
<td>
<asp:listbox id= "Lstcountry" runat= "Server" autopostback= "True" width= "100%"
Rows= "Ten" > </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" > </span> </td>
</tr>
<tr>
<td>
<asp:listbox id= "lscity" runat= "Server" autopostback= "True" width= "100%" rows= "ten" > </asp:ListBox> </td>
</tr>
</table>
</div>
</form>
</body>
</HTML>
In code, the part that is marked in bold is the main property of the popup form, and the end Javascript:popuparea is invoked when the mouse clicks.
As you can see, we have added two div elements to the bottom of the page, one for the country, one for the city, and one for each containing the ListBox control, which allows the user to select the contents using the listbox.
Figure 1 below illustrates the effect of page browsing, and he also shows how to eject a div form
When you click inside the TextBox, Windows pops up the form without causing the page data to be found when the data is populated.
Page Code-behind
In the background of the page, we're going to load the data needed for the list "country" from an XML document, showing the name of the country, and here's the code for this feature:
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 step, when the page runs, you can select the country, as shown in the following figure
Now, when the user selects the country, the selection event of the listbox is triggered and the "city" data is loaded through the event, which is also loaded from the XML document
The event code is listed below
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 ();
}
Users can now choose a city that matches the country, as follows
