Sankarsan Bose

Normally we use the term postback when an ASP.NET page submits it's content back to that page itself.But there can be situation when a page needs to submit it's content to a different target page.This is known as cross page postback.In this post we will discuss about how to handle and implement cross page postback scenario.

Now to make a page postback to another page we have set the PostBackUrl property as shown below:

<asp:Button ID="Button2" runat="server" Text="CrossPagePostback" PostBackUrl="~/TargetForm.aspx" />

After the content is submitted to the target url we need to retrieve the control values and properties of the page.To do this we have use the PreviousPage property of the Page class as shown below.The PreviousPage maintains a reference to the instance of the source page.

Label1.Text = "Crosspage Postback with value :" + (Page.PreviousPage.FindControl("TextBox1") as TextBox).Text;

Suppose we have a public property defined in the source page as shown below:

public string ScreenID { get; set; }

If we want to access this property in the target page then we need to specify the type of source page in the @PreviousPageType directive of the target page:

<%@ PreviousPageType VirtualPath="~/TargetForm.aspx"  %>

Then we can access the property in target page as follows:

Label1.Text = PreviousPage.ScreenID;

Like the IsPostBack property used to identify as post back we can identify a cross page postback using the IsCrossPagePostBack as shown below:

if(Page.PreviousPage.IsCrossPagePostBack)

{

}

Now let us examine the HTML source of the page to understand how the cross page postback is initiated from the browser.From the click event of the button a JavaScript function called WebForm_DoPostBackWithOptions is invoked as shown below:

<input type="submit" name="Button2" value="CrossPagePostback" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button2&quot;, &quot;&quot;, false, &quot;&quot;, &quot;TargetForm.aspx&quot;, false, false))" id="Button2" />

This function accepts a WebForm_PostBackOptions function as parameter.The WebForm_PostBackOption accepts the following values as argument

• "Button2"  - Id of the control trigerring the event
• ""
• false
• ""
• "TargetForm.aspx" - Target page url.
• false
• false

But where is the code for this function.Now we look at the following extra lines of code emitted:

<script src="/WebResource.axd?d=ZhZ_K2lwE0H8HnJR9LeB3Q2&amp;t=633394762369896337" type="text/javascript"></script>

I typed the url of the script using it's src attribute in address bar and downloaded the axd file.On opening the file in notepad I found the definitions of the two functions mentioned above.

function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {
    this.eventTarget = eventTarget; //id of the control trigerring postback
    this.eventArgument = eventArgument; 
    this.validation = validation;
    this.validationGroup = validationGroup;
    this.actionUrl = actionUrl; //URL of the target page
    this.trackFocus = trackFocus;
    this.clientSubmit = clientSubmit;
}

//This function sets the target url
function WebForm_DoPostBackWithOptions(options) {
    var validationResult = true;
    if (options.validation) {
        if (typeof(Page_ClientValidate) == 'function') {
            validationResult = Page_ClientValidate(options.validationGroup);
        }
    }
    if (validationResult) {
        if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {
            theForm.action = options.actionUrl; // form action is set to target page url.
        }
        if (options.trackFocus) {
            var lastFocus = theForm.elements["__LASTFOCUS"];
            if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {
                if (typeof(document.activeElement) == "undefined") {
                    lastFocus.value = options.eventTarget;
                }
                else {
                    var active = document.activeElement;
                    if ((typeof(active) != "undefined") && (active != null)) {
                        if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {
                            lastFocus.value = active.id;
                        }
                        else if (typeof(active.name) != "undefined") {
                            lastFocus.value = active.name;
                        }
                    }
                }
            }
        }
    }
    if (options.clientSubmit) {
        __doPostBack(options.eventTarget, options.eventArgument);
    }
}