How to move the viewstate to the bottom of your page source (C# ASP.NET 2.0, 3.0, 2.5, Visual Studio 2005, Visual Studio 2008)

Last week one of our new SEO bod, Ryan, asked Sel to move the viewstate to the bottom of the page source for the rest assured site. This helps to improve your SEOness as a lot of search engines only take so much of your source into account when spidering. So you really don't want to be feeding them 32k of base64 encoded gibberish when you could be giving them some beautifully crafted copy!

Andy did a couple of Google's and found some code which did the trick perfectly.

protected override void Render(System.Web.UI.HtmlTextWriter writer) {
    System.IO.StringWriter stringWriter = new System.IO.StringWriter();
    HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
 
    base.Render(htmlWriter);
    string html = stringWriter.ToString();
 
    int StartPoint = html.IndexOf("<input type="hidden" name="__VIEWSTATE");
 
    if (StartPoint >= 0) {
        int EndPoint = html.IndexOf("/>", StartPoint) + 2;
        string viewstateInput = html.Substring(StartPoint, EndPoint - StartPoint);
        html = html.Remove(StartPoint, EndPoint - StartPoint);
        int FormEndStart = html.IndexOf("</form>") - 1;
        if (FormEndStart >= 0) {
            html = html.Insert(FormEndStart, viewstateInput);
        }
    }
    writer.Write(html);
}

This was ace and so today when I was asked to upload some ammends to a couple more of our clients sites I thought I would implement this for the same reasons as it only takes two seconds.

While it worked a treat on one of the sites, the other was not so good. Here's what the page should look like:

And here's what I got:


What has happened is this. The un-styled UL that you can see at the top of the page is the top half of the left hand navigation you can see in the 1st picture. This menu was implemented as a .NET user control and as such is treated like a page all of its own. The reason this happened is because the page was rendering out via our overridden method, but the control was not. So the HTML that the control generated was getting written to the output stream before the HTML of the Page ("Page" in the .NET Class sense, not the "web page" sense).

So this got me thinking, wouldn't it be nice to be able to have a single piece of code that could be applied to a site once, regardless of UserControls, MasterPages or any other intricacy, that would take care of moving the ViewState on every page of the site!?!

The answer: Yes!
The solution: an HttpModule...

An HttpModule is a piece of code that sits between your web application and IIS on the web server. What this module is going to do is intercept every response our application makes to a client and then, if the response is a HTML (read ASPX) page, look for and move the ViewState.

To do this we will filter the response stream using the Response.Filter property. I'll leave the full code until the end of the post but here are the main bits.

1) Create a new class that implements IHttpModule.

public sealed class IHttpViewstateMover : IHttpModule {

2) Add an event handler to the current request. This even then decides weather to add our filter to the response stream based on if it is outputting HTML.

public void Init (HttpApplication context) {
    context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState);
}

void context_ReleaseRequestState (object sender, EventArgs e) {
    HttpResponse response = HttpContext.Current.Response;

    if ( response.ContentType == "text/html" ) {
        response.Filter = new ViewstateMover(response.Filter);
    }
}

3) If the entire HTML file has been output ...

Regex eof = new Regex("</html>", RegexOptions.IgnoreCase);

if ( !eof.IsMatch(strBuffer) ) {
    // code to follow...

re-position the viewstate and output the altered HTML to the stream.

    string finalHtml = _output_buffer.ToString();

    int StartPoint = finalHtml.IndexOf("<input type="hidden" name="__VIEWSTATE");
    if ( StartPoint >= 0 ) {
        int EndPoint = finalHtml.IndexOf("/>", StartPoint) + 2;
        string viewstateInput = finalHtml.Substring(StartPoint, EndPoint - StartPoint);
        finalHtml = finalHtml.Remove(StartPoint, EndPoint - StartPoint);
        int FormEndStart = finalHtml.IndexOf("</form>") - 1;
        if ( FormEndStart >= 0 ) {
            finalHtml = finalHtml.Insert(FormEndStart, viewstateInput);
        }
    }


    byte[] data = UTF8Encoding.UTF8.GetBytes(finalHtml);

    _output_stream.Write(data, 0, data.Length);

Simple as!

Now all you need to do us take the full code listing (below) and paste it into a C# file. Then add the following to your web.config inside the element:

So here's the code.

// Source code for IHttpViewstateMover.cs
using System;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;

/// <summary>
/// IHttpViewstateMover is a HttpModule that moves the viewstate
/// to the bottom of the HTML source to help with SEO
/// </summary>
public sealed class IHttpViewstateMover : IHttpModule {
    // the class is sealed so it cannot be inherited

    public void Dispose () {
        // nothing to dispose
    }

    public void Init (HttpApplication context) {
        context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState);
    }

    void context_ReleaseRequestState (object sender, EventArgs e) {
        HttpResponse response = HttpContext.Current.Response;

        // Uncomment the following line if you only want to recieve a single call to ViewstateMover.Write
        // context.Response.Buffer = true;

        if ( response.ContentType == "text/html" ) {
            response.Filter = new ViewstateMover(response.Filter);
        }
    }


    /// <summary>
    /// ViewstateMover is the workhorse of the IHttpViewstateMover
    /// </summary>
    private class ViewstateMover : Stream {
        // this class is private as it serves no real purpose outside this implementation

        private Stream _output_stream;
        private long _position;
        private StringBuilder _output_buffer;

        /// <summary>
        /// Creates a new instance of the ViewstateMover class
        /// </summary>
        /// <param name="input_stream">The HttpResponse.Filter to work with</param>
        public ViewstateMover (Stream input_stream) {
            _output_stream = input_stream;
            _output_buffer = new StringBuilder();
        }

        #region Stream Members

        public override bool CanRead {
            get { return true; }
        }

        public override bool CanSeek {
            get { return true; }
        }

        public override bool CanWrite {
            get { return true; }
        }

        public override void Close () {
            _output_stream.Close();
        }

        public override void Flush () {
            _output_stream.Flush();
        }

        public override long Length {
            get { return 0; }
        }

        public override long Position {
            get { return _position; }
            set { _position = value; }
        }

        public override long Seek (long offset, SeekOrigin origin) {
            return _output_stream.Seek(offset, origin);
        }

        public override void SetLength (long length) {
            _output_stream.SetLength(length);
        }

        public override int Read (byte[] buffer, int offset, int count) {
            return _output_stream.Read(buffer, offset, count);
        }
        #endregion

        public override void Write (byte[] buffer, int offset, int count) {
            string strBuffer = UTF8Encoding.UTF8.GetString(buffer, offset, count);

            // check for the closing HTML tag
            Regex eof = new Regex("</html>", RegexOptions.IgnoreCase);

            if ( !eof.IsMatch(strBuffer) ) {
                _output_buffer.Append(strBuffer);
            } else {
                _output_buffer.Append(strBuffer);
                string finalHtml = _output_buffer.ToString();

                // original code from http://www.hanselman.com/blog/MovingViewStateToTheBottomOfThePage.aspx
                int StartPoint = finalHtml.IndexOf("<input type="hidden" name="__VIEWSTATE");
                if ( StartPoint >= 0 ) {
                    int EndPoint = finalHtml.IndexOf("/>", StartPoint) + 2;
                    string viewstateInput = finalHtml.Substring(StartPoint, EndPoint - StartPoint);
                    finalHtml = finalHtml.Remove(StartPoint, EndPoint - StartPoint);
                    int FormEndStart = finalHtml.IndexOf("</form>") - 1;
                    if ( FormEndStart >= 0 ) {
                        finalHtml = finalHtml.Insert(FormEndStart, viewstateInput);
                    }
                }


                byte[] data = UTF8Encoding.UTF8.GetBytes(finalHtml);
                // write the page countents out to the user
                _output_stream.Write(data, 0, data.Length);
            }
        }
    }
}

As ever, the code is provided as is, with no kind of waranty so please test thoroughly before you place in a production environment. You use this code at your own risk.