# Saturday, 20 November 2010

ASP.NET provides developers with some very handy controls like a Treeview or a Menu control for displaying data coming from a sitemap file. Though a very common scenario sometimes these are simply too heavy weight to be used and on the ASP.NET forums I simply suggest an alternative by using a simple DataList control. For future reference to point out on the forums I decided to write this little code snippet:

The sitemap file:

<?xml version="1.0" encoding="utf-8" ?>
<
siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"
>
    <
siteMapNode url="" title=""  description=""
>
        <
siteMapNode url="http://www.microsoft.com" title="Microsoft"  description=""
/>
        <
siteMapNode url="http://blog.krisvandermast.com" title="Kris' blog"  description=""
/>
    </
siteMapNode
>
</
siteMap
>

The markup of a simple ASP.NET webform:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns
="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title></title>
    <style type="text/css">
   
    li {
        border-left:2px solid #000;
        list-style:none;
        margin-right:10px;
        padding-left:10px;
        float:left;
    }
   
    </style
>
</
head
>
<
body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapDataSource runat="server" ID="smd" ShowStartingNode="false" />
        <asp:DataList runat="server" ID="menu" DataSourceID="smd" RepeatDirection="Horizontal" RepeatLayout="Flow">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>' 
                        Text='<%# Eval("Title") %>'></asp:HyperLink>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:DataList>
    </div>
    </form
>
</
body
>
</
html
>

The output:

datalist_sitemap_menu

The benefits of using the DataList control is that it’s versatile, lightweight, easy to program but also that it supports item selection. That Could be quite an asset when a page wants to set the SelectedIndex from codebehind to have selection in the menu itself. Note the extra added SelectedItemTemplate and the added class=”selected” in the <li> element. This will, thanks to the css class, make the background color look red and as such a selected menu item.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<%@ Register Assembly="WebApplication1" Namespace="WebApplication1" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns
="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title></title>
    <style type="text/css">
        li {
            border-left: 2px solid #000;
            list-style: none;
            padding-right: 10px;
            padding-left: 10px;
            float: left;
        }
       
        .selected {
            background-color:Red;
        }
    </style
>
</
head
>
<
body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapDataSource runat="server" ID="smd" ShowStartingNode="false" />
        <asp:DataList runat="server" ID="menu" DataSourceID="smd" RepeatDirection="Horizontal"
            RepeatLayout="Flow">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>' 
                        Text='<%# Eval("Title") %>'></asp:HyperLink>
                </li>
            </ItemTemplate>
            <SelectedItemTemplate>
               <li class="selected">
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>' 
                        Text='<%# Eval("Title") %>'></asp:HyperLink>
                </li>
            </SelectedItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:DataList>
    </div>
    </form
>
</
body
>
</
html
>

And in the Page_Load event:

protected void Page_Load(object sender, EventArgs e)
{
    menu.SelectedIndex = 1;
}

This outputs the following:

datalist_sitemap_menu2

Another option, which generates less span elements would be to use a Repeater control instead:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<%@ Register assembly="WebApplication1" namespace="WebApplication1" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns
="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title></title>
    <style type="text/css">
   
    li {
        border-left:2px solid #000;
        list-style:none;
        margin-right:10px;
        padding-left:10px;
        float:left;
    }
   
    </style
>
</
head
>
<
body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapDataSource runat="server" ID="smd" ShowStartingNode="false" />
        <div id="menu">
            <asp:Repeater runat="server" ID="rpt" DataSourceID="smd">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li>
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>' 
                            Text='<%# Eval("Title") %>'></asp:HyperLink>
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form
>
</
body
>
</
html
>

Grz, Kris.

ASP.NET | CSS | Datalist | Sitemap
Saturday, 20 November 2010 20:20:25 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 22 July 2010

Sometimes you just stumble upon something new that looks interesting. After a short vacation, too short, I was surfing the web, following twitter, … and ended up at a new page at MSDN: scriptjunkie{} Serious web development.

