Member Avatar for Slade

Hey guys,

I'm using VS .NET 2003, and I am designing a web application in VB .NET, I'm just wondering, Tekmaven mentioned to me in another thread of mine that it would be a good idea to use the datalist control as a menu, how would I use it to get menu's much the same as those on this site, or any control for that matter.

Thanks again guys,

Slade

  • 3 Contributors
  • 2 Replies
  • 241 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by LeProgrammeur

Dani AI

Generated

Good starter from — using a DataList for a menu works, but you can make it cleaner and more accessible by rendering semantic UL/LI markup, using plain anchors to avoid postbacks, and setting an "active" class server-side so the current page highlights. Below is a compact pattern that keeps markup simple, binds from a DataTable (works in older VS.NET 2003), and adds the active class in ItemDataBound.

<asp:DataList ID="dlMenu" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" CssClass="menu">
  <HeaderTemplate>
    <ul role="menubar">
  </HeaderTemplate>

  <ItemTemplate>
    <li role="menuitem">
      <a id="lnkMenu" runat="server" href='<%# Eval("Url") %>'><%# Eval("Text") %></a>
    </li>
  </ItemTemplate>

  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:DataList>
' Page_Load: create a small DataTable and bind (works on .NET 1.1 / VS2003)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
  If Not IsPostBack Then
    Dim dt As New DataTable()
    dt.Columns.Add("Text")
    dt.Columns.Add("Url")

    Dim r As DataRow
    r = dt.NewRow()
    r("Text") = "Home"
    r("Url") = "/default.aspx"
    dt.Rows.Add(r)

    r = dt.NewRow()
    r("Text") = "Products"
    r("Url") = "/products.aspx"
    dt.Rows.Add(r)

    dlMenu.DataSource = dt
    dlMenu.DataBind()
  End If
End Sub

' ItemDataBound: mark the current page
Protected Sub dlMenu_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs) Handles dlMenu.ItemDataBound
  If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    Dim a As System.Web.UI.HtmlControls.HtmlAnchor = CType(e.Item.FindControl("lnkMenu"), System.Web.UI.HtmlControls.HtmlAnchor)
    If Not a Is Nothing Then
      Dim cur As String = Request.Url.AbsolutePath
      If a.HRef = cur Then
        a.Attributes("class") = "active"
      End If
    End If
  End If
End Sub
/* simple CSS */
.menu { list-style:none; margin:0; padding:0; }
.menu li { display:inline; margin-right:12px; }
.menu a { text-decoration:none; padding:4px 8px; }
.menu a.active { background:#eee; font-weight:bold; }

Quick tips: 1) Don't rebind on postback or you lose state. 2) Normalize URLs if you use query strings (compare Request.Path or strip qs). 3) For hierarchical menus consider the built-in Menu control + SiteMapDataSource; for full control prefer Repeater or (in newer frameworks) ListView. Finally, has longer tutorials if you want step-by-step demos.

Recommended Answers

All 2 Replies

Member Avatar for Paladine

Umm, that is a kind of a wide open question you have asked. confused:

Here is some code to get you started:

<asp:DataList id="dlMenu" runat="server" .....
....
....
OnItemCommand="dlMenu_ItemCommand"
....>

....
<ItemTemplate>
<asp:LinkButton id="btnItem1" runat="server" Text='<%Container.DataItem("MenuValue1")%' CommandName="select" /></ItemTemplate>
</asp:DataList>

Now in the Code behind or Script Code place

public sub dlMenu_ItemCommand(obj as Object, e as DataListCommandEventArgs)
dlMenu.SelectedIndex = e.Item.ItemIndex
'    |||||    Do what you want with the selected Item . Navigate, etc
end sub

Hope this helps.... Maybe Tekmaven has something to add to this? :

Member Avatar for LeProgrammeur

Great article!
I also posted a tutorial at about DataList control in asp.net
Go to and search for: DataList Control
There is also a chat room where I try to spend a lot of time answering questions. Stop by if you want.
:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.