Get child controls on server control using javascript ASP.NET

Question

I've create a basic composite server control that contains a button.

<Custom:Class1 ID="testClass" ClientInstanceName="test1" runat="server"></Custom:Class1>

I would like to be able to get to the child controls using javascript for example:

var myButton = testClass.FindControl('btnTest');

Is there anyway to do this?

Answer 1

Create a client side object to represent your server side control (javascript class). Put a collection of references to the child controls on the client side object. Then on the server side OnPreRender event create or load a script to define your client side object and at the same time pass the collection of references to its constructor.

Example of how to embed a javascript file containing the clientside object definition (put this somwhere above the namespace declaration:

[assembly: WebResource("myNS.stuff.clientSideObj.js", "application/x-javascript")]
namespace myNS.stuff
{

Example of how to register the WebResouce (OnPreRender):

 ClientScriptManager cs = this.Page.ClientScript;// Get a ClientScriptManager reference from the Page class.
 Type csType = this.GetType();// Get the type from this class.

 //Register an embedded JavaScript file. The JavaScript file needs to have a build action of "Embedded Resource".
 String resourceName1 = "myNS.stuff.clientSideObj.js";
 cs.RegisterClientScriptResource(csType, resourceName1);

Example of creating a script to declare an instance of your client side object (OnPreRender):

String childControlIDsList= getChildControlList();//I am not writing this one.. just look up javascript arrays.
String uniqueScriptKey = "myKey";
StringBuilder theScript = new StringBuilder();
theScript.AppendLine("var myObj = new clientSideObj(" + childControlIDsList + ");");
theScript.AppendLine("window['myClientControl'] = myObj;") //create a client side reference to your control.
cs.RegisterStartupScript(csType, uniqueScriptKey, theScript.ToString(), true);

I will leave the client side object definition up to you... Hope that helps!

Answer 2

This is for Sharepoint visual web controls, but the same general process applies:

http://lemonharpy.wordpress.com/2011/07/20/expose-clientid-to-javascript-in-sharepoint-2010-visual-web-control/

Essentially, in the code behind on the page you get a reference to the ClientId on the page, and then expose that up as a javascript variable that you can prepend onto your jQuery selectors.

I feel this is a little hacky - but I think it gets the job done...

Answer 3

If you're using .net 4.0 you can set the the 'ClientIDMode' property on the button to Static then set the ID property to something like ID="myButton" and access it with with jquery like so

 $("#myButton")

If you dont use jquery you can use

document.getElementById("myButton")

If you are using the control multiple times in the form you could prefix the button id with your custom controls id. Remember to set your custom controls ClientIDMode property to static as well.

<asp:Button ID="<%=Me.Id%>_myButton "  ClientIDMode="Static" runat="server"/>

Not entirely sure this is even good practice or if it will work but you can try it.( remember to set your custom controls id