ASP.NET Label doesn't update when CascadingDropDown selectedindex is changed

Question

I am not able to update a asp.net Label when CascadingDropDown index is changed. Please see the below code.

aspx code:

<asp:DropDownList ID="ddl1" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddl2" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddl2IndexChanged"></asp:DropDownList>

<asp:UpdatePanel>
    <ContentTemplate>
        <asp:Label ID="lbl1" Text="HelloWorld" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddl2" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>    

<asp:DropDownList ID="ddl3" runat="server"></asp:DropDownList>

<ajaxToolKit:CascadingDropDown ID="cdd1" runat="server" Category="MachineType"
TargetControlID="ddl2" ParentControlID="ddl1" PromptText="Select Machine Type"
LoadingText="Loading Machine Types" ServicePath="CascadingDropDown.asmx"
ServiceMethod="getMachineTypes"></ajaxToolKit:CascadingDropDown>

<ajaxToolKit:CascadingDropDown ID="cdd2" runat="server" Category="Machine"
TargetControlID="ddl3" ParentControlID="ddl2" PromptText="Select Machine"
LoadingText="Loading Machines" ServicePath="CascadingDropDown.asmx"
ServiceMethod="getMachines"></ajaxToolKit:CascadingDropDown>

Code behind:

protected void ddl2_SelectedIndexChanged(object sender, EventArgs e)
{
    lbl1.Text = DateTime.Now.ToString();
}

AutoEventWireup is true. EnableEventValidation is true. ValidateRequest is true. EnablePageMethods is true. EnablePartialRendering is true. AutoPostBack of ddl2 is true. The DropDowns get updated perfectly. But the label doesn't. SelectedIndexChanged of ddl2 doesn't fire. I guess its because of the CascadingDropDown.

I also tried writing a static WebMethod and calling it from JavaScript.

In Code behind:

[WebMethod]
public static void UpdateLabel()
{
    Page page = (Page) HttpContext.Current.Handler;
    Label lbl = (Label) page.FindControl("lbl1"); // lbl is always null.
    lbl.Text = DateTime.Now.ToString();
}

In JavaScript:

function updateLabel() {
    PageMethods.UpdateLabel();
}

In aspx:

<asp:DropDownList ID="ddl2" runat="server" onchange="javascript:updateLabel()">
</asp:DropDownList>

By doing the above, I am able to call the static WebMethod. However, I cannot find the Label. It always returns null. :(

How can I make this work? Am I missing something?

Thanks!

Answer 1

Got it to work like this.

In JavaScript:

function updateLabel() {
    PageMethods.UpdateLabel(updateLabelName);
}

function updateLabelName(response) {
    var lbl = document.getElementById('<%=lbl1.ClientID%>');
    lbl.innerHTML = response;
}

In Code behind:

[WebMethod]
public static string UpdateLabel()
{
    return DateTime.Now.ToString();
}