Listing all posts

Asp.Net and the renaming of controls

Back in 2005 when immersing myself in standards compliant web page development the renaming mechanism used in asp.net finally got in my face. Most of the stuff I was reading in terms of CSS used id selectors when specifying layout etc. Suddenly this was a problem because my controls had bizarre id values like ctl00_masterpage_controlid and basic id selectors didn't work. So I actually queried this with Microsoft who as you can see suggested I stick to using classes.

Well in the end I learned to live with it despite the fact I still didn't see why it had to be forced on me. I had discussed it with a few .net folks who didn't understand my problem. This renaming was a good thing they said. Well I still maintained it didn't need to be so forced. Why not for example give me a warning if there is a going to be a clash of id values. If Visual Studio can tell me I am using a class value not contained within one of my external stylesheets surely it would be trivial to do something similar when checking id values in my masterpage, page and user controls.

Anyway moving onwards more than a year ago I read a few excellent javascript books in the wake of it's resurgence and the best books were recommending unobtrusive javascript. This is a popular way of developing in javascript now everywhere you look except at Microsoft. They still haven't heard of this ethos despite supporting jQuery which faciliatates unobtrusive scripters greatly. Well I decided to make another suggestion on the matter and what do you know they said they would consider it.

Well guess what the next version of asp.net, version 4.0, has finally done something about it. It's in beta now and you can download it along with Visual Studio 2010 beta and try it out yourself. I've just got it so I haven't tested it but from page down to individual controls you can specify how the renaming will work using the new ClientIDMode attribute.

This new attribute can be set to 1 of 4 values - Legacy, Static, Predictable & Inherit. The one I am interested in is Static. This tells asp.net not to rename the id at all. Finally what I was looking for and I can set this at the page level so all controls will adopt this behaviour. Controls within data controls like the gridview and repeater will still need to be renamed for obvious reasons which I never had any issue with. I'm not sure how a page level setting of static will affect them. I'll have to check it out.

This is a welcome addition to the framework for me and I can write my jQuery stuff with a bit more freedom now. I hope some asp.net developers out there might consider moving their script outside of the page for once and for all and develop truly accessible web pages that degrade well for all users.

Avoiding the Unecessary - Pop-Up Calendars and Web Based Editors

In the past I have used some great third party controls. The 2 I have needed the most have been a date picker and some kind of wysiwyg enhanced textbox. While these controls (the ones I have used anyway) tend to be excellent in general I recently decided that I didn't really need these things to be Asp.Net server controls. At the end of the day what you want is for example a date in a textbox or some html in a textarea to save to your application. So why not use straight-forward javascript widgets to do it and reduce the size of your web pages and have control on where the javascript will be.

Date Pickers

For date picking I found 2 options, Unobtrusive JavaScript date-picker widgit and the DateChooser. Both allow you to put a small amount of javascript in your page (crucially in external files) which will enable your chosen textboxes to become date pickers. When your users save all you need is the value in the textbox so why enlarge your page with a control that will spew out javascript inline that you have no control over?

WYSIWYG

I've used the FCK Editor for a long time and it is a powerful tool to say the least but as an asp.net control you have very little control over it. In alot of cases I don't want to provide that much functionality. The main idea is that my users use Word and want to paste into a textbox and retain the formatting (to a point, I won't allow certain formatting if I can help it). So I found a great widget called conveniently the widgEditor. This is a very lightweight bit of javascript that will turn any textarea (or asp.net textbox with textmode=multiline) into a wysiwyg editor once you have a css class of widgeditor declared.. Very simple and again when the user saves you can still grab that html content from your textboxes' content. This is a great solution as if the user has javascript turned off they will still get a basic textarea.If you can find good lightweight ways of doing things it can only help your web apps in the long run. You can cut down on unecessary bloated code in your html and remain more standards compliant and your pages usable to a wider audience. Give it a try.

Asp.Net 2, the Hyperlink control and An Image - oh no

I'm fussy lets be honest but I like web standards and they tend to like us. Asp.Net 2 is a major step forward when it comes to providing standards based accessible content but it still has some way to go to be exactly what I'd like.

I just finished putting this site together and as I like to do I checked the source in Firefox. I have the HTML Validator extension installed as any good web developer should and it flagged my nice but cliched xml image as having no alt tag. No way I thought to myself. The Asp.Net team wouldn't have missed that. Well they have but only in this particular situation. I'm using a hyperlink control with an imageurl specified and the tooltip correctly renders as a title attribute in in the anchor tag but unfortunately also renders as a title attribute in the img tag instead of an alt attribute. So I got to thinking. I could change it to ordinary html but no I like a challenge. So I fired up Visual Basic Express and within 5 minutes I had a new hyperlink control which I proudly called the "XHTMLHyperlink" control.

Now I'm not going to give you the dll of this control because to be honest you can do this yourself in the same 5 minutes (well ok a different 5 minutes then). Heres the code:-

Public Class XHTMLHyperLink
    Inherits System.Web.UI.WebControls.HyperLink

    Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter)
        writer.AddAttribute("alt", Me.ToolTip)
        writer.AddAttribute("src", ResolveUrl(Me.ImageUrl))
        writer.RenderBeginTag("img")
        writer.RenderEndTag()
    End Sub
End Class

Just put this class into a class library project (called whatever you like), make sure the project has a reference to system.web, compile and thats it. Instant dll goodness. Well o.k. you still have a dll that needs to be used on your website so in VWD right click on your toolbox, add a new tab called "custom" or whatever takes your fancy. Then right-click on the toolbox again, click choose items, browse to your shiny new dll and select it. You should find a new control added to your toolbox which you can use like any other control. Specifically an hyperlink control in every way except it will put that alt attribute in instead of the pesky title attribute.