Open in new window

Social Icons

Saturday, November 12, 2011

How to build a FAQ page using the DevExpress ASPxNavBar bound to an Access or SQL Datasource

By design the ASPxNavBar supports binding only to hierarchical datasources (those that implement the IHierachicalDataSource interface - e.g. XmlDataSource, SiteMapDataSource) through its DataSourceID and DataSource properties. 

Recently I wanted to build a FAQ page, I have done this before in other ways but this time I wanted to use the ASPxNavBar to display the FAQ page. I quickly found that I could not bind the ASPxNavBar to an Access or SQL datasource at design time and after searching Google and DevExpress I found many questions regarding this (Q201051 shows how to bind an ASPxMenu) but no definitive answers showing how to do it. 

After a little research I found a quick simple way to bind an Access or SQL database to the ASPxNavbar control for use in a FAQ page or for other uses. 

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Example - FAQ Page Using ASPxNavbar</title>
    <style type="text/css">
        .heading { font-size: large; color: Blue; }
        .divnb { padding-left: 10px; padding-top: 10px; }
        .Question { color: Gray; font-size: 11pt; }
        .Answer { font-size: 11pt; padding-left: 35px; padding-top: 8px; padding-bottom: 8px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <div style="min-height: 500px;">
        <div class="heading">Frequently Asked Questions</div>
        
        <div class="divnb">
            <dx:ASPxNavBar ID="navFAQ" runat="server" EnableDefaultAppearance="False" ExpandButtonPosition="Left" AutoCollapse="True" GroupSpacing="5px" EncodeHtml="False">
                <GroupHeaderStyle CssClass="Question" ImageSpacing="8px"></GroupHeaderStyle>
                <ItemStyle CssClass="Answer" />
                <CollapseImage url="~/Images/nbCollapse.png"></CollapseImage>
                <ExpandImage url="~/Images/nbExpand.png"></ExpandImage>
            </dx:ASPxNavBar>
        </div>
    </div>
    
    </form>
</body>
</html>

Code behind VB:

Imports System.Data.OleDb
Imports DevExpress.Web.ASPxNavBar
 
Partial Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Load_FAQ()
        End If
    End Sub
 
    Public Sub Load_FAQ()
        Dim SQL As String = "SELECT [Sort], [Question], [Answer] FROM [FAQ] ORDER BY [Sort], [Question]"
        Dim Question, Answer As String
        Dim i As Integer = 0
 
        '// The connectionstring is defined in the web.config file //
        '<connectionStrings>
        '    <add name="DB_Conn_DemoFAQ" connectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|demofaq.mdb" providerName="System.Data.OleDb" />
        '</connectionStrings>
        Dim conn As OleDbConnection = New OleDbConnection(ConfigurationManager.ConnectionStrings("DB_Conn_DemoFAQ").ConnectionString)
 
        Dim SelectCommand As New OleDbCommand(SQL, conn)
        Try
            conn.Open()
            Dim Reader As OleDbDataReader = SelectCommand.ExecuteReader()
            While Reader.Read()
                Question = If(Not IsDBNull(Reader.Item("Question")), Reader.Item("Question"), "")
                If Not Question = "" Then
                    Question = Reader.Item("Question")
                    Answer = Reader.Item("Answer")
                    navFAQ.Groups.Add(Question)
                    navFAQ.Groups(i).Items.Add(Answer)
                    i += 1
                End If
            End While
        Catch ex As Exception
        Finally
            conn.Close()
            conn.Dispose()
            SelectCommand.Dispose()
        End Try
    End Sub
End Class

If it helps anyone else I’ve got a sample FAQ project with downloadable code on my main website and a video below.

How to build a FAQ page using the DevExpress ASPxNavBar bound to an Access or SQL Datasource

0 comments:

Post a Comment