ASP.NET1.0/2.0裡用DIV層元素彈出表單

來源:互聯網
上載者:User
asp.net   本文 Bilal Haidar 將帶領您如何使用DIV元素來建立彈出的表單,這種彈出即可以包含簡單的HTML元素也可以包含ASP.NET伺服器控制項,而且在實現過程中沒有使用傳統的window函數和showModalDialog / showModelessDialog函數(傳統的我們使用 window.open,或者showModalDialog 這樣的函數來製作快顯視窗--天天注釋)

  最近我在用ASP.NET1.1技術來開發一個表單,該表單包含由三個控制群組成的一個面板集合,這個面板用來顯示系統資訊.可以假想這些控制項是一些簡單的下拉框,當第一個下拉框選取後,第二個下拉框的值將顯示被第一個過濾的結果,同樣第三個下拉框將根據第二個下拉框的選擇而進行改變顯示。

  表單的這個技術通常被用來讓終端客戶那些不知道ASP.NET技術的人員擷取更好的使用者體驗。

  當決定使用這些控制項的替代品使用時,您是否用過dropdownlist或者是具有彈出表單功能的Textbox控制項?

  好了,我們已經有了一個很好的解決方案:使用TextBox控制項並掛鈎OnClick事件來觸發DIV彈出表單,包括使用Listbox控制項來選擇資料的值
一個不使用任何常規popup表單或者過時的Dropdownlist來完成這個功能

   THE HTML WebForm

  我們已經建立了一個簡單的WebForm,他包含了一些TextBox,每一個TextBox已經附加了OnClick事件,用一段javascript代碼來彈出表單,代碼如下:

<%@ 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="50"></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"
    ><img alt="Hide Popup" src="http://www.webjx.com/htmldata/2006-12-05/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" ><img alt="Hide Popup" src="http://www.webjx.com/htmldata/2006-12-05/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>
  代碼中,用粗體標出的部分是Popup表單的主要屬性,在按一下滑鼠時,將調用一端JavaScript:PopupArea。

  正如您所看到的,我們在頁面底部添加了兩個DIV元素,一個用於國家,一個用於城市,每一個都包含ListBox控制項,使用者可以使用Listbox選擇上面的內容。

  下圖1現實了頁面瀏覽的效果,他還示範了如何彈出DIV表單

  當單擊Textbox內部,windows將彈出表單而不會引起頁面資料回傳現在該到填充其中資料的時候了

  Page COde-behind

  在頁面後台,我們準備從一個XML文檔載入list“國家”所需要的資料,同時顯示國家的名稱,下面列出了這個功能的代碼:

  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();
}


  在這一步驟中,當頁面運行時,您可以選擇國家,如下圖


  現在,當使用者選擇國家時,將觸發listbox的選擇事件,並通過該事件載入“城市”資料,該資料同樣從XML文檔載入

  下面列出了事件代碼

  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();
}
  使用者現在可以選擇與國家相匹配的城市,如下



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。