Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 3 Sep 2007
Rate this:
Please Sign up or sign in to vote.
This article describes a control that allows getting a web page as the customer sees it. E.g., the developer can store the copy of the page as it was before an exception and restore the page when it's required.

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

Design-time view of the 'HtmlSourceTransmitter' control

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

  /// <span class="code-SummaryComment"><summary />
</span>
  /// Returns HTML source of the page before submit.
  /// <span class="code-SummaryComment"></summary />
</span>
  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:

Screenshot of first web page

Fig. 1. Screenshot of the first sample web page

Result of HtmlSourceTransmitter work for first web page.

Fig. 2. View of the first sample page that has been got using HtmlSourceTransmitter

Screenshot of second web page

Fig. 3. Screenshot of the second sample web page

Result of HtmlSourceTransmitter work for second 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

  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

License

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

Share

About the Author

Max Paulousky
Team Leader www.maxpaulousky.com
Belarus Belarus
Max currently is a senior developer at software company.
 
He lives with his wife Tatiana and son Zakhar (4 yrs) in Minsk, Belarus, but they dream to live in New Zealand.

Comments and Discussions

 
GeneralHtmlSourceTransmitter1.HtmlSource is always empty PinmemberK32119-Sep-08 9:25 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberMax Paulousky21-Sep-08 21:41 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberK32122-Sep-08 2:57 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberMax Paulousky25-Sep-08 2:35 
Really, I didn't get any email. Could you please send me it again on belarus_max (at) tut (dot) by?
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberK32125-Sep-08 7:49 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberMax Paulousky26-Sep-08 1:52 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberK32129-Sep-08 2:03 
GeneralRe: HtmlSourceTransmitter1.HtmlSource is always empty PinmemberMax Paulousky29-Sep-08 5:34 
GeneralNice Idea... Pinmemberraam_kimi8-Jan-08 22:21 
GeneralRe: Nice Idea... PinmemberMax Paulousky9-Jan-08 0:15 
GeneralNice one !!! PinmemberAbhijit Jana2-Jan-08 4:25 
GeneralScreen Shot to Mail Pinmemberpganathe8-Oct-07 22:30 
GeneralRe: Screen Shot to Mail PinmemberMax Paulousky9-Oct-07 2:59 
GeneralRe: Screen Shot to Mail Pinmemberpganathe9-Oct-07 3:13 
GeneralRe: Screen Shot to Mail PinmemberMax Paulousky11-Oct-07 22:13 
GeneralScreen Shot to Mail Pinmemberpganathe11-Oct-07 22:24 
Generalwhy log all the extra html size PinmemberThanks for all the fish14-Sep-07 3:07 
GeneralRe: why log all the extra html size PinmemberMax Paulousky14-Sep-07 3:29 
GeneralPauSoft.Web.dll PinmemberMichael Sync3-Sep-07 20:41 
GeneralRe: PauSoft.Web.dll PinmemberMax Paulousky3-Sep-07 22:28 
GeneralRe: PauSoft.Web.dll PinmemberMichael Sync3-Sep-07 23:13 
GeneralRe: PauSoft.Web.dll PinmemberMax Paulousky3-Sep-07 23:17 
GeneralGreat Idea Pinmembermerlin9813-Sep-07 3:41 
AnswerRe: Great Idea PinmemberMax Paulousky3-Sep-07 4:39 
GeneralRe: Great Idea PinmemberBen Daniel3-Sep-07 12:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 3 Sep 2007
Article Copyright 2007 by Max Paulousky
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid