Custom DataGrid Pager for SEO (Search Engine Optimization)

Introduction

If you use DataGrids on web pages that receive a lot of hits, and they only display information and are not to edit data, then high speed, small size might be what you need.

The standard DataGrid is not optimised for search engine indexing as it uses JavaScript postbacks to jump to the next pages. There is also the slight possibility that your users might not have JavaScript enabled on their browser. We will have a look at implementing a custom DataGrid pager which incorporates "< Prev" and "Next >" links as well as replaces the postback buttons with standard anchor tags.

Background

As the majority of internet traffic is generated by search engines, having as many relevant pages spidered, and hopefully indexed, is the main concern for most webmasters. I consider the DataGrid as one of the most powerful controls available to the ASP.NET developer. It does, however, have two disadvantages to its use:

1. It creates a bloated Viewstate which could cause search engines to download unusable data and thereby skipping a page, as some spiders only read the top most part of a web page.
2. The pager does not create search engine friendly links that are optimised for spiders due to the use of JavaScript postback.

It might be easier to implement custom paging than writing custom code yourself, but implementing a custom solution might just be the answer to getting more pages spidered as you will be using anchor tags instead of postbacks to handle the paging.

Using the code

There are two aspects to the code:

1. The customized paging of the DataGrid.
2. The custom paging in the Page_Load event of the form.

All the work to customise the pager is done in the ItemCreated event of the DataGrid. The main thing to remember is that the pager is made out of a Label control (the unlinked and therefore current page number) and several DataGridLinkButtons, which are the active buttons. These DataGridLinkButtons are the "culprits" that we want to replace with standard HTML anchor tags.

More descriptive comments are available inline.

The Datagrid_ItemCreated event

