Hi,
Form your words, I understand that your situation is using the CascadingDropDown Control to make some DropDownLists with parent-child relation. Your request is the ‘Child’ can also control the ‘Parent’ when the ‘Child’ items is changed.
This is feasible. Please follow these steps:
1. Build the DataBase based on your description, the table is like this:
|
Make |
Model |
Color |
| lexus |
es350 |
red |
| lexus |
es350 |
blue |
| lexus |
is250 |
black |
| lexus |
is250 |
white |
| bmw |
325i |
red |
| bmw |
325i |
black |
| bmw |
525 |
blue |
| bmw |
525 |
white |
|
|
|
2. Declare some functions about searching data from DataBase to build the relation of each category: GetAllMake(), GetMakeByModel(MODEL As String), GetModelByMake(Make As String), GetModelByColor(Color As String), GetColorByModel(Model As String).
For example:
GetModelByMake(Make As String)
SELECT DISTINCT Model
FROM Car
WHERE (Make = @MAKE)
3. Populate each DropDownList with CascadingDropDown which ParentControlID is ''. It’s important that keep each DropDownList's AutoPostBack propery value with ‘false’.
4. Add three page side functions to handle the DropDownLists’ ‘onchange’ event. In these functions, set each CascadingDropDown’s parentControlID with the changed control’s ID (When the Model is changed, both the Make and the Color should be changed. ), then fire the _onParentChange function to update the need changing DropDownList’s item by accessing its CascadingDropDown’s ServiceMethod’s value.
5. In the other UpdatePanel add two button to reset all the selection or save the selected value.
Here is my entire sample code:
.aspx file
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestChildControlParent.aspx.vb"
Inherits="TestChildControlParent" EnableEventValidation="false" %>
<!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></title>
<script type="text/javascript">
function pageLoad() {
}
function makeChanged() {
$find('cddModels').set_ParentControlID('ddlMakes');
$find('cddModels')._onParentChange(null, true);
}
function modelChanged() {
$find('cddColors').set_ParentControlID('ddlModels');
$find('cddColors')._onParentChange(null, true);
$find('cddMakes').set_ParentControlID('ddlModels');
$find('cddMakes')._onParentChange(null, true);
}
function colorChanged() {
$find('cddModels').set_ParentControlID('ddlColors');
$find('cddModels')._onParentChange(null, true);
}
function resetClicked() {
$find('cddMakes').set_SelectedValue($find('cddMakes')._promptText);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<table border="0">
<tr>
<td align="right" style="width: 122px; height: 24px;">
Make:
</td>
<td style="width: 10px; height: 24px;">
</td>
<td align="left" style="width: 150px; height: 24px;">
<asp:DropDownList ID="ddlMakes" runat="server" Width="240px" onchange="makeChanged()"
AutoPostBack="false" />
</td>
</tr>
<tr>
<td align="right" style="width: 122px">
Model:
</td>
<td style="width: 10px">
</td>
<td align="left" style="width: 150px">
<asp:DropDownList ID="ddlModels" runat="server" Width="240px" onchange="modelChanged()"
AutoPostBack="false" />
</td>
</tr>
<tr>
<td align="right" style="width: 122px">
Color:
</td>
<td style="width: 10px">
</td>
<td align="left" style="width: 150px">
<asp:DropDownList ID="ddlColors" runat="server" Width="240px" onchange="colorChanged()"
AutoPostBack="false" />
</td>
</tr>
</table>
<ajaxToolkit:CascadingDropDown ID="cddMakes" runat="server" TargetControlID="ddlMakes"
Category="Make" PromptText="Choose a Car Make...." LoadingText="Please wait ..."
ServicePath="CarServiceChildControlParent.asmx" ServiceMethod="GetMakes">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDown ID="cddModels" runat="server" TargetControlID="ddlModels"
Category="Model" PromptText="Choose a Car Model...." LoadingText="Please wait ..."
ServicePath="CarServiceChildControlParent.asmx" ServiceMethod="GetModels">
<%--ParentControlID="ddlMakes"--%>
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDown ID="cddColors" runat="server" TargetControlID="ddlColors"
Category="Color" PromptText="Choose a Color...." LoadingText="Please wait ..."
ServicePath="CarServiceChildControlParent.asmx" ServiceMethod="GetColors">
<%--ParentControlID="ddlModels"--%>
</ajaxToolkit:CascadingDropDown>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReset" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="btnReset" Text="Reset" runat="server" OnClientClick="resetClicked()" />
<asp:Button ID="btnSave" Text="Save" runat="server" />
<br />
<asp:Label ID="lblResult" Text="Result" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
.aspx.vb file
Partial Class TestChildControlParent
Inherits System.Web.UI.Page
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
'Get selected values
Dim make As String = ddlMakes.SelectedItem.Text
Dim model As String = ddlModels.SelectedItem.Text
Dim color As String = ddlColors.SelectedItem.Text
' Output result string based on which values are specified
lblResult.Text = String.Format("You have chosen a {0} {1} {2}. Nice car!", color, make, model)
End Sub
End Class
.asmx file
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports AjaxControlToolkit
Imports System.Data
Imports System.Data.SqlClient
Imports System.Collections.Generic
'To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class CarServiceChildControlParent
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetMakes(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
Dim carMakeAdapter As New DataSetChildControlParentTableAdapters.MakeTableAdapter()
Dim makeValues As New List(Of CascadingDropDownNameValue)()
Dim makeTable As New DataSetChildControlParent.MakeDataTable
If Not kv.ContainsKey("Model") Then
'Get All the Makes
makeTable = carMakeAdapter.GetAllMake()
ElseIf kv.ContainsKey("Model") Then
'Get Makes by Model
makeTable = carMakeAdapter.GetMakeByModel(kv("Model"))
End If
For Each row As DataRow In makeTable
makeValues.Add(New CascadingDropDownNameValue(row("Make").ToString(), row("Make").ToString()))
Next
Return makeValues.ToArray()
End Function
<WebMethod()> _
Public Function GetModels(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
Dim carModelAdapter As New DataSetChildControlParentTableAdapters.ModelTableAdapter()
Dim modelValues As New List(Of CascadingDropDownNameValue)()
Dim modelTable As New DataSetChildControlParent.ModelDataTable
If kv.ContainsKey("Make") And Not kv.ContainsKey("Color") Then
'Get Models by Makes.
modelTable = carModelAdapter.GetModelByMake(kv("Make"))
ElseIf kv.ContainsKey("Color") And Not kv.ContainsKey("Make") Then
'Get Models by Colors.
modelTable = carModelAdapter.GetModelByColor(kv("Color"))
End If
For Each row As DataRow In modelTable
modelValues.Add(New CascadingDropDownNameValue(row("Model").ToString(), row("Model").ToString()))
Next
Return modelValues.ToArray()
End Function
<WebMethod()> _
Public Function GetColors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
Dim carColorAdapter As New DataSetChildControlParentTableAdapters.ColorTableAdapter()
Dim colorValues As New List(Of CascadingDropDownNameValue)()
Dim colorTable As New DataSetChildControlParent.ColorDataTable
If kv.ContainsKey("Model") Then
'Get Colors by Models.
colorTable = carColorAdapter.GetColorByModel(kv("Model"))
End If
For Each row As DataRow In colorTable
colorValues.Add(New CascadingDropDownNameValue(row("Color").ToString(), row("Color").ToString()))
Next
Return colorValues.ToArray()
End Function
End Class
Have my suggestions helped?
Best regards,
Zhi-Qiang Ni