Web applications without bugs - it is a myth.
Every developer has many problems when he should reproduce a customer's bug. Usually, the customer cannot provide enough information about conditions before an exception (field values he entered; page which was opened before an exception, etc.).
It will be very useful if the application can produce (restore) the source of the opened web page with the data entered, as it was before an exception and store it (e.g. into a database). In this case, the developer can get the source of the page (e.g. from the database), put it to an HTML file and open it in a browser. The developer will get a copy of the page as it was before the exception.
I implemented this functionality as a non-visual control.
When I started this project, I thought that I could use implementation of
IHttpModule to intercept the HTML source, that application would be sent to the client and it would be enough. But an AJAX-enabled application sends only part of the changed page to the client. In this case, I should merge full render and partial renders to get the actual state of the page - it is inconvenient.
Then, I decided to take another approach to this problem. I can gather the HTML source, changed fields, etc. on the client side and send it to the server!
Using the control
Adding the control to a web page is very simple. In VS.NET, you should select the control's DLL file (PauSoft.Web.dll) using 'Add/Remove Toolbox Items'. The control will appear in the toolbox and you can add it to a page.
Note: Only one instance of the control can be added to the Page or MasterPage.
The designer of the control is very simple.
At design-time, the developer has access to the
Enabled property. By default it is
true, but the developer can switch it to
false to turn off the functionality of the control (it can be useful to decrease the size of the HTTP request on production, when all bugs have been fixed).
If the developer has a master page in the application, he can add the control to the master page.
If the developer has a hierarchy of pages or master pages, he can add the control to the beginning of the hierarchy at run-time.
The following code describes how to use the control:
ASP.NET Master Page declaration
<%@ Register Assembly="PauSoft.Web" Namespace="PauSoft.Web.UI.Controls"
<psControls:HtmlSourceTransmitter ID="HtmlSourceTransmitter1" runat="server">
ASP.NET Master Page code-behind class
public partial class Site1 : System.Web.UI.MasterPage
protected void Page_Load(object sender, EventArgs e)
string htmlSource = HtmlSourceTransmitter1.HtmlSource;
Creating Control at Run-Time
There is no problem to create a control at run-time.
The following code will add one
HtmlSourceTransmitter on the page and propose an easy way to get access to the HTML source.
public partial class _Default : MyCustomPage
private HtmlSourceTransmitter _htmlTransmitter =
protected override void OnInit(EventArgs e)
/// Returns HTML source of the page before submit.
/// <span class="code-SummaryComment"></summary />
public string HtmlSource
How does it work?
There are some steps of an HTML source transmitting from a client to a server.
OnPrerender event, the control checks
Enabled property and registers scripts, if the property value is
public class HtmlSourceTransmitter : Control
protected override void OnPreRender(EventArgs e)
OnSubmit event on the client side, and the hidden field that will contain transmitting HTML code.
public class HtmlSourceTransmitter : Control
private void RegisterScripts()
string scriptName = string.Format(CultureInfo.InvariantCulture,
string scriptText = "FillTransmitterField()";
OnSubmit event, the
FillTransmitterField() function will be executed and it will generate an update script for the changed elements, add this script to
OnLoad of Body element and store the HTML source of the page to a hidden field and, finally, send data to the server (see "HtmlSourceTransmitter.debug.js" file).
The developer uses incoming information as he likes.
Below you will find examples of the control usage:
Fig. 1. Screenshot of the first sample web page
Fig. 2. View of the first sample page that has been got using
Fig. 3. Screenshot of the second sample web page
Fig. 4. View of the second sample page, that has been got using
You can compare screenshots and views - they are almost similar!
Who can use it?
In my opinion, almost all users are the same - they are forgetful. In this case, it is very useful to have a "screenshot" of the page before an exception. This control is useful for developers, who should catch server bugs, when users cannot describe in detail the situation before the bug.
Almost all of us have experienced the described situation and this control can help us to solve our problems!
HtmlSourceTransmitter does not work well with
TabStrip control from Microsoft IE WebControls library.
- This control stores only the HTML code of the displayed page and does not store external resources - images, scripts, cascading styles etc. Therefore, the developer should create an HTML file with the received source in the application folder to get the best result.
- The layout of the page, that has been got using
HtmlSourceTransmitter, can differ from the layout of original.
I am sure, there are some other things that need to be modified or some other functionality that needs to be added. So, please let me know.
Thanks to the following people who helped me:
- Vladimir Kuznetsov
- Yan Oreshchenkov
- Sergey Zyrianov
- Version 1.0 (2007-08-30) - Initial release