[ASP.NET] Site Navigation – Overview

In html only pages, the anchor <a> element is how you can provide links to other pages or sites. The image button is just the <img> element in the <a> element. In ASP.NET, there are many ways you can navigate from one page to another. Navgation is not just a link or a menu. You can even redirect user’s request to another page  in a server and the user will not notice it.  

1. Client-side Navigation

The client-side navigation uses client-side code (JavaScript) or hyperlink markups(<a> tag).

ASP.NET provides the web server control “HyperLink” to create a navigation link.

– Properties –

  • NavigateUrl: url to link
  • ImageUrl: path to the image
  • Text: text caption; If both the Text and ImageUrl properties are set, the ImageUrl property takes precedence
  • Target: the target window or frame (_blank: a new window, _parent: the frameset parent, _search: the search pane, _self: the frame with focus, _top: the full window)
<asp:HyperLink ID="googleLink" runat="server"
  Text="Google" NavigateUrl="http://www.google.com"></asp:HyperLink>
<br />
<asp:HyperLink ID="homeLink" runat="server"
  Text="Home" NavigateUrl="~/Default.aspx"
  ImageUrl="~/Image/smile.gif"></asp:HyperLink>

The “HyperLink” controls will be rendered like this:

<a id="googleLink" href=http://www.google.com">Google</a>
<br />
<a id="homeLink" href="../../Default.aspx"><img src="../../Image/smile.gif" alt="Home" /></a>

Another client-side navigation can be done using JavaScript. You can do it by changing the “document” object’s “location” property.

<input id=”linkToHome” type="button" value="Go to Home" onclick="homeLink_onClick()" />
function homeLink_onClick() {
  document.location("Default.aspx");
}

2. Cross-page Postback

By default, ASP.NET pages postback to the current page itself with the form data. But you can configure a page to postback to a different page. It is different from just navigate to another page using the “HyperLink” control or <a> tag. All form data is transferred to a new page.

Let’s find out how to configure cross-page postback.

  • Use <asp:Button> control and set the “PostBackUrl” property (defined in the “IButtonControl” interface)
  • Target page(called as a processing page) receives the posted data from the first page
  • The previous page’s data is available using the processing page’s “Page.PreviousPage” property
  • You can get the control object using the “FindControl()” method and cast it to the appropriate type
Name: <asp:TextBox ID="nameText" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="okBtn" runat="server" Text="OK"
  PostBackUrl="~/Chapters/Ch13/Page2.aspx" />
<asp:Label ID="greetLabel" runat="server"></asp:Label>
// Page2.cs
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (PreviousPage != null)
        {
            TextBox tb = (TextBox)(PreviousPage.FindControl("nameText"));
            greetLabel.Text = "Hello, " + tb.Text;
        }
    }
}

The “IsPostBack” property does not catch the cross-page postback.

3. IsPostBack vs IsCrossPagePostBack

The “Page” object presents you two similar looking properties:  “IsPostBack” and “IsCrossPagePostBack“. If you use cross-page postback, you should be careful of each property values.

Let’s run the following code in the “Page2.aspx”.

protected void Page_Load(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(string.Format("IsPostBack: {0} <br />", IsPostBack));
    sb.Append(string.Format("IsCrossPagePostBack: {0} <br />", IsCrossPagePostBack));
    if (PreviousPage != null)
    {
        sb.Append(string.Format("PreviousPage.IsPostBack: {0} <br />", PreviousPage.IsPostBack));
        sb.Append(string.Format("PreviousPage.IsCrossPagePostBack: {0} <br />", PreviousPage.IsCrossPagePostBack));
    }
    greetLabel.Text = sb.ToString();
}

At first, go to the “Page1” and click the button for the cross-page postback. The result is “False, False, True, True”. Therefore you can only check the cross-page postback only throgh the “PreviousPage” object.

Secondly, just type the address of “Page2” in the address bar and watch the result. “False, False”. The “PreviousPage” object is null.

4. Accessing Posted Data as Strongly Typed Data

Most developers do not like castings. The “FindControl()” method does the job but you want more – strongly typed properties. You can do it.

  • Create a public property on the first page
  • Add a “PreviousPageType” directive on the processing page and set the “VirtualPath” to the first page
  • The processing page’s “PreviousPage” property can access the stronly-typed properties in the first page
// Page1.aspx.cs
public string MyName { get { return nameText.Text; } }
<%@ PreviousPageType VirtualPath=”~/Page1.aspx” %>
// Page2.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (PreviousPage != null)
        {
            greetLabel.Text = "Hello, " + PreviousPage.MyName;
        }
    }
}

5. Client-side Browser Redirect

The “Response.Redirect()” method sends a message to a browser, requesting for a different web page.

  • The redirect is not PostBack
  • The redirect is accomplished by sending a HTTP response code 302 to the browser
  • The “Page.PreviousPage” property does not get populated.

6. Server-side transfer

It is server-side’s request to a different page using the “Page.Server.Transfer()” method. It is like a cross-page postback. Even you can access previous page.

  • You can access the sender page’s information using the “Page.PreviousPage” property
  • Users do not see the new url on the address box. Therefore there will be a problem with a bookmark.

Let’s change the “Page1” and “Page2” to use the server-side transfer and check the “IsPostBack” and the “IsCrossPagePostBack” properties.

– Page1.aspx –

Name: <asp:TextBox ID="nameText" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="okBtn" runat="server" Text="OK" onclick="okBtn_Click"  />
public string MyName { get { return nameText.Text; } }

protected void okBtn_Click(object sender, EventArgs e)
{
    Server.Transfer("~/Page2.aspx");
}

– Page2.aspx –

<%@ PreviousPageType VirtualPath="~/Page1.aspx" %>
...
<asp:Label ID="statusLabel" runat="server"></asp:Label>
protected void Page_Load(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(string.Format("IsPostBack: {0} <br />", IsPostBack));
    sb.Append(string.Format("IsCrossPagePostBack: {0} <br />", IsCrossPagePostBack));
    if (PreviousPage != null)
    {
        sb.Append(string.Format("PreviousPage.IsPostBack: {0} <br />", PreviousPage.IsPostBack));
        sb.Append(string.Format("PreviousPage.IsCrossPagePostBack: {0} <br />", PreviousPage.IsCrossPagePostBack));
    }
    statusLabel.Text = sb.ToString();
}

Now you can see the browser still shows the “Page1.aspx” and the result is “”False, False, True, False”. Which means that it is not the cross-page post back.

In general, you can find out how the page is requested like this:

protected void Page_Load(object sender, EventArgs e)
{
    if (PreviousPage != null)
    {
        if (PreviousPage.IsCrossPagePostBack)
        {
            // A cross-page postback triggered by a buton
        }
        else
        {
            //  transferred by Server.Transfer()
        }
    }
    else
   {
        if (IsPostBack)
        {
             // posted-back from the same page
        }
        else
        {
            // the first direct request
        }
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s