2011-03-07 124 views
0

我很好奇如何執行客戶端過濾,其中涉及Javascript(可能不需要寫入,但他是用戶的瀏覽器將運行)。它不應該需要Ajax(儘管阿賈克斯相關的解決方案是受歡迎的)。Asp.NET中的Dropdownlist客戶端過濾

我是全新的Asp.NET編程。這個例子涉及我在工作中遇到的一個問題。我已經做了很多年的基於應用程序的編程,甚至一些PHP。但是學習Asp.NET讓我很難(這是我沒有想到的)。

我有三個組合框。但我想根據選擇的內容和可用內容(一張額外的表格)過濾掉它們的內容。

這是示例代碼頁。現在代碼隱藏的.vb文件中只有一個空白的Page.Load()。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Sample Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:XmlDataSource ID="SqlDataSource1" runat="server"> 

<%--dropdownvaluesId categoryId value code 
1 1 AndhraPradesh AP 
2 1 Tamilnadu TN 
3 2 South Carolina SC 
4 2 Tennesse TN 
5 3 Victoria Vic 
6 3 New South Wales  NSW 
--%> 
      <Data> 
       <DropdownValues> 
        <DropdownValue dropdownvaluesId="-1" categoryId="1" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="1" categoryId="1" value="AndhraPradesh" code="AP" /> 
        <DropdownValue dropdownvaluesId="2" categoryId="1" value="Tamilnadu" code="TN" /> 
        <DropdownValue dropdownvaluesId="-1" categoryId="2" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="3" categoryId="2" value="South Carolina" code="SC" /> 
        <DropdownValue dropdownvaluesId="4" categoryId="2" value="Tennesse" code="TN" /> 
        <DropdownValue dropdownvaluesId="-1" categoryId="3" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="5" categoryId="3" value="Victoria" code="Vic" /> 
        <DropdownValue dropdownvaluesId="6" categoryId="3" value="New South Wales" code="NSW" /> 
        <DropdownValue dropdownvaluesId="7" categoryId="3" value="Queensland" code="QLD" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

     <asp:XmlDataSource ID="SqlDataSource2" runat="server"> 

<%--categoryId Name 
1 India 
2 USA 
3 Australia 
--%> 
      <Data> 
       <DropdownCategories> 
        <DropdownCatagory categoryId="1" Name="Inda" /> 
        <DropdownCatagory categoryId="2" Name="USA" /> 
        <DropdownCatagory categoryId="3" Name="Australia" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

     <asp:XmlDataSource ID="SqlDataSource3" runat="server"> 

<%---- Available Combinations -- 

india_dropdownvalueId usa_dropdownvalueId australia_dropdownvalueId 

1      3      5 
1      3      6 
1      3      5 
1      4      7 
--%> 
      <Data> 
       <AvailableCombinations> 
        <Combination india_dropdownvalueId="1" usa_dropdownvalueId="3" australia_dropdownvalueId="5" /> 
        <Combination india_dropdownvalueId="1" usa_dropdownvalueId="3" australia_dropdownvalueId="6" /> 
        <Combination india_dropdownvalueId="1" usa_dropdownvalueId="4" australia_dropdownvalueId="7" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

     <asp:XmlDataSource ID="IndiaDataSource" runat="server"> 
      <Data> 
       <DropdownValues> 
        <DropdownValue dropdownvaluesId="-1" categoryId="1" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="1" categoryId="1" value="AndhraPradesh" code="AP" /> 
        <DropdownValue dropdownvaluesId="2" categoryId="1" value="Tamilnadu" code="TN" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

     <asp:XmlDataSource ID="USADataSource" runat="server"> 
      <Data> 
       <DropdownValues> 
        <DropdownValue dropdownvaluesId="-1" categoryId="2" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="3" categoryId="2" value="South Carolina" code="SC" /> 
        <DropdownValue dropdownvaluesId="4" categoryId="2" value="Tennesse" code="TN" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

     <asp:XmlDataSource ID="AustraliaDataSource" runat="server"> 
      <Data> 
       <DropdownValues> 
        <DropdownValue dropdownvaluesId="-1" categoryId="3" value="" code="Blank" /> 
        <DropdownValue dropdownvaluesId="5" categoryId="3" value="Victoria" code="Vic" /> 
        <DropdownValue dropdownvaluesId="6" categoryId="3" value="New South Wales" code="NSW" /> 
        <DropdownValue dropdownvaluesId="7" categoryId="3" value="Queensland" code="QLD" /> 
       </DropdownValues> 
      </Data> 
     </asp:XmlDataSource> 

<%--  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
      SelectCommand="SELECT [CategoryID], [Value], [Code], [dropdownValuesID] FROM [DropdownValues]"></asp:SqlDataSource> 
--%> 
     <table cellpadding="2" cellspacing="2"> 
     <tr> 
     <td><asp:Label ID="Label1" runat="server" Text="States in India"></asp:Label></td> 
     <td><asp:DropDownList ID="ddlIndia" runat="server" DataSourceID="IndiaDataSource" DataTextField="value" DataValueField="code" ColumnName="CategoryID" EmptyDataText="No Items Found" FilterBy="1" UIFriendlyText="Select State"></asp:DropDownList></td> 
     <td width="100px">&nbsp;</td> 
     <td><asp:Label ID="Label2" runat="server" Text="States in USA"></asp:Label></td> 
     <td><asp:DropDownList ID="ddlUSA" runat="server" DataSourceID="USADataSource" DataTextField="value" DataValueField="code" ColumnName="CategoryID" EmptyDataText="No Items found" FilterBy="2" UIFriendlyText="Select State"></asp:DropDownList></td>  
     <td width="100px">&nbsp;</td> 
     <td><asp:Label ID="Label3" runat="server" Text="States in Australia"></asp:Label></td> 
     <td><asp:DropDownList ID="ddlAustralia" runat="server" DataSourceID="AustraliaDataSource" DataTextField="value" DataValueField="code" ColumnName="CategoryID" EmptyDataText="No Items found" FilterBy="2" UIFriendlyText="Select State"></asp:DropDownList></td>  
     </tr> 
     </table>   
    </div> 
    </form> 
</body> 
</html> 

所以最初,只有一個項目將在ddlIndia - 安得拉邦; ddlUSA中的兩件物品 - 南卡羅來納州和田納西州;和ddlAustralia的三件物品 - 維多利亞,新南威爾士州,昆士蘭州。空白也需要填充這些下拉列表。但我不認爲他們的項目。

如果您選擇昆士蘭州,ddlUSA需要過濾爲僅允許選擇田納西或空白,並且ddlIndia需要過濾以允許選擇(這是ddlIndia的默認值)AndhraPradesh或空白。

我喜歡任何鏈接到我可以自己學習的網站。我不是在尋找一個免費派發。這只是花了幾天的時間來尋找信息,如何做到這一點的例子正在變得毫無結果。

如果需要隱藏代碼,我不介意VB.NET或C#。我猜VB.NET如果你不能決定,這對你來說是最簡單的。

希望有幫助,

TamusJRoyce

附:我在早上工作,所以我將在大約12個小時內再次出現。在另一天沒有解決方案的情況下睡覺。 Example Project是最初代碼的來源。

+0

忘記添加asp:XmlDataSource僅用於此示例。代碼隱藏將填充我的真實應用程序中來自SQL查詢的自定義業務對象。 – TamusJRoyce 2011-03-07 05:02:04

回答

1

儘管我鄙視ASP.NET AJAX控件工具包,但它仍然比您當前擁有的所有代碼更好,包括您在頁面上內嵌的SqlDataSource控件。請參閱this sample of the AJAX CascadingDropDown control

所有你需要做的(基本上)是創建一個Web服務,爲客戶端提供它所需要的數據,配置擴展器指向Web方法並傳遞相關參數,它會做你想要的是比你擁有的更少的代碼/ HTML。

如果你不想使用服務器端的AJAX,你可以通過一些jQuery實現上述操作(並避免使用ViewState)。

+0

ajax方法正是我所需要的工作。我將搜索jQuery + asp.net,因爲我希望三個控件始終處於啓用狀態,以便可以按任意順序進行過濾。這將是很好,如果我可以在JavaScript中如何嵌入它,就像它很容易在PHP中完成。但只是設置javascript變量(每個dropdownlist持有id的一個數組,以及一個擁有允許的id組合的數組)很難。 – TamusJRoyce 2011-03-07 12:51:04

0

CascadingDropDown強制頁面上的驗證被關閉,所以我的客戶不會允許它,如果我能夠使用它(得到它的工作,但不得不刪除它)。 asp:DropDownList AutoPostBack默認爲false。將其設置爲true允許我在選擇更改時更新下拉菜單。我真的是一個菜鳥,因爲錯過了這個簡單的事情。

<asp:DropDownList ID="DropdownVersion" AutoPostBack="true" runat="server" /> 

但是,這仍然沒有得到我的方式嵌入JavaScript中的客戶端,並根據任何三個下拉列表的中所做的選擇,基於可用協會的隱藏收集過濾。所以任何信息將不勝感激。