Can I stop .NET eating IDs?

Question

I\'m an Information Architect and JavaScript developer by trade nowadays, but recently I\'ve been getting back into back-end coding again. And, whilst trying to get an HTML

Answer 1

I can see how the .NET system feels less intuitive, but give it a chance. In my experience it actually ends up creating cleaner code. Sure

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = <%=ImAButton.ClientId%>
$(buttonId).bind('click', function() { alert('hi); });
</script>

works fine. But this is suffers from not being modular. What you really want is something like this:

<script type="text/javascript">
function MakeAClick(inid)
{
  $(inid).bind('click', function() { alert('hi); });
}
</script>

and then later with your code on the java side or the C# side you call MakeAClick. Of course on the C# side it makes more sense, you just ClientID in there.

Maybe this is the real problem with the code you are reviewing.

Answer 2

What I usually do is create a general function that receives the name of the field. It adds the usual "asp.net" prefix and returns the object.

var elemPrefix = 'ctl00-ContentPlaceHolder-'; //replace the dashes for underscores

var o = function(name)
{    
    return document.getElementById(elemPrefix + name)
}

With that you can use this kind of calls in jQuery

$(o('buttonId')).bind('click', function() { alert('hi); });

Answer 3

If you're using jQuery then you have loads of CSS selectors and jQuery custome selectors at your disposal to target elements on your page. So rather than picking out a submit button by it's id, you could do something like:

$('fieldset > input[type="submit"]').click(function() {...});

Answer 4

The short answer is no, with webforms the id can always be rewritten depending on the nesting of the element. You can get access to the id through the ClientID property, so you could set the ids into variables in a script at the end of the page/control then put them into jQuery.

something like this:

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = "<%=ImAButton.ClientId%>";
$("#"+buttonId).bind('click', function() { alert('hi); });
</script>

It's a hack I know, but it will work. (I should note for the un-initiated, I'm using the Prototype $ get by id method there)

Answer 5

Look at ASP.Net MVC - it addresses the over-kill object hierarchies that ASP.Net generates by default.

This site is written in MVC (I think) - look at it's structure. Were I working on a new project right now I would consider it first

If you're stuck with basic ASP.Net then be careful overriding the ClientID and UniqueID - it tends to break many web controls.

The best way I've found is to pass the unreadable ClientID out to the Javascript.

Answer 6

Personally, I use a set of methods I have developed for bridging the server-side ASP.NET "magic" (I have yet to use the MS MVC stuff yet) and my client-side code because of the munging of the IDs that happens. Here is just one that may or may not prove useful:

public void RegisterControlClientID(Control control)
{
   string variableDeclaration = string.Format("var {0} = \"{1}\";", control.ID, control.ClientID);
   ClientScript.RegisterClientScriptBlock(GetType(), control.ID, variableDeclaration, true);
}

So, in your server-side code you simply call this and pass in the instance of a control for which you want to use a friendlier name for. In other words, during design time, you may have a textbox with the ID of "m_SomeTextBox" and you want to be able to write your JavaScript using that same name - you would simply call this method in your server-side code:

RegisterControlClientID(m_SomeTextBox);

And then on the client the following is rendered:

var m_SomeTextBox = "ctl00_m_ContentPlaceHolder_m_SomeTextBox";

That way all of your JavaScript code can be fairly ignorant of what ASP.NET decides to name the variable. Granted, there are some caveats to this, such as when you have multiple instances of a control on a page (because of using multiple instances of user controls that all have an instance of m_SomeTextBox within them, for example), but generally this method may be useful for your most basic needs.