My web development stack includes ASP.NET C# with AJAX Professional (http://www.ajaxpro.info)
1) I am working on a scenario where I have a div container that holds a Panel control which should contain a dynamically generated DropDownList done in the codebehind function:
<div id="divDDL" runat="server">
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</div>
2) There is a JavaScript function called "getDDL" that sends data to the codebehind function and then handles the response by updating the Panel with the generated DropDownList:
function getDDL(lng)
{
MyCodebahindClass.GetDDL(0, lng, callbackDDL);
//callbackDDL is a response function
}
function callbackDDL(response)
{
//response containing the generated DropDownList and Panel control is updated in the div element
document.getElementById('<%=divDDL.ClientID %>').innerHTML = response.value;
}
3) The codebehind function "GetDDL" needs to return the generated DropDownList within the Panel:
[Ajax.AjaxMethod]
public Panel GetDDL(int itemId, int lng)
{
Panel 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) However, I am facing an issue where when trying to access these controls through JS response, only "System.Web.UI.Design.Panel" or similar text is displayed. Interestingly, retrieving them directly from the codebehind works without any issues. What could be causing this discrepancy between accessing the controls via JS and codebehind? Your assistance would be greatly appreciated.