I didn’t post any css in my previous post for the use of the menu control this is the css i used when i was creating it. The Menu Id is a horizontal menu and Nav Id is a vertical menu, as you can see all i have to do is assign the CssId to the control and we manage the look with css and the content in code.

My next post will be about using the Roles to determine access to the user.

Sample CSS:

/**** Main Menu ***/

#menu {
display: block;
float:right;
}

#menu ul {
margin: 0;
list-style: none;
}

#menu li {
display: block;
float: left;
white-space: nowrap;
}

#menu li a {
display: block;
padding: 55px 20px 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
background: url(../img/bg_menu.gif);
}

#menu li a.current {
letter-spacing: 1px;
color: gray;
background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
color: #fff;
}


/**** nav ***/
#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.3em 0.3em 0.8em;
border-bottom: 2px; /*solid #1a1a1a*/
border-top: 2px; /*solid #1a1a1a*/
color: #93B300;
background-color: #F7F9FB;
font-weight: bold;
text-decoration: none;
}

#nav a:hover{
color: #1a1a1a;
background: url(../img/bg_t.gif) no-repeat;
background-color: #fff;
font-weight: bold;
} 

As you can see from the code bellow it is very easy to create a Server Control that takes in a SiteMapDataSource. Simply get a SiteMapNodeCollection  from the provider and iterate through it and build your html.

This way you can create controls to fit your design and still have all the ability to manage your site from the xml file. Also you are able to get all the roles and user accessibility for each node.

Source Code:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

namespace Yournamespace.UI.WebControls
{

///

/// Summary description for MenuTop

///

[ Serializable()]

public class MenuSiteMap : Panel

{

private SiteMapDataSource xds;

public SiteMapDataSource DataSource

{

get

{

return xds;

}

set

{

xds = value;

}

}

protected override void OnDataBinding(EventArgs e)

{

base.Controls.Clear();

base.OnDataBinding(e);

SiteMapNodeCollection smnc;

xds = this.DataSource;

smnc = xds.Provider.GetChildNodes( xds.Provider.RootNode);

Literal lit = new Literal();

lit.Text = ”

    “;

    base.Controls.Add(lit);

    foreach (SiteMapNode item in smnc)

    {

    lit = new Literal();

    lit.Text = ”

  • “;

    bse.Controls.Add(lit);

    HyperLink lnk = new HyperLink();

    lnk.Text = item.Title;

    lnk.NavigateUrl = item.Url;

    base.Controls.Add(lnk);

    lit = new Literal();

    lit.Text = ”

    “;

    base.Controls.Add(lit);

    }

    lit = new Literal();

    lit.Text = “

“;

base.Controls.Add(lit);

base.Controls.Add(lit);
}
}
}

What happend to the Client ScriptCallback feature of Asp.Net 2.0, Well nothing really happened to Asp.Net 2.0’s client call back…its there and MS Ajax.net (aka atlas) actually uses this in the back end. The reason why we don’t here about it is…it is a paint in the you know what! To actually get anything done….but there was less of a foot print on the page.

Right now we have a couple API’s for writing Ajax is asp.net:

  1. MS Ajax.Net (aka Atlas)
  2. Anthem.Net
  3. Ajax.Net or Professional Ajax.Net

Out of all three Ajax.net has a smaller foot print on the page. The other two still simulate the full page life cycle using XmlHttpRequest and pushing most of the data back. Which means that most of the application written in using Ajax.net or writhing the actual javascript your self will be faster than using an API with all the over head.

What MS Ajax.net and Anthem do offer is that they are easy to use, and you do not have to dig into the specific and writing javascript. Just throw things in a UpdatePanel or AnthemPanel and all your post backs get translated to callbacks. This is still better than a full post because your screen doesn’t flicker…. but lets not get to the point that everything is done through XmlHttpRequest and we basically have gone back to the old problem.

Tips when not to Use Ajax… because the list of when to use it is actually longer…

  1. To hide objects don’t do a full callback just use javascript to set its style display to none, why do a full call back if all your doing is hiding something.
  2. If a callback is going to Redirect a user when it get back to the client, just do a post and redirect him or her from there because it gets annoying. If it has to go all the way to server just do a post and redirect or do a Server.transfer.
  3. Don’t do a call back if it take 30 sec to return, but if you must give the user a message so he or she knows your processing data.

Small pet-peeve of mine are all there API’s that say they are an Ajax library and there purely javascript….. YOU’RE A JAVASCRIPT API LIVE WITH IT!!!!

Links:
Script Callbacks in ASP.NET
http://anthemdotnet.com/
MS ajax
Professional Ajax.net