Asp.Net Repeater Horizontal List Menu


This article is written by Pon Saravanan  on 25-Jan-11 Last modified on :04-Feb-11





How to build a Horizontal List using an ASP.net Repeater

Have you ever tried generating a horizontal list in ASP.Net?  There is no control in ASP.Net which natively supports this (to my knowledge).  Radio button list supports the list’s orientation as horizontal. But you can not use radio button list for a menu. I am trying to use a repeater to fabricate the menu so that you can add the other onClick events later to bind to the respective actions.

Why ASP.Net over the other data controls.

ASP.net repeater is a very simple control which just repeats the items defined in the ItemTemplate. It does not add anything other than this. This gives us more possibilities in generating the code as we like. And for this menu we don’t need any paging or runtime sorting options. So with a little CSS and JavaScript we are ready to use the horizontal menu we created.

Bind the Data

Please refer to the data controls section for how to connect the data and bind the data controls. I am just skipping those areas, since I have explained in few articles in the earlier days in detail.

Constructing a menu

To get a menu we need two divs. One is the outer div(we call it as OuterPanel) and another one is the div used for each menu item. So we place the repeater inside the OuterPanel. Let the repeater handle the placing of inner divs(we call as ItemPanel). After assigning the proper class names, the application is ready to run.

If you run at this stage you will notice that the ItemPanels are placed vertically. That is the default behaviour of the divs. They don’t sit horizontally. To bring the menu items floating next to each other we need to use the property float:left for the menu items.

Fixing few for a decent looking menu

At this stage if you run, you can notice the ItemPanels are overlapping the OuterPanel. This is due to the float:left assigned to the ItemPanels. To fix this you can add float:left to the OuterPanel. Apply some padding, margin, background the menu will look decent.

Screen Capture


Source Code

Markup(aspx)

<%@ Page Language="VB" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .OuterPanel
    {
     float:left  ;
     border:solid 2px silver;
     background-color:#A6A6A6;
    }
    .ItemPanel
    {
     float:left;/*to keep the items in horizontal*/
     border:solid 1px gray;
     background-color:silver;
     margin:2px;
     padding:5px 2px 5px 2px;
     color:#606060;
     font:Calibri;
     font-size:small;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server" defaultbutton="btnLoad">
    <asp:Button runat="server" ID="btnLoad" Text="Load" /><br /><br />
    <div class="OuterPanel">
        <asp:Repeater runat="server" ID="Repeater1">
            <ItemTemplate>
                <div class="ItemPanel">
                    <asp:Label runat="server" ID="lblItem"
                    Text='<%# DataBinder.Eval(Container.DataItem, "CategoryName")  %>'>
                    </asp:Label>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

Code-behind(aspx.vb)

Imports System.Data.SqlClient
Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page
    Private RowCount As Integer
    Private ReadOnly Property ConnectionString() As String
        Get
            Return "Server=.;Database=NorthWind;" & _
                    "Trusted_Connection=True"
        End Get
    End Property
    Private ReadOnly Property Connection() As SqlConnection
        Get
            Dim ConnectionToFetch As New SqlConnection(ConnectionString)
            ConnectionToFetch.Open()
            Return ConnectionToFetch
        End Get
    End Property
    Public Function GetData() As DataView
        Dim SelectQry = "select CategoryName from Categories C "
        Dim SampleSource As New DataSet
        Dim SortableView As DataView
        Try
            Dim SampleDataAdapter = New SqlDataAdapter(SelectQry, _
                                                       ConnectionString)
            SampleDataAdapter.Fill(SampleSource)
            SortableView = SampleSource.Tables(0).DefaultView
            RowCount = SampleSource.Tables(0).Rows.Count
        Catch ex As Exception
            Throw ex
        End Try
        Return SortableView
    End Function
   
    Private Sub LoadRepeater()
        Repeater1.DataSource = GetData()
        Repeater1.DataBind()
    End Sub
    Protected Sub btnLoad_Click(ByVal sender As Object, _
                    ByVal e As System.EventArgs) Handles btnLoad.Click
        LoadRepeater()
    End Sub
 
End Class











Comments

Comments
   
Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    



Spam Bot Trap



   



Select Theme
White
Blue
Brown
Gray