How to use <%=control.ClientID%> in server control with embedded JS file

Question

I am creating a server control in a library project, which has javascript code, the javascript code need to get a button's ID, so I used <%= button.ClientID %>. Then I embed the javascript code as a file in the library project and use ScriptManager to add the script in CreateChildControls().

Dim sm = ScriptManager.GetCurrent(Me.Page) 
sm.Scripts.Add(New ScriptReference("xxx.js", "LibraryProjectName"))

But when I run the page, it has a jquery parse error:invalid expression term '>'. So I am guessing the code has been generated but server doesn't convert <%= button.ClientID %> into generated ID format. So what should I do in this case?

`so I used <%= button.ClientID %>`...Can you show that code? Also, what does the source of the resulting HTML page look like? — Nope, Apr 04 '13 at 15:42
It's because the js file isn't run through the .net runtime. It is serverd as is. In an aspx page the <%=... %> stuff is replaced by the result of the ... command but in a .js file it isnt. Maybe you could give it a class to use in jQuery for finding it like — HMR, Apr 04 '13 at 15:45
Possible repeat: http://stackoverflow.com/questions/3845900/how-to-get-asp-net-client-id-at-external-javascript-file — tymeJV, Apr 04 '13 at 15:46
I think just a suggestion, use `ClientIDMode = Static`, and access control like `$('#controlId')` — Mehmet Ince, Apr 04 '13 at 15:54
@HMR it does make sense, then I guess I could only use a specific class name for it. So any embedded or external JS file should use a precise id or class name? Because it doesn't go through server side? — Princa, Apr 04 '13 at 18:08

score 2 · Answer 1 · edited Apr 04 '13 at 20:12

Instead of the buttons name set a very specific CSS class name:

<asp:Button ID="btnMyGroovy" runat="server" CssClass="VerySpecific" Text="Action" />

Then use your jQuery Selector to get $('.VerySpecific') rather than the control name. Remember that items can have more than one class association. :)

You could make the selection more precise by selecting your server control CSS class eg..VerySpecificContainer then selecting the instance of .VerySpecific contained by the control.

score 0 · Answer 2 · answered Apr 04 '13 at 18:33

It's usally a good approach to parameterize your external javascript file functions in such a way that they don't have to be on the page when using asp.net .

So you would have :

function foo (sender)
{
   return $(sender).val();
}

instead of

function foo ()
{
   return $("<%= sender.ClientID %>").val();
}

On a side note:

Did you know that you can set the id to be static if you are using Asp.Net 4 or above, that means the Id will match the name on server side and client side , then you don't need the <% %> tags to determine the id. This can be set in your web.config or in the page directive at the top of your apge.

ok, that would be great the server won't change the ID automatically, but you just have to be careful with the duplicated ID. — Princa, Apr 05 '13 at 03:18

score 0 · Answer 3 · answered Apr 05 '13 at 09:15

in aspx file:

var serverPrefix ='<%= ClientID %>';

in js file:

function getServerId(id){
  if (typeof(serverPrefix ) != 'undefined')
  {
   return document.getElementById(prefix + '_' + id);
  }
  else
  {
   id;
  }
}

When you want to call some element, use like this:

$(getServerId('myTitleTxt')).text('hello!');

hope this help!

How to use <%=control.ClientID%> in server control with embedded JS file

3 Answers3