Post an ASP.NET WebForm with JavaScript between frames or into popup page

• Download ASP.NET Source - 15.6 Kb

Introduction

First, read "Post an ASP.NET form with JavaScript" By David Truxall before your read this article! It can understand for most develpers to have difficulty in using an ASP.NET postback process in .NET 1.x. In addition to David's article, This article describes how to post between frames or into popup, with a flexible javascript.

Background

The most web developers would think of posting a ASP.NET WebForm to another WebForm page(that is, through frame or into popup WebForm). In an enterprise web solution, we sometimes use framesets. I know that using framesets makes the performance worse. But if our customer want to use the framesets, what I have to do?

Using the code

I have a frameset which is horizontally divided into two frames. One has a frame name called "topFrame", the other "bottomFrame". When I input some text into TextBox and click a "Post to Bottom Frame" button on "topFrame", it posts the "bottomFrame" page. Additionally, When I click a "Post to Popup" button on "topFrame", it posts the Pop-up Page("PopupPage.aspx").

   - Description of script function :

• fnPostBackBetweenFrames(postBackFormString, frameName, actionUrl)
  : Post between frames
• fnPostBackBetweenPages(postBackFormString, actionUrl)
  : Post between pages
• fnPostBackPopUp(postBackFormString, windowName, actionUrl, vWidth, vHeight)
  : Post into popup page

// Client Script
function fnPostBackBetweenFrames(postBackFormString, frameName, actionUrl)
{
 var postBackForm = eval(postBackFormString);
 postBackForm.target = frameName;
 postBackForm.action = actionUrl;
 postBackForm.__VIEWSTATE.name = '';
 postBackForm.method = "post";
 postBackForm.submit();
 return false;
}

// Server Code
string bottomFunction = String.Concat("javascript:return fnPostBackBetweenFrames('document.", formName, "','bottomFrame','BottomForm.aspx');");
btnPostFrame.Attributes.Add("onclick", bottomFunction);

The fnPostBackBetweenFrames script function is used to post between frames and the server code(of behind class) is showing the code registering the onclick event function of "btnPostFrame" button.

// Client Script
function fnPostBackBetweenPages(postBackFormString, actionUrl)
{
 var postBackForm = eval(postBackFormString);
 // Without a target property, a page will be posted from current page to "actionUrl" page.
 postBackForm.action = actionUrl;
 // if you want to pass the "__VIEWSTATE" value to other page, give your favorite name to a name property.
 postBackForm.__VIEWSTATE.name = '';
 postBackForm.method = "post";
 postBackForm.submit();
 return false;
}

The fnPostBackBetweenPages script function is used to post between pages. this script is similar to the fn PostBackBetweenFrames function.

// Client Script
function fnPostBackPopUp(postBackFormString, windowName, actionUrl, vWidth, vHeight)
{
 var postBackForm = eval(postBackFormString);
 var wForm = ViewCenterPop("about:blank", windowName, vWidth, vHeight, 'no', 'no', 'no', 'no', 'no');
 postBackForm.target = windowName;
 postBackForm.action = actionUrl;
 postBackForm.__VIEWSTATE.name = '';
 postBackForm.method = "post";
 postBackForm.submit();
 wForm.focus();
 
 return false;
}

// Server Code
string popupFunction = String.Concat("javascript:return fnPostBackPopUp('document.", formName, "','PopPostBackWindow','PopupPage.aspx',300,300);");
btnPostPopup.Attributes.Add("onclick", popupFunction);

The fnPostBackPopUp script function is used to post into popup page and the server code(of behind class) is showing the code registering the onclick event function of "btnPostPopup" button.

private void Page_Load(object sender, System.EventArgs e)
{
  txaValues.Text = GetParamValue("txaContent");
}

If the data is posted to another WebForm, just handle Request.Form key with the customized function "GetParamValue(string sKeys)" (from BasePage.cs)

Points of Interest

The key point of this feature is the rename of "__VIEWSTATE". In VS 2005, we have a Cross-Page feature but I don't know that it solved the previous post processing problem. Sooner or later I will test the Cross-Page feature with VS 2005 and if needed, I will write other client script in relation to the post processing.