Client side devevelopment in ASP.NET

We ASP.NET developers know how much of a pain it is writing javascript in any app we have today because of naming container madness! You've probably done something like this:

function DoSomeThingCool() {
    var textBox = document.getElementById('ct100_contentplaceholder1_TextBox1');
}

or something not so hardcoded

function DoSomeThingCool() {
    var textBox = document.getElementById('<%= TextBox1.ClientID %>');
}

Matthew Osborn, QA on the ASP.NET team has a great post on a new ASP.NET 4.0 feature that gives developers more control over how ClientIDs are generated.

Published Thursday, January 29, 2009 2:09 AM by davidfowl
Filed under: , ,

Comments

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 6:32 AM by Herman

Doesn't the ScriptManager help with this?

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 7:16 AM by REA_ANDREW

That is a good idea.  Before ASP.NET 4.0 though I like the way some of the AJAX Control Toolkit Extenders used a BehaviourID, which was an attribute that did not change dependant on the container, and target for client code.

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 8:37 AM by Elijah Manor

The new version of ASP.NET MVC RC has also added some nice improvements to help with jQuery client-side work...

"Form Helpers Changed to Replace Dots with Underscores When Rendering the ID Attribute

The TextBox helper method can accept an ID that contains a dot, as in the following example:

<%= Html.TextBox("Person.FirstName") %>

In previous versions of ASP.NET MVC, the rendered HTML output for this syntax was as follows:

<input type="text" name="Person.FirstName" id="Person.FirstName" />

However, having a dot in the ID attribute makes it more cumbersome to use selectors in jQuery. To select the example input element requires the following jQuery code:

$("#Person\\.FirstName")

In this release, by default the dot character is automatically replaced with an underscore in the value of the ID attribute. Thus the example TextBox renders the following markup:

<input type="text" name="Person.FirstName" id="Person_FirstName" />

To change the default replacement character, you can set the HtmlHelper.IDDotReplacementChar property to the character that you want to use instead.

Note that you always have full control over the rendered ID attribute value. If you want the ID value to be something other than the field name value that you pass to the helper method, you can use syntax such as the following:

<%= Html.TextBox("Person.FirstName", null, new {id="pfirst"}) %>" --Quote from Release Notes

http://twitter.com/elijahmanor

http://zi.ma/webdev

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 10:22 AM by Troy Forster

I gave up on asp controls for client side ages ago.  The only control I use is the script manager to easily obtain my .asmx proxy stubs, and asp content placeholders if I'm using master pages.

The remainder of my client markup is pure xhtml.  If I need to reference a client control from my serverside code, which is rare then I just set runat="server". E.g. <div id="exampleId" runat="server/>

The ASP.NET 4 ClientIDMode looks like a great improvement but I still haven't found any compelling reason to use the <asp:> tags instead of standard xhtml tags.

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 10:52 AM by ass net guru

Yeah I feel also somewhat biased against asp.net controls, sometimes easy and quite good, and OFTEN a pain in the ass!!!

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 11:28 AM by Dave

ASP.Net MVC still seems like a pretty lackluster effort on the part of Microsoft. In this example  <%= Html.TextBox("Person.FirstName") %>

Lets say you want to refactor Person. No Refactoring tool will pick the changes up because its defined in a string and your code will still continue to complile. Only at runtime will you find your error.

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 11:44 AM by davidfowl

Well thats true for asp.net in general not just mvc. The markup and code behind are 2 different worlds. You can use an ms build task to help rectify this. Check out scott gu's post on the MVC RC weblogs.asp.net/.../asp-net-mvc-1-0-release-candidate-now-available.aspx and look for the section titled:

MSBuild Task for Compiling Views

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 12:02 PM by nannette

Thanks for sharing this! This is another reason to look forward to 4.0 (besides Linq to Entities perhaps actually working!) LOL

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 1:33 PM by mark4asp

That's what I used to do before I knew better. Now I have a server class called JavaScript which writes it for me and I use RegisterClientScriptBlock().

It's still a mystery why I need to do that for every postback including the Ajax ones.

You could always use Script#, which I'll do when I need to write my next bit of complex client code.

As for the MVC to come - useless telling me about it unless I'm going to use it and I won't be using for any existing sites I'm maintaining.

But we could always start coding java, use GWT and never write another line of Javascript in our lives - that's surely the easiest solution?  I wish Microsoft would just copy GWT.

# re: Client side devevelopment in ASP.NET

Thursday, January 29, 2009 7:03 PM by Will

The classic way of :

var textbox = document.getElementById('<%=txtMyControl.ClientID%>')

still works good too for dynamic control id's

# Client side devevelopment in ASP.NET

Thursday, January 29, 2009 10:15 PM by aspnet-whatsnew

We ASP.NET developers know how much of a pain it is writing javascript in any app we have today because

# re: Client side devevelopment in ASP.NET

Friday, January 30, 2009 12:45 AM by Thanigainathan.S

Hi,

This post seems tobe very interesting.

Thanks,

Thani

# re: Client side devevelopment in ASP.NET

Saturday, January 31, 2009 11:56 PM by davidfowl

@ Will Yea that works good for dynamic controls, but what happpens when you want to write your code in a separate js file? <%= %> doesn't get processed anymore.

Leave a Comment

(required) 
(required) 
(optional)
(required)