ASP.NET link using ID in JavaScript?

Question

When ASP.NET controls are displayed, their identifiers sometimes change, for example, if they are in the name container. Button1 may actually have the identifier ctl00_ContentMain_Button1 when it is displayed, for example.

I know that you can write your JavaScript as lines in your .cs file, get the client control identifier and enter the script on your page using clientcript, but is there a way by which you can reference the control directly from JavaScript using ASP.NET Ajax?

I found that writing a function to recursively analyze dom and looking for a control that contains the identifier I want is unreliable, so I was looking for best practice, not work.

Answer 1

Oh, and I also found this if someone else has a problem.

Use the jQuery custom selector for asp.net controls: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Answer 2

This post from Dave Ward may have what you are looking for:

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

Excerpt from the article:

Indeed there is. The best solution is to use ASP.NET inline code to insert ClientID controls. Property:

 $get('<%= TextBox1.ClientID %>') 

Now the correct identifier of the client element is links, regardless of page structure and nesting level of control. In my opinion, the very insignificant operational overhead of this method is to make your client script more resilient to change.

And some sample Dave code from the comment stream of this post:

 <script> alert('TextBox1 has a value of: ' + $get('<%= TextBox1.ClientID %>').value); </script> 

There is a good discussion in the comments to the article related above.

Answer 3

You can change the ClienIDMode property of the control to 'Static' , which will result in the same identifier that you give the control in .NET code.

 <asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox> 

will result in:

 <input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

so that you have the same identifier.

Answer 4

A few thoughts about this:

1) I was very lucky to get the elements of the css class instead of id, because asp.net identifiers are not reliable, as you stated. I use this function and it works quite well:

 function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) { node = document; } if ( tag == null ) { tag = '*'; } var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } 

2) jQuery helps a lot here. Using jQuery, you can reliably get elements where the id ends with a specific string. While this is not a "reason to use jQuery, it is definitely a plus."

3) This will be fixed in asp.net 4.0, so hold on there :-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview. aspx

Answer 5

I do not think there is one “best practice” for this. There are many different good practices. Here is ours:

Each control that has client functionality makes the script block inline, directly below the markup for the control:

 <span id="something_crazy_long"> control markup </span> <script type="text/javascript">new CustomControl('something_crazy_long');</script> 

Each control has an accompanying JS, for example:

 var CustomControl = function(id) { this.control = document.getElementByID(id); this.init(); }; CustomControl.prototype.init = function() { //do stuff to wire up relevant events }; 

In the code of the code, we do something like:

 class CustomControl : Control override void Render(HtmlTextWriter writer) { writer.WriteBeginTag("span"); writer.WriteAttribute("id", this.ClientID); writer.Write(HtmlTextWriter.TagRightChar); //write control markup writer.WriteEndTag("span"); writer.WriteBeginTag("script"); writer.WriteAttribute("type", "text/javascript"); writer.Write(HtmlTextWriter.TagRightChar); writer.Write( string.Format("new CustomControl('{0}');", this.ClientID) ); writer.WriteEndTag("script"); } 

Answer 6

I am doing something similar to Rex M, except to avoid a few script tags I use a function in my base class to register the controls that I am going to use clientide and then spit them out in html inside the script tag,

You can even subclass your controls to automatically register with a function or use the boolean property to indicate whether you will use their clientide.

Answer 7

You can get the identifier using the document.getElementById method.

Answer 8

For 'ctl00_ContentMain_Button1' - In asp.net, when the page is displayed in the browser, the first part remains the same 'ctl00'. The second part is the ContentPlaceHolder identifier used by 'ContentMain'. The third is the control ID 'Button1'

I liked this http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html

Answer 9

I prefer data-bound tags in the markup file document.getElementById ('<% # TextBox1.ClientID%>'). when using the server-side tag implementation <% = TextBox1.ClientID%>.

Server-side tags prevent you from adding controls to the dom in the code behind. This need usually arises when you create an application, and a database-bound approach can save you from basic overwrites.

When using tags on the server side are also known as “code blocks” performing this general operation

this.Form.Controls.Add (myContorl);

generates this error at runtime:

The collection of controls cannot be modified because the control contains blocks of code (i.e. <% ...%>).

Unfortunately, this often becomes apparent only after you have created your website.

When using data binding control, '<% # TextBox1.ClientID%>' resolves the value of the control properties specified in the markup to an appropriate place, such as the end of the Page_Load data, as follows:

Page.DataBind ()

Remember that Page.DataBind () calls the child controls on the page as well as a DataBind, which can be an undesirable side effect if the page handles the data binding of certain child controls separately. If so, data binding can be performed on a separate control as follows:

TextBox1.DataBind ()

As a result, the evolution of applications ultimately leads to some functionality based on the base site, where you may want to add basic controls as soon as you put the application with tags on the server side onto the site, replacing them with data links, it becomes problematic, especially when pages were encoded to handle data binding on their own.