It’s a new place for people working with HTML, CSS and Script. I like it that Microsoft shows the love for these 3 quite essential parts of technology as most people became so dependent on them during the last years. In addition to that, after a reorganization on the ASP.NET forums there’s one dedicated to these 3 too: HTML, CSS and JavaScript.

Grz, Kris.

CSS | HTML | Javascript | MSDN | scriptjunkie
Thursday, 22 July 2010 18:58:58 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 19 February 2009

Following people on Twitter can not only be fun but also rewarding. Dana Coffey recently twitted about a tool that can be very handy: Color Palette Generator. Just upload a picture and it’ll grab the palette. You can also let it generate a css file with the colors in it.

Grz, Kris.

Colors | CSS | Generator
Thursday, 19 February 2009 13:04:26 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [3]  | 
# Wednesday, 04 February 2009

Though external javascript and css files can be cached by a browser the initial download can still be quite large. For example the minified jQuery library compared with the uncompressed one, or even the visual studio documented one is considerable. A while ago, for my current project, I also faced the problem of lots of script files in the project either created by the team or provided by a design company. This however hurt performance so I took some time to dig into the matter and try out several compression tools. The best one I found so far is YUICompressor from Yahoo!. It’s written in java but that shouldn’t stop you from giving it a try. The nice thing about it is that one can provide arguments to the command line tool to get a different outcome like for example the switch --nomunge which tells the tool to only minify the javascript and not to obfuscate local symbols. According to Wikipedia obfuscation means:

Obfuscation is the concealment of meaning in communication, making communication confusing, intentionally ambiguous, and more difficult to interpret.

It also has a side effect benefit that mostly the file even becomes a little bit smaller.

Because as a .NET developer I mainly work with Visual Studio and I like to stay in that environment instead of going to a command prompt, typing in the commands to run the tool. Luckily Visual Studio provides the needed mechanism to automate this process without leaving the IDE itself.

In the menu select Tools > External Tools…
There you can add a new entry like in the image by clicking the Add button.

YUICompressor

I added the YUICompression entry. The command is the executable file, in this case java.exe which is needed to run the jar file. The arguments section is the most interesting one though as this provides us the way to tweak the arguments of the command line tool. Also note that I put the compression tool in my c:\ root directly.

The whole line reads as:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemDir)$(ItemFileName).min$(ItemExt) –v

For the CSS file compression I added another entry but with this in the Arguments section:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemPath) –v

The reason for this is because I like the javascript, when minified, get the filename that indicates that it was minified so I add the .min in between. The added benefit for this is that you can still keep the original .js file for changes, and then minify it again of course. I don’t do this for the css files as they don’t get obfuscated and it’s easy to reformat the document again with the default keyboard combination ctrl + k, ctrl + d (Menu > Edit > Advanced > Format document).

Now that we’ve got this into place it’s quite easy. In the Solution explorer you just select a .js or .css file and from the menu Tools > YUICompression you can let the tool do its magic.

Grz, Kris.

Wednesday, 04 February 2009 23:19:01 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Sunday, 24 September 2006

Yesterday evening I upgraded my blog from 1.8 to 1.9.

The things I like already is the easier way to navigate to the previous or next day in the statistics (admin pages). Also the better way to navigate in the itemview to navigate to the previous or next blog article. It makes it much easier for someone to start reading a blog post and navigate to the follow up blog items. The tagcloud control is something I like a lot. It doesn't have the same advanced use like the tagcloud control of del.icio.us where you can further select "subtags".

When I downloaded the code and tested it on my laptop I quickly noticed that my IE7 RC1 didn't show the tagcloud correctly. After taking a look at the .css files of the dasBlog theme that I use, I quickly noticed that dasBlog.css contains definitions for the css classes that are used by the tagcloud but they were overridden in the base.css file. Commenting these overrides fixed it for me.

I also made the necessary adjustments to the itemtemplate in order to get my custom macros working. If you're interested in creating custom macros yourself you can check out my article about it: Creating custom macros for dasBlog.

Grz, Kris.

CSS | dasBlog
Sunday, 24 September 2006 08:17:12 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, 14 July 2006
CSS | Design
Friday, 14 July 2006 20:48:57 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [2]  |