Private Sub CustomGrid_ItemCreated(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
        Handles CustomGrid.ItemCreated
    If e.Item.ItemType = ListItemType.Pager Then
        Dim Pager As TableCell = CType(e.Item.Controls(0), TableCell)
        Dim myEnumerator As IEnumerator = Pager.Controls.GetEnumerator()

        'Will hold the value of the position of the label
        ' control in the enumerated list of controls
        Dim labelPos As Int16             

        'Flag to indicate that you have reached the label control in the list
        Dim blTag As Boolean = False     
        Dim strObj As String
        Dim litTemp As Literal

        'Counter value to hold the index of the last control in the Pager
        Dim y As Int16             

        resumeHere:
        y = 0
        While (myEnumerator.MoveNext())
            Dim myObject As Object = myEnumerator.Current
            y += 1
            
            'Have we reached the Label control
            If myObject.GetType().Equals(GetType(Label)) Then
                If blTag = False Then
                    labelPos = CType(myObject, Label).Text - 1
                    blTag = True
                End If
                
            'Have we reached DataGridLinkButton control
            ElseIf myObject.GetType.ToString.Equals("System." & _
                "Web.UI.WebControls.DataGridLinkButton") Then

                'Remove the currnt control from the Pager
                Pager.Controls.Remove(myObject)

                'Create a new Literal control with our anchor tag that we 
                'will be using instead of the JavaScript Postback
                litTemp = New Literal        
                
                'Build your custom anchor tag
                litTemp.Text = "<a href=" & chr(34) & _
                               "thispage.aspx?page=" & _
                CStr(CInt(CType(myObject, LinkButton).CommandArgument) - 1) _
                & chr(34) & ">" & _
                CType(myObject, LinkButton).CommandArgument & "</a>"

                'Add the new Literal control to the current location in the Datagrid
                Pager.Controls.AddAt(y - 1, litTemp)

                'You have to reload the Enumerator as 
                'we have made changes to the Pager
                myEnumerator = Pager.Controls.GetEnumerator()

                'Loop back and start the enumeration from 
                'the beginning of the Pager
                GoTo resumeHere
            End If
        End While

        'Create the Literal control that will be used to 
        'create the "Next >" button in the pager
        Dim lbNext As New Literal
        
        'Build your custom anchor tag
        lbNext.Text = "<a href=" & chr(34) & _
                  "thispage.aspx?page=" & labelPos + 1 _
                  & chr(34) & "> Next &gt;</a>"

        'Create the Literal control that will be used 
        'to create the "< Prev" button in the pager
        Dim lbPrev As New Literal 
        
        'Build your custom anchor tag
        lbPrev.Text = "<a href=" & chr(34) & _
                      "thispage.aspx?page=" & _
                      labelPos - 1 & chr(34) & ">&lt; Prev </a>"

        'Get the number of controls in the Pager and 
        'subtract 1 from the number as it is 0 based
        Dim endPagingIndex As Integer = (Pager.Controls.Count - 1)

        'Insert "< Prev" page link if the Datagrid 
        'is on a page other than the first page listed in the Pager
        If (labelPos > 0) Then
            endPagingIndex += 1

            'Ad the control to the Pager at the start 
            'of the Pager which is has an index of 0
            Pager.Controls.AddAt(0, lbPrev)
        End If

        y = CType(sender, DataGrid).PageCount - 1

        'Insert "Next >" page link if the Datagrid is 
        'on a page other than the last page available in the Pager
        If (labelPos < y) Then
            'Ad 1 to the number of controls in the Pager 
            'as we want to add the control to the end of the Pager
            endPagingIndex += 1

            'Ad the control to the Pager at the start 
            'of the Pager which is has an index of "endPagingIndex"
            Pager.Controls.AddAt(endPagingIndex, lbNext)
        End If

        'Additional Pager text added to a Label control
        Dim InfoText As Label = New Label
        InfoText.ID = "it"
        InfoText.Font.Bold = True
        InfoText.Text = "Page: "

        'Ad the new Label as the final step in the process 
        'else you will have to take the new control in the Enumerator
        'into account. Too much work, just do it at the end!
        'Insert the Label control as the first control of the Pager.
        Pager.Controls.AddAt(0, InfoText)    
    End If
End Sub

The Page_Load event is responsible for catching the page number passed to the form via the page parameter in the querystring. You now have the opportunity to either let the DataGrid do the data paging, or you can customise your database querystring to limit the returned results to only include the necessary records.

If using MySQL as your data engine, you can use the LIMIT function to restrict the number of records returned. E.g., "SELECT * FROM SampleTable WHERE SampleField like ='sampleQuery%' LIMIT " & intP * 25 & ", 25". If using a similar query, you will only receive 25 records starting at intP * 25. You can therefore limit the size of the data returned and speed up your page.

The Page_Load event

Private Sub Page_Load(ByVal sender As System.Object, _
          ByVal e As System.EventArgs) Handles MyBase.Load
    'The value of the page number will be stored in intP
    Dim intP as Integer 

    'Get the value of the QueryString for the "page" parameter
    If Not Request.QueryString.Item("page") Is Nothing Then
        intP = Request.QueryString.Item("page").ToString.Trim

    'If using custom paging, create a data connection and 
    'pass it the value of intP
    'and do the paging in the database query. In MySQL, 
    'use the LIMIT function to restrict the number of records returned.
    'If not using custom paging, just continue as usual 
    'and let the Datagrid select the relevant records to display.
    CustomGrid.DataSource = YourDataSet

    'Bind the Datagrid to the new Datatable/Dataset
    CustomGrid.DataBind()

    'Set the CurrentPageIndex of the Datagrid manually
    CustomGrid.CurrentPageIndex = intP
End Sub

As paging is now manually handled, you can disable the Viewstate for the DataGrid. Well, that is if you are only using the Viewstate so that you could page through the DataGrid. If you need to be able to edit the grid, then you still need the Viewstate enabled.

By implementing custom paging, you can achieve three goals:

1. Disable the Viewstate for the DataGrid and thereby save bandwidth.
2. Get more pages indexed by search engines.
3. Implement custom paging using customised SQL queries and thereby lower the database time needed to page through the query.

Points of interest

I hate to use the Goto function while coding, but this is the first time that I did not have an alternative than to use Goto. The pager is not well documented, and I had to make due with the limited knowledge that was available. When changes are made to the enumerator, you have to reload the enumerator and therefore start from the beginning of the enumerator, therefore the use of the Goto.

This article is based on the articles of Munsifali Rashid and Razi Bin Rais regarding customising the DataGrid pager.

Working sample

This article was born out of necessity as I had to find a way to limit database connection time and get more pages indexed. You can see a working example of the code on the search page of SearchForMore.Info when you do a search. View the links in the pager at the bottom of the DataGrid.