Move viewstate to bottom of html

Well its the age-old question that has been answered many times I am sure but I aim to put a slight twist on it.

As always I had the request to create a piece of code to move the viewstate of a dotnet application from the top of the form tag to the bottom of the form tag. I have done this before but instead of find the piece of code it is usually easier and quicker to search for one that already exists in the big wide web.

So my initial search led me to  Scott Hanselman’s site with a good article that not only had  the implementation that I required but also an alternative execution that would run faster, RegEx vs String.IndexOf().

Now you can simply use this as is and it works fine but i wanted to go that little bit further as I looked into it more. For instance there is usually a <div> tag around the viewstate so I wanted this moving as well. Also on one of my sites, that uses Ajax, puts in even more html elements so I then had the idea of moving these as well. Now I have a number of items that will need moving and I thought that I could duplicate the code from Scott for each item. I then stopped all that nonsense and got my developers cap on and had a good think about the problem. Thinking about how .Net works the html that appear between the form tag and the first html tag that I have entered will all be generated by .Net. taking this into account I decided that all this code could be moved to the bottom of the html.

So taking this into account this is how I setup my project.

First create a new class in the App-Code folder called ‘PageOverride’ and alter the class so that it inherits ‘System.Web.UI.Page’, line 14, and your new file should look something like,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
///
/// Summary description for PageOverride
///
public class PageOverride : System.Web.UI.Page
{
	public PageOverride()
	{
		//
		// TODO: Add constructor logic here
		//
	}
}

Now we need to override the render code by adding a new method in which will give you this entire piece of code,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
/// <summary>
/// Summary description for PageOverride
/// </summary>
public class PageOverride : System.Web.UI.Page
{
	public PageOverride()
	{
		//
		// TODO: Add constructor logic here
		//
	}
 
	protected override void Render(System.Web.UI.HtmlTextWriter writer)
	{
		/// this function will remove all code after the form open tag up
		/// to the specified enpoint which in this case is the beginning
		/// of my html markup
 
		System.IO.StringWriter stringWriter = new System.IO.StringWriter();
		HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
		base.Render(htmlWriter);
		string html = stringWriter.ToString();
		int StartPoint = html.IndexOf("<form") + 6;
		StartPoint = html.IndexOf(">", StartPoint) + 1;
		if (StartPoint >= 0)
		{
			int EndPoint = html.IndexOf("<div id=\"wrap\">", StartPoint);
			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);
	}
}

The important line to look at inthe final piece of code is 37 as this is the line that looks for my first piece of html code. In this case it is looking for a div tag with id of ‘wrap’ i.e. ‘<div id=\”wrap\”>’. As you can see I have had to escape the double quotes with a backslash.

The final piece to the puzzel is changing your page to inherit this class which is done inside the code-behind,

1

public partial class MyPage : PageOverride

Now I know that there better ways to implement the code to make it automatically sort itself out by building it within a DLL and then implementing it within the web.config, but for what I do and it is highly possible that I may want to alter it at some point so its best being accessible at this point.