Dropdownlist Client-Side Filtering in Asp.NET
I'm curious about how to perform client-side filtering, where Javascript is involved (it may not need to be written, but his is what the user's browser will run). It shouldn't need ajax (though ajax related solutions are welcome).
I'm brand-new to Asp.NET programming. This example pertains to a problem I am having at work. I've done many years of application based programming, and even some php. But learning Asp.NET is giving me a hard time (something I wasn't expecting).
I have three combo boxes. But I want to filter out what gets put into them based on what is selected and what is available (an extra table).
Here is the example code page. Right now there is only a blank Page.Load() in the code-behind .vb file.
<%@ 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"> </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"> </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>
So initially, only one item will be in ddlIndia--AndhraPradesh; two items in ddlUSA--South Carolina and Tennesse; and three items in ddlAustralia--Victoria, New South Wales, Queensland. Blank also needs to populate these dropdownlists. But I don't consider them items.
If you pick Queensland, ddlUSA needs to filter to only allow Tennesse or blank to be selected, and ddlIndia needs to filter to allow AndhraPradesh or blank to be selected (which is the default for ddlIndia).
I appriciate any links to sites where I can learn this myself. I'm not looking for a free hand-out. It's just spending a couple of days trying to find the information and examples on how to do this is becoming fruitless.
I don't mind VB.NET or C# if code-behind is required. I guess VB.NET if you can't decide and that is easiest for you.
Hopefully helpful,
TamusJRoyce
p.s. I work in the morning, so I will be around again in about 12 hours. Off 开发者_StackOverflowto sleep with another day of no solution. Example Project is where the initial code is from.
As much as i despise the ASP.NET AJAX Control Toolkit, it would still be nicer than all that code you currently have, including the SqlDataSource control(s) that you have inline on your page.
Take a look at this sample of the AJAX CascadingDropDown control.
All you need to do (basically) is create a web service to supply the client-side with the data it needs, configure the extenders to point to the web method and pass on relevant parameters, and it will do what you want with a LOT less code/HTML than what you have.
If you don't want to use server-side AJAX, you can achieve the above with a bit of jQuery (and avoid ViewState too).
The CascadingDropDown forces validation on the page to be turned off, so my customer wouldn't allow it if I was able to use it (got it working, but had to remove it). asp:DropDownList AutoPostBack is defaultly false. Setting this to true allowed me to update the dropdowns when the selection changed. I am truely a noob for missing this simple thing.
<asp:DropDownList ID="DropdownVersion" AutoPostBack="true" runat="server" />
But this still doesn't get me a way to embed Javascript in the client, and based on the selections made to any of the three dropdownlist's, filter them based on a hidden collection of available associations. So any information on that will be greatly appreciated.
加载中,请稍侯......
精彩评论