Introduction
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.
Background
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.
Unfortunately, this solution does not allow including changed fields and other changes (e.g., caused by JavaScript) to the source. Moreover, I should parse HTML code off and set changed values. In my opinion, it is a complex solution.
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.
Designer
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.
Code
The following code describes how to use the control:
ASP.NET Master Page declaration
<%@ Register Assembly="PauSoft.Web" Namespace="PauSoft.Web.UI.Controls"
TagPrefix="psControls" %>
<psControls:HtmlSourceTransmitter ID="HtmlSourceTransmitter1" runat="server">
</psControls:HtmlSourceTransmitter>
ASP.NET Master Page code-behind class
public partial class Site1 : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
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 =
new HtmlSourceTransmitter();
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Controls.Add(_htmlTransmitter);
}
public string HtmlSource
{
get
{
return _htmlTransmitter.HtmlSource;
}
}
}
How does it work?
There are some steps of an HTML source transmitting from a client to a server.
Step 1
On OnPrerender
event, the control checks Enabled
property and registers scripts, if the property value is true
.
public class HtmlSourceTransmitter : Control
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (Enabled)
RegisterScripts();
}
}
Step 2
The control registers the JavaScript handler that will be executed on OnSubmit
event on the client side, and the hidden field that will contain transmitting HTML code.
public class HtmlSourceTransmitter : Control
{
private void RegisterScripts()
{
Page.ClientScript.RegisterClientScriptResource(GetType(),
Utils.GetJSResourceCompilationMode
("PauSoft.Web.Resources.Scripts.HtmlSourceTransmitter.js"));
string scriptName = string.Format(CultureInfo.InvariantCulture,
"{0}_OnSubmit", ClientID);
string scriptText = "FillTransmitterField()";
if (!Page.ClientScript.IsOnSubmitStatementRegistered
(GetType(), scriptName))
Page.ClientScript.RegisterOnSubmitStatement(GetType(),
scriptName, scriptText);
Page.ClientScript.RegisterHiddenField(transmitterFieldName, string.Empty);
}
}
Step 3
On 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).
Step 4
The developer uses incoming information as he likes.
Results
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 HtmlSourceTransmitter
Fig. 3. Screenshot of the second sample web page
Fig. 4. View of the second sample page, that has been got using HtmlSourceTransmitter
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!
Known Issues
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.
Acknowledgements
Thanks to the following people who helped me:
- Vladimir Kuznetsov
- Yan Oreshchenkov
- Sergey Zyrianov
History
- Version 1.0 (2007-08-30) - Initial release