NFE - Non Functional/Performance Engineering

Download UnlimitedQueryString.zip - 3.17 KB

Introduction

Query string is one of the primary parameter passing techniques for Web Application.

Query string has some limitation in terms of query string length; this length depends on the browser.

Opera supports ~4050 characters.

IE 4.0+ supports exactly 2083 characters.

Netscape 3 -> 4.78 supports up to 8192 characters.

Netscape 6 supports ~2000
[http://classicasp.aspfaq.com/forms/what-is-the-limit-on-querystring/get/url-parameters.html]

To handle the query string length limitation, there are few solutions –

using POST instead of GET,

passing by Cookies

Sending query string to the server by AJAX and adding to the session in the first step and fetching the query string from the session using some GUID concepts.

Here I am going to explain a best and stable solution for all the cases.

Background

We have three situations when we need to pass query string to the web page.

Opening a new window (http://msdn.microsoft.com/en-us/library/ms536651(VS.85).aspx)

Showing modal dialog (http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx)

Showing the URL in iFrame (http://msdn.microsoft.com/en-us/library/ms537627(v=VS.85).aspx)

Request Maximum Size can be configured on IIS Server configuration for Server side.
http://www.iis.net/ConfigReference/system.webServer/security/requestFiltering/requestLimits
[ Thanks : daveauld - http://www.codeproject.com/Members/daveauld ]

Using the Code

To solve this problem, I have come up with a simple solution using HttpHandler & Javascript.

What is HttpHandler? Read this - http://aspalliance.com/441
How to create an HttpHandler? Read this - http://support.microsoft.com/kb/308001

This solution contains 2 parts, first one is launching/showing the URL using the WindowManager.Js script object, and second part for passing the query string to the web page from HttpHandler.

The below work flow diagram shows internally how it’s working.

How to Implement

Attached sample code contain 2 files, first one is the script file WindowManager.Js, Second one is HttpHandler source code – PageTransfer.CS.

Steps to integrate:

Web.Config Changes.
Add this entry under system.web\httpHandlers Node.

<add verb="*" path="PageTransfer.axd" 

    type="ApplicationFrameWork.PageTransfer, ApplicationFrameWork"/>

 

     <!— type="ApplicationFrameWork.PageTransfer, AssemblyName"  -->

Add these 2 files in your project folder.

Include the script in your aspx page.

<script src=" WindowManager.js" language="javascript"></script>

Let pass your unlimited query string to your pages.

<html>

<head>

<script src=" WindowManager.js" language="javascript"></script>

</head>

<script language=javascript>

      function OpeniFrame()

{

      WindowManager.LoadFrame("iFrameName", 'WebForm1.aspx', 

          'name=elayaraja&Your=UnlimitedQueryString', 'Your Title')

}

 

function OpenWindow()

{

      WindowManager.OpenWindow ('WebForm1.aspx', 'Your Title','400px','500px',

          'name=elayaraja&Your=UnlimitedQueryString')

}

 

function OpenModalWindow()

{

      WindowManager.OpenModalWindow('WebForm1.aspx', 'Your Title','400px','500px',

          'name=elayaraja&Your=UnlimitedQueryString')

}

 

</script>

<body>

    <form id="form1" runat="server">

    <div>

      Open Window <input type=button value="Open" onclick="OpenWindow()" />

      Load Frame Page<input type=button value="Frame" onclick="OpeniFrame()" />

      Open Modal Dialog<input type=button value="Frame" onclick=" OpenModalWindow()" />

 

    </div>

 

    <iframe id="iFrameName" width="100%" height="300px" frameborder=1>

    </iframe>

 

    </form>

</body>

</html>

Introduction

Web Application is stateless. To maintain the state of the page we have many solutions like query string, session, hidden controls and more..

Hidden controls are primarily used to keep some kind of key value pairs for the page. To maintain multiple key value pairs, we need to have multiple hidden controls on the page and hidden control name will be used as key. Basically the concept behind the hidden control is sharing the values between server and client.

But sometimes single hidden control will be used for multiple values; it’s not a good way to do because of improper delimited character handling or data type conversions.

I have come up with the solution to maintain the states using a single hidden control and isolate the complication inside this component.

Background

This solution is like an enhancement of ViewState provided by Microsoft. Though it solves the purpose to retain the server side values, it is not possible to manipulate those values in the client side as it’s designed for handling the retaining of server side object.
URL : http://msdn.microsoft.com/en-us/library/system.web.ui.control.viewstate.aspx

ViewState Sample :

public partial class ViewStatePage : System.Web.UI.Page

{

     [Serializable]

     public class Employee

     {

         public string Name;

         public int Age;

     }



     private Employee currentEmployee;



     protected override void SavePageStateToPersistenceMedium(object state)

     {

         ViewState["CurrentEmployee"] = currentEmployee;

         base.SavePageStateToPersistenceMedium(state);

     }



     protected override void OnLoad(EventArgs e)

     {

         currentEmployee = ViewState["CurrentEmployee"] as Employee;

         base.OnLoad(e);

    }

}

Using the code

To solve this problem, I have created a Web Control in my one of old ASP.NET project called as ExtentedViewState Control. Here I have added some more advanced way to handle this problem.
Basically, this control will hold a collection object which will allow the user to add a key value pair. At the time of rendering of this web control, this will generate a single hidden control and holds the key value pairs as base 64 encoded values.
Once the page is loaded into the browser, this control uses a simple Javascript wrapper to allow the user to manipulate the key value pairs from the client side.
When the user submits the page, this Javascript wrapper will send these updated values as base 64 string to the server. In the server side, it will get parsed and object is built on the server side.

How to implement.

Here I have included a sample project in a more simplified way to avoid the hidden controls.

It contains 3 different files for avoiding the hidden controls, from the server side, I have created a simple object to work like ASP.NET ViewState object – named “CustomViewState.cs”

CustomViewState Class contains the implementation of server side key value pair accessing and manipulations. This object will be added as the property to the parent UI.Page class.
User can access the Key value pairs using the property as like the normal collections.

StateManager.js script file serve the same functionality of CustomViewState Class in Client side.

Step 1: Inherit your asp.net page class from FrameWorkBasePage
Step 2: Add your key/values using CustomViewState property of the current UI.Page.
Step 3: Use StateManager object in from client side to manupulate the key value pairs

Sample: Server Side

    public partial class _Default : ApplicationFrameWork.FrameWorkBasePage

 {

     protected void Page_Load(object sender, EventArgs e)

     {

         if (!IsPostBack)

         {



             int intvalue = 10;

             decimal decvalue = 10;

             DateTime dtvalue = DateTime.Now;

             DateTime dvalue = DateTime.Now.Date;

             bool bvalue = true;



             CustomViewState.SetValue("integer", intvalue);

             CustomViewState.SetValue("decvalue", decvalue);

             CustomViewState.SetValue("dtvalue", dtvalue);

             CustomViewState.SetValue("datevalue", dvalue);

             CustomViewState.SetValue("boolean", bvalue);



             CustomViewState.SetValue("strvalue", "Elayaraja");

         }



     }

 }

Client Side

<script language=javascript>



function AddViewState() {

 var key = document.getElementById('Textbox1').value;

 var value = document.getElementById('Textbox2').value;

 StateManager.Set(key,value, DataTypes.String);

}



function ShowViewState() {

 var key = document.getElementById('Textbox3').value;

 alert(StateManager.Get(key))

}



function Init()

{

 StateManager.Init();

 alert(StateManager.Get('strvalue'))

}

</script>





<html>

<body onload="Init()">



 <label>Key</label>

 <input type=text id="Textbox1" size = 10 />

 <label>Value</label>

 <input type=text id="Textbox2" size = 50 />



 <button onclick="AddViewState()">Add</button>

 <br />

 <label>Key</label>

 <input type=text id="Textbox3" size = 10 />

 <button onclick="ShowViewState()"> Show </button>

</body>

</html>

Download AvoidHidden.zip - 33.59 KB

NFE - Non Functional/Performance Engineering

Tuesday, August 31, 2010

Unlimited Query string - ASP.NET

Introduction

Background

Using the Code

How to Implement

Wednesday, August 25, 2010

Avoiding Hidden Controls – ASP.NET

Introduction

Background

Using the code

How to implement.

Sample: Server Side