Layouting Formview without Tables and use CSS

I hate Detailsview. The editing of templates for each Column sucks. I prefer the Formview control which use one template per mode (insert, update, item). The problem is how to design this form cause there are no tables by default and also tables are not state of the art today.

Real ugly result and not what should be!

The second bad part shows up on rendering. The label text is rendered as plain text and also if you use ASP.NET label controls there is generated DIV tag. This is against accessibility rules. Microsoft have made in 2003 a patch for ASP.NET 1.1. But the same issue in 2.0!

Also the CSS Controls Adapters doesn't fix this kind of issue.

How should it be ( my opinion)

1) Formview wizard should automaticly create <LABEL> tags for the description in the IDE. "for" attribute point to the input field

  <LABEL FOR=email ACCESSKEY=e>e-Mail</LABEL>
Must be done by hand now.

2) You add a small style rule for the label width

<style>

label {

display: block;

float: left;

width: 80px;

}

</style>

Done!

You can watch the result on  session submission site of VSone.

Published Wednesday, October 11, 2006 8:40 AM by preishuber
Filed under: ,

Comments

# re: Layouting Formview without Tables and use CSS

Wednesday, October 11, 2006 3:41 AM by Thomas

Mal davon abgesehen, dass die Seite leider immer noch wie *** und Rüben aussieht, wozu braucht es hierfür ein FormView-Control?

# re: Layouting Formview without Tables and use CSS

Wednesday, October 11, 2006 5:35 AM by vikram

Do you know what are the basic difference between form view an detail view

# re: Layouting Formview without Tables and use CSS

Wednesday, October 11, 2006 11:54 AM by Dee

You've touched upon the fundamental flaw in the usage /design of visual studio (VS).  VS was created to aid in the development of desktop applications where everything shown on the screen is in a coordinate position.  In VS, design is first and server side code is pushed into some form of event driven code-behind.

ASP developoers do just the opposite.  They write the functional code and the design is essentially the "code-behind" in the form of templates.

The closest thing to this in VS is Master Pages.  An overly complex form of Templates.

VS will never correctly serve the website development community because MS is always going to be a desktop development company and they will always sell desktop development tools because that's what they use.

Remember, MS did not think the internet was a big thing .

# re: Layouting Formview without Tables and use CSS

Wednesday, October 11, 2006 3:59 PM by Jason

Dee: Pretty funny post and completely ill-informed.

Not sure which version of VS you are talking about, but I think you'll find that 2003 or 2005 handle flow layout for web pages just fine.

MasterPages are an excellent way of being able to define common layout in a single page and re-use that throughout the site.  They are *real* easy to use and if you find them overly complex then maybe you should stick with editing HTML in notepad.

MS are far from a desktop company now...maybe you need to check out some of the AJAX stuff they have been doing and think again.

# re: Layouting Formview without Tables and use CSS

Thursday, October 12, 2006 9:58 AM by Christian

be careful with accesskey "e" -- because Alt+E opens up the Edit menu in English language browsers :-)

# re: Layouting Formview without Tables and use CSS

Friday, October 24, 2008 9:27 AM by mike

To make this a "little" easier, consider using a query to build the template content...

select '<label id="' + name + '" runat="server" for="' + name + 'TextBox">'+name+':</label><asp:TextBox ID="'+name+'TextBox" runat="server" Text='+char(39) + '<%# Bind("' + name +'") %>' + char(39) + ' /><br />'

from syscolumns where id in (select id from sysobjects where name = 'PUTYOURTABLENAMEHERE')

This will build a string that you can paste into the "edititemtemplate" of a formview control.

If you running your formview against a DAL, then create a temp table, such as: create table tTmpEditFields ( nID int identity(1,1) not null, cFieldName varchar(50) null, cLabel as varchar(50) null, nDisplayOrder int null default(1))

insert your field names and labels, then update the query above to use cFieldName in place of name and cLabel where appropriate. Saves me a little time, perhaps you as well...

Leave a Comment

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