The html rendered by controls...

philthy · October 10th, 2008, 04:13 AM

This is a little off-topic, hope its okâ¦

How do you guys deal with the html rendered by the different controls e.g. Login, Menu, CreateUserWizard etc.? Do you use them as is, and live with the tables? Do you use CSS adapters, or maybe something else?
I mean, the rendered code is not standards compliant, and I really don't like tables in my layout as I feel they should only be used to display data.
I tried playing with the CSS adapters, and I find them totally confusing and not easy to use for people with less experience like me. Also, it seems like this project has more or less died, and the documentation is really not great.
I wish Microsoft had thought of this when they released .NET 3.5.

Any thoughts?

Lee Dumond · October 10th, 2008, 09:01 AM

I couldn't agree more with your last statement; Microsoft should have released a set of companion controls to these that work on the same principle as the ListView, with design-time flexibility over all the UI rendering.

For the login controls, if you use templates for everything, INCLUDING the button navigation, you can actually get rid of all the internal structure of the enclosing table -- that is, you can eliminate the rows and cells -- and are then left with just the enclosing table, which is about the best you can do without going to the CSS adapters. I find that for most projects, that's good enough for me.

The CSS adapters are not horrible, but keep in mind that they simply don't work when templates are applied. Of course, that kinda makes sense -- since they give you total flexibility in styling, there should be no need to use templates with them in the first place. I agree that they are confusing unless you are really good with CSS. I've had pretty good luck working with the treeview CSS control in that way.

Of course, the other alternative is to give up the controls altogether and work with the methods in the Membership, MembershipUser, FormsAuthentication, etc, directly for the Login controls.

I never use the Menu control -- it just plain sucks. For those, if you really need something fancy, you might consider going with a third-party menu like the Telerik one, which is excellent if a bit pricey.

philthy · October 10th, 2008, 12:59 PM

Quote:

quote:Originally posted by Lee Dumond
I couldn't agree more with your last statement; Microsoft should have released a set of companion controls to these that work on the same principle as the ListView, with design-time flexibility over all the UI rendering.

Yes, the ListView is a step in the right direction. Would be great if all the other controls were as flexible.

I really want to get my hands dirty with alle the backend stuff, but I usually only get to the UI. Then I get so annoyed with the html rendered by the controls, and I end up spending all my time figuring out how to change it... This is just something I can't ignore. That's why I wondered what all you more professional guys do

Quote:

quote:Originally posted by Lee Dumond

For the login controls, if you use templates for everything, INCLUDING the button navigation, you can actually get rid of all the internal structure of the enclosing table -- that is, you can eliminate the rows and cells -- and are then left with just the enclosing table, which is about the best you can do without going to the CSS adapters. I find that for most projects, that's good enough for me.

Well, I managed to use a Login Control as a template, and wrote it out as an unordered list. That worked pretty well, except that the content placeholder wrapped the whole thing in a tableâ¦

I wasnât as successful with the Menu Control though. Seems a little more complicated to use as a template. Iâll have to look into that.

Quote:

quote:Originally posted by Lee Dumond

Of course, the other alternative is to give up the controls altogether and work with the methods in the Membership, MembershipUser, FormsAuthentication, etc, directly for the Login controls.

I never use the Menu control -- it just plain sucks. For those, if you really need something fancy, you might consider going with a third-party menu like the Telerik one, which is excellent if a bit pricey.

Say I want to create a menu. I can just write one as an UL, style it up with CSS and still use it with a SiteMapDataSource? I canât really find any good tutorials/articles on thisâ¦
Those Telerik controls are way out of my pricerangeâ¦

Lee Dumond · October 10th, 2008, 01:57 PM

Quote:

quote:Originally posted by philthy

Say I want to create a menu. I can just write one as an UL, style it up with CSS and still use it with a SiteMapDataSource? I canât really find any good tutorials/articles on thisâ¦
Those Telerik controls are way out of my pricerangeâ¦

Of course. You can use the SiteMapDataSource as a DataSource for the BulletedList control. On the BulletedList control, set the DisplayMode to "HyperLink", set the DataSourceID to the ID of the SiteMapDataSource; set the DataTextField to "title", and set the DataValueField to "url".

This will render as a[list] list of links in the browser, which you can style to your heart's content. If you need pull-down menus, you'll have to write the JavaScript for it too.

philthy · October 23rd, 2008, 02:49 PM

I used the ListView to generate a menu from the siteMap, like this:

Code:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SiteMapDataSource1">
                <LayoutTemplate>
                    <ul class="menu">
                        <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <li>
                    <a href='<%#Eval("url") %>'><%#Eval("title") %></a>
                    </li>
                </ItemTemplate>
            </asp:ListView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />

Then in my CSS, I made a class...

Code:

.menu li
{
    display:inline;
    float:left;
}

This generates a nice clean horizontal ul/li menu like this...

Code:

                 <div id="HeaderMenu">
                    <ul class="menu">

                    <li>
                    <a href="/Default.aspx">Start</a>
                    </li>

                    <li>
                    <a href="/Search.aspx">Search</a>
                    </li>

                    <li>
                    <a href="/Contact.aspx">Contact</a>
                    </li>

                    </ul>       
                 </div>

Lee Dumond · October 23rd, 2008, 04:23 PM

Why not just do this?

<asp:BulletedList ID="menu" runat="server" DataSourceID="SiteMapDataSource1"
   DataTextField="Title" DataValueField="Url" DisplayMode="HyperLink">
</asp:BulletedList>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />

#menu li
{
   list-style: none;
   float: left;
}