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" onkeydown= "return"
Protectbox (event); " onclick= "Popuparea (event, ' Divcountry ')" ></asp:TextBox></td>
<TD width= "></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 ')" >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"
onclick= "Jsareaclose (' divcity ')" >Border= "0" ></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 marked with bold is the main property of the popup form, and one end of JavaScript is invoked when the mouse clicks:Popuparea
as you can see, we added two div elements to the bottom of the page, one for the country, one for the city, and one for the ListBox control, where the user could use the listbox to select the content
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 sent back
Now it's time to fill in the data.
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 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 following is a list of event codes
Listing 3 private void Lstcountry_selectedindexchanged (object sender, EventArgs e)
{
//Set The value in the textbox
this.txtCountry.Text = this.lstCountry.SelectedValue;
&NBSP
//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 &NBSP;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
