Archives
-
ASP.NET Markup Guide
One of the biggest gaps between developers and designers at our company is the disconnect between ASP.NET web controls and HTML markup.
Our designers are very comfortable working in HTML, and passionate about using semantic markup to communicate the structure and meaning of web sites. Our developers, on the other hand, understand the functionality of most of the web controls that ASP.NET provides, but are usually more concerned with the functionality that they provide, rather than the markup that the produce.
To help begin bridging this gap, I created an interactive guide to the markup produced by the various standard ASP.NET web controls. You can take a look and contribute at the repository on GitHub.
Right now, when you pull the files down from the repository, you'll have a control with the actual guide on it, another control which you can register with [DotNetNuke] to make it into a [DNN] module, and a plain ASP page, Default.aspx, which you can use to view the guide outside of [DNN] (Phil Haack's Web Server Here shell extension might be useful for viewing that page without having to setup any real website).
The guide consists of three columns in a table. The left column contains some ASP.NET markup. The right column contains the rendering of that markup. The middle column contains a list of the HTML elements and their attributes which the control renders. The contents of the middle column are dynamically generated when the page loads, using jQuery. This means that the results are always accurate for your current situation (whether you're using a downlevel browser, ASP.NET 4.0's new cleaner markup, the CSS Friendly Control Adapters, or just want to see how the control tree on your site affects the rendered Client IDs). Also, when you hover your mouse over that middle column, the entirety of the HTML is displayed in a tooltip.
At this point, I think the guide is useful and helpful, but there are definitely improvements to be made. Firstly, some styling, so that it's not painful to the eyes to find this information. Secondly, some of the more complicated controls could probably use some more examples, and the controls that aren't in the "Standard" toolbox also need to be represented (e.g. GridView, ListView, etc). Also, some sort of navigation or searching, especially with the addition of more examples.
If you find this useful, leave a comment, and consider forking the repository on GitHub and implementing an extra example, or a new feature.
Hopefully this can help us all get on the same page, and know when an <asp:Label/> is a <label> and when it's a <span>.