Ajax.Net Multiple Cascade Drop Down List, Pre Load Values from DB ...

I had two issues with the cascade drop down list, 1. I got a server 500 error and 2 I couldn’t figure out how to pre-load the selected value based on the value retrieved from the database for all three cascade drop down list I had on the page.

To use the cascade drop down list, here are the steps that you need to follow.This is on the assumption that you have Ajax Toolkit installed offcourse.

1. Register the Ajax Toolkit tag on the page it self

    <%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
    <asp:ScriptManager ID=”ScriptManager” runat=”server” />

2. Add the cascade drop down list control to the page, this control is purely an wrapper on top of your existing drop down list, so it will not replace the exiting drop down lists.

    <cc1:CascadingDropDown ID=”ccdAlternativeSectionID” runat=”server” TargetControlID=”AltSectionID”
    Category=”Section” PromptText=”Select Section” ServicePath=”../webservice/AjaxFunctions.asmx” ServiceMethod=”GetSections” LoadingText=”[Loading sections…]”/>

    <cc1:CascadingDropDown ID=”ccdAlternativePageID” runat=”server” TargetControlID=”AltCMEPageID” ParentControlID=”AltSectionID”
    Category=”Page” PromptText=”Select Page” ServicePath=”../webservice/AjaxFunctions.asmx” ServiceMethod=”GetPageOnSection” LoadingText=”[Loading pages…]”/>

    <cc1:CascadingDropDown ID=”ccdAlternativeHTMLID” runat=”server” TargetControlID=”AltHtmlTitle” ParentControlID=”AltCMEPageID”
    Category=”HTML” PromptText=”Select HTML Region” ServicePath=”../webservice/AjaxFunctions.asmx” ServiceMethod=”GetHTMLOnPage” LoadingText=”[Loading html…]”/>

    <asp:DropDownList ID=”AltSectionID” CssClass=”sectionDropDownList” DataValueField=”nCMESectionID”
    DataTextField=”vcCMESectionName” runat=”server” >
    </asp:DropDownList>

    <asp:DropDownList ID=”AltCMEPageID” CssClass=”sectionDropDownList” DataValueField=”nCMEPageID”
    DataTextField=”vcCMEPageTitle” runat=”server” >
    </asp:DropDownList>

    <asp:DropDownList ID=”AltHtmlTitle” CssClass=”sectionDropDownList” DataValueField=”nCMEHtmlID”
    DataTextField=”vcCMEHtmlTitle” runat=”server”>
    </asp:DropDownList>

3. In the cascade drop down list, there is a reference to a webservice file and function name, this is the function to call in the web service to retrieve the data for the current drop down list. So a webservice file need to be created. The webservice file can be created as per normal, the following libraries need to be imported for the page

    Imports System.Web
    Imports System.Web.Services
    Imports System.Web.Services.Protocols
    Imports System.Web.Script.Services
    Imports System.data
    Imports System.Collections
    Imports System.Collections.Generic

4. The function need to be cleared with the name specified in the cascade drop down list controls, with the parameters

exactly as it is, this means the name of the parameter as well. Once these are setup the cascade drop down list should be working.

    <WebMethod(EnableSession:=True)> _
    Public Function GetHTMLOnPage(ByVal knownCategoryValues As String, ByVal category As String, ByVal contextKey As String) As CascadingDropDownNameValue()
    Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
    Dim nCurrentPageID As Integer
    If Not kv.ContainsKey(”Page”) Then
    Return Nothing
    Else
    nCurrentPageID = kv(”Page”)
    End If

    Dim html As New CMENGINEClassLibrary.CME_Html ‘HTML.CME_Html
    Dim dsHTMl As DataSet
    html.PageId = nCurrentPageID
    dsHTMl = html.getAllHTMLDS

    Dim values As New List(Of CascadingDropDownNameValue)
    For Each drrow As DataRow In dsHTMl.Tables(0).Rows
    If drrow(”nCMEHtmlID”) = contextKey Then
    values.Add(New CascadingDropDownNameValue(drrow(”vcCMEHtmlTitle”), drrow(”nCMEHtmlID”), True))
    Else
    values.Add(New CascadingDropDownNameValue(drrow(”vcCMEHtmlTitle”), drrow(”nCMEHtmlID”)))
    End If

    Next
    Return values.ToArray
    End Function

Now for the 2 issues I had, one the method 500 error, that is actually related to this line here

Dim values As New List(Of CascadingDropDownNameValue), I declared an Array List before and not a list of object type, this caused the 500 error.

For pre-loading the values for the drop down list.Once the page is accessed to edit the existing details, the 3 drop downlist need to be pre selected with the values in the database. For just selecting one value, the .selectedvalue field seem to worked fine, but for 3 drop down list this would not work.

So this is what I have done, on the cascade drop down list objects, for the first one, set the selected value, on the second and third, set the contextkey to be the value that it needs to pre-select from. The reason that they are done on the cascade drop down list is because once you add it, it doesn’t work if you use dropdownlist.selectedvalue anymore.

    ccdAlternativeSectionID.SelectedValue = nAltHTMLSectionId
    ccdAlternativePageID.ContextKey = nAltHTMLPageId
    ccdAlternativeHTMLID.ContextKey = DAL_Html.AlternateHTMLID

In the webservice function declared previously, you will notice the contextkey parameter, this is used to pass variables to the webservice. In the function that generates the drop down list items, pass the pre selected value it needs to select and then do the following

    For Each drrow As DataRow In dsHTMl.Tables(0).Rows
    If drrow(”nCMEHtmlID”) = contextKey Then
    values.Add(New CascadingDropDownNameValue(drrow(”vcCMEHtmlTitle”), drrow(”nCMEHtmlID”), True))
    Else
    values.Add(New CascadingDropDownNameValue(drrow(”vcCMEHtmlTitle”), drrow(”nCMEHtmlID”)))
    End If
    Next

This will generate the drop down list with the value selected

 Original Source: