Managing ViewState through Aspire

16-Dec-04 (Created: 16-Dec-04) | More in 'Howto-Advanced'

Managing ViewState through Aspire

What is view state?

when you are working with web forms on a web browser, what the user types in on a form is called view state. If you were to return back to the form from the server side, you don't want the user to loose that data and reenter again. The process of managing that interaction is called view state management.

Basic principles

Aspire provides two java script functions to manage the view state of a form. The first function is called when you post the form to server side. This function will return the values entered into the form as a concatenated string values. This information is sent along with the post to the server side in a user defined parameter such as "fieldValues" or "viewstate". The server side will return this value back to the browser when the page is reloaded. On load, you will call the second javascript funtion to populate the user entered fields.

Include the following javascript file


<script src="/your-web-app/js/genericedits1.js"></script>

An example submit


/*
*********************************************************************
* createUser
*********************************************************************
*/
function createUser()
{
    //Make sure the following fields are mandatory
	if (validateRequired(mainform,"userIdTextBox,passwordTextBox" == false)
	{
		return;
	}
	
    //Example of doing specific validations
	if (mainform.passwordTextBox.value != mainform.rPasswordTextBox.value)
	{
		alert("Both password fields should have the same value");
		return;
	}
	
	//Collecting view state
	fieldValues = getAllFieldValues(mainform);
	
	//Set the view state as one of the fields
	mainform.fieldValues.value = fieldValues;
	
	//submit the form
	mainform.action="/akc/servlet/UpdateServlet";
	mainform.submit();
}

Setting the view state back on page load


function onLoadFunction()
{
	fieldValues = "{{fieldValues}}";
	if (fieldValues != "")
	{
		setFieldValues(mainform,fieldValues);
	}
}

See how the getAllFieldValues and the setFieldValues are used in conjunction to accomplish the view state. There is another variation of the getAllFieldValues called getFieldValues that allows you to selectively control the view state. See the javascript file to see what additional arguments it takes.

Returning the state from the server side


###################################
# CreateUser
###################################

request.CreateUser.classname=com.ai.db.DBPreTranslateArgsMultiRequestExecutor
request.CreateUser.db=reportsDB
request.CreateUser.query_type=update
request.CreateUser.request.1=RealCreateUser
request.CreateUser.request.2=CreateNewsFolder
request.CreateUser.request.3=CreateDefaultFolder

#
#Redirection
#
request.CreateUser.redirectURL=/akc
request.CreateUser.failureRedirectURL=\
/akc/display?url=CreateUserURL&fieldValues={fieldValues}&result=error

See how the server side failure redirection uses the view state of "fieldValues" to send it back to the client for population.

Implications of Client side and server side redirectors

By default Aspire uses client side redirector. This means only the data that is specified on the redirect urls is sent to the client browser. The client side redirection allows a natural feel for the end user as the end user can perform "refresh" and "back" buttons with a much greater level of immunity. But it has limitations when it comes to form processing. As you can see above if the view state is large then all those values will be sent to the server using a "get". For large data sets Aspire allows a slightly unnatural "serverside" redirect to get around that issue. This will be documented in a separate article.