It would be really nice if somehow we can capture the entire HTML that is being sent to the browser. This will allow us to perform last second changes to the HTML. Fortunately, ASP.NET include Response Filters. Response Filters allows to intercept the response and give you the opportunity to alter the response. In this article we are going to create a ViewStateMover ResponseFilter which will move the ViewState from the top to the bottom of the page.

Introduction:

It would be really nice if somehow we can capture the entire HTML that is being sent to the browser. This will allow us to perform last second changes to the 
HTML. Fortunately, ASP.NET include Response Filters. Response Filters allows to intercept the response and give you the opportunity to alter the 
response. In this article we are going to create a ViewStateMover ResponseFilter which will move the ViewState from the top to the bottom of the page.

Why Moving the ViewState to the Bottom of the Page?

Technically there will be no speed advantage when the ViewState is moved at the bottom of the page. But the user will be able to see the page quicker since  
the ViewState is now loading after all the content of the page has been rendered.

Creating a Capital Response Filter:

Let's start with something simple! We are going to create a ResponseFilter which will capitalize the output sent out to the browser. The first thing you need  
to do is to create a class which inherits from the Stream object. Take a look at the following code:

We have removed some of the code for clarity. The above code gets the rendering HTML from the Stream and then capitalize the letters and finally attach it  
back to the stream.

The next step is to attach the ResponseFilter with the current ResponseFilter. Take a look at the code below to see how this is performed.

If you run the above code you will see that the HTML source of the page is capitalized. Take a look at the screenshot below:

 

If your page contains any text then it will also be capitalized.

Let’s move to something more interesting and practical which is moving the ViewState to the bottom of the page.

Creating the ViewStateFilter:

The idea behind the ViewStateFilter is simple. We will parse the HTML and find all the input elements. Then we will search for the VIEWSTATE element. We will take out the VIEWSTATE element and inject it before the end of the FORM tag.

First let’s populate a simple GridView control with a list of dummy Customers.

Run the above page and you will notice that the VIEWSTATE element is currently at the top of the page. This is the default action by ASP.NET framework. Now, let’s take a look at the ViewStateFilter “Write” method.

You will use the following code to attach the filter to the current request.

When the page is opened in the browser you will notice that the VIEWSTATE element is rendered at the bottom of the page.

 

Everything looks good and you have successfully implemented the VIEWSTATE element at the bottom of the page.

Unfortunately, this solution has flaws! Let’s increase the HTML generated by increasing the number of Customers to 250.

You will notice that when you bind 250 Customers or more to the GridView then the Filter will not work. The VIEWSTATE is not moved to the bottom of the page and stays at the top of the page.

The reason is very strange. The Filter only processes 28KB or 28672 bytes of data at a time. This means it has to make multiple filtration requests to process the entire request. This results in broken regular expressions and empty viewstate injection. The way to overcome this problem is to hold the entire HTML and ViewState in a variable.

Here is the “Write” method of the ViewStateFilter with the fix.

Basically, the _sb StringBuilder object is used to hold the value of the rendering HTML. Once, the filter completes its multiple passes the Regex expression is evaluated and the ViewState is injected at the bottom of the page.  



Creating HttpModule to Inject ViewStateFilter in all Pages of the Application:

Although we can use the Response.Filter = new ViewStateFilter(Response.Filter); line to inject the Filter into our ASP.NET Response but we need a better and more maintainable mechanism. Let’s create a simple HttpModule which will inject the filter in every request.

The code for the ViewStateMover module is shown below:

Now, we can easily inject the filter into every ASP.NET page request using a one line configuration in Web.config file.

Now, if you run our page the filter will be activated for all the pages in the web application.

Conclusion:

ASP.NET Response Filters provide an easy way to handle the HTML rendered to the browser. Filters also make it possible to perform any last moment alteration on the rendered HTML.

Related Topics:

Screencast: Introduction to Response Filters in ASP.NET

[Download Sample]

Update:

One of the readers pointed out that the code given holds the response until it is fully fetched. This will cause the buffering problems and the users will only able to see the page when the response is completly fetched.

Here it the update on the ViewStateFilter code.


UPDATE: Steven Smith just blogged about a new feature in ASP.NET 3.5 SP1 that moves the hidden fields to the bottom of the page using just a single line configuration.



You can check out the post here