can't get generated controls through AJAX response

Question

I use ASP.NET C# with AJAX Professional (http://www.ajaxpro.info)

1) I have a div container with Panel control, Panel control should hold DropDownList that will be generated in codebehind function:

<div id="divDDL" runat="server">
    <asp:Panel ID="Panel1" runat="server">
    </asp:Panel>
</div>

2) I have a JS script function "getDDL" that sends data to codebehind function and then it receives response with generated Panel and DropDownList controls:

function getDDL(lng)
{
    MyCodebahindClass.GetDDL(0, lng, callbackDDL);
    //callbackDDL is a response function
}

function callbackDDL(response)
{
    //here the response with the generated DropDownList and Panel control comes to the div element
    document.getElementById('<%=divDDL.ClientID %>').innerHTML = response.value;
}

3) Codebehind function "GetDDL" must return generated DropDownList inside the Panel control:

[Ajax.AjaxMethod]
public Panel GetDDL(int itemId, int lng)
{
     PanelID = Panel1.ID;
     DropDownList rubricDDL = new DropDownList();
     rubricDDL.ID = "Fashionable_Catheter";
     rubricDDL.DataTextField = "title";
     rubricDDL.DataValueField = "id";
     rubricDDL.DataSource = %LINQ STUFF%;
     rubricDDL.DataBind();

     panelID.Controls.Add(rubricDDL);
     return panelID;
}

4) When I try to get the generated Panel and DropDownList through the JS response I receive only the text "System.Web.UI.Design.Panel" or something like that, tried to generate only DropDownList - similar text shows up "System.Web.UI.Design.DropDownList".

But when I call a codebehind function to get these two controls I see them without any problems. Why I can't get them through JS? I do everything fine, debugged million times and didn't see any problems, I can't figure out what's wrong with JavaScript? Any help much appreciated.

Answer 1

Hmm, I think you need to return rendered html of the panel. So your method should return string and you need to render Panel Control in your method and return rendered html.

Answer 2

[Ajax.AjaxMethod]
public string GetDDL(int itemId, int lng)
{
    PanelID = Panel1.ID;
    DropDownList rubricDDL = new DropDownList();
    rubricDDL.ID = "Fashionable_Catheter";
    rubricDDL.DataTextField = "title";
    rubricDDL.DataValueField = "id";
    rubricDDL.DataSource = %LINQ STUFF%;
    rubricDDL.DataBind();
    panelID.Controls.Add(rubricDDL);
    StringBuilder sb = new StringBuilder();
    HtmlTextWriter htw = new HtmlTextWriter(new StringWriter(sb));
    panelID.RenderControl(htw);
    return sb.ToString(); 
}

in ajax Response display output as such that any of the control.html

(i.e) div1.html(ajaxresposeoutput)