Web Page Source Transmitter: Get The Page As The Customer Sees It

• Download control source files - 17.3 KB

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;
      //store htmlSource to DB, file etc
      //...
    }
  }
}

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);
  }

  /// <summary />
  /// Returns HTML source of the page before submit.
  /// </summary />
  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()
  {
    //Register script from .js file depends on current compile mode 
    //(debug/release) of web application
    Page.ClientScript.RegisterClientScriptResource(GetType(), 
        Utils.GetJSResourceCompilationMode
        ("PauSoft.Web.Resources.Scripts.HtmlSourceTransmitter.js"));

    //Register action, that will be executed on Form OnSubmit event
    string scriptName = string.Format(CultureInfo.InvariantCulture, 
                        "{0}_OnSubmit", ClientID);
    string scriptText = "FillTransmitterField()";
    if (!Page.ClientScript.IsOnSubmitStatementRegistered
                        (GetType(), scriptName))
      Page.ClientScript.RegisterOnSubmitStatement(GetType(), 
                        scriptName, scriptText);

    //Register hidden field, that will keep HTML source of the page
    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:

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

1. HtmlSourceTransmitter does not work well with TabStrip control from Microsoft IE WebControls library.
2. 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.
3. 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

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)