July 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

ASP.NET 2.0 Client-Side Features: Bring Server-Side Power to the Client

  • May 23, 2005
  • By Thiru Thangarathinam
  • Send Email »
  • More Articles »

Cross Page Postback

Prior to ASP.NET 2.0, you could perform postbacks only to the same page. Now, ASP.NET 2.0 offers a new feature that allows you to post back to another ASP.NET page. You utilize this feature by setting the PostBackUrl property of a button control to the page that will handle the postback. Once in the second page, you can access the controls from the previous page by accessing the Page.PreviousPage property.

In the following code sample identified by the file PageOne.aspx, you have a button control that has its postbackurl property set to PageTwo.aspx. The page also contains a text box named Input:

<%@ Page Language="C#" %>

<html>
   <body>
      <form id="Form1" runat="server">
         <asp:TextBox ID="Input" RunAt="server" />
         <asp:Button ID="Button1" Text="Post to PageTwo"
                     PostBackUrl="PageTwo.aspx" RunAt="server" />
      </form>
   </body>
</html>

The code of the PageTwo.aspx file looks like the following:

<%@ Page Language="C#" %>

<script runat="server">
void Page_Load (Object sender, EventArgs e)
{
   if (Page.PreviousPage != null &&
       Page.PreviousPage.IsCrossPagePostBack)
   {
      TextBox input=(TextBox) Page.PreviousPage.FindControl("Input");
      Output.Text = "Hello, " + input.Text;
   }
}
</script>

<html>
   <body>
      <asp:Label ID="Output" RunAt="server" />
   </body>
</html>

Inside the Page_Load event, you check the Page.PreviousPage property to see whether the user has arrived to this page using cross postback. Once that check is done, you then reference the textbox control in PageOne.aspx file using the FindControl method of the Page.PreviousPage property. You then typecast the return value into a TextBox control and then retrieve its text value for display in the label control.

Reference Controls Using Strongly Typed Approach

In the previous example, you referenced the control from the PageOne.aspx file using a weakly typed approach, which requires you to typecast the return value of the FindControl method into a text box control. Although this approach works for most scenarios, sometimes you will want to reference the controls in the PageOne.aspx using a strongly typed approach. To do that, take the following steps:

  1. Expose the appropriate controls or their properties in the form of public properties from PageOne.aspx.
  2. In PageTwo.aspx, set the PreviousPageType directive at the top of the page. The declaration of the PreviousPageType directive is shown below:
  3. <%@ PreviousPageType VirtualPath="~/PageOne.aspx" %>

Once you set the PreviousPageType directive, you have strongly typed access to all the public properties in PageOne.aspx from PageTwo.aspx.

Setting Focus

In ASP.NET 1.x, setting focus to a control required some client-side script that would use JavaScript functions to assign focus to a control. With the release of ASP.NET 2.0, you now have the option of setting focus to appropriate controls on the page. You can accomplish this using either of the following techniques:

  • Invoke the Page.SetFocus() method passing in the name of the control.
  • Invoke the Focus() method of the actual control itself.

The following code example shows how to set the focus of the page to a TextBox control when the page is loaded in the browser:

<%@ Page Language="C#" %>

<script runat="server">
void Page_Load (Object sender, EventArgs e)
{
   Page.SetFocus ("UserName");
}
</script>

<html>
   <body>
      <form id="Form1" runat="server">
         <asp:TextBox ID="UserName" RunAt="server" />
      </form>
   </body>
</html>

Similar to setting page focus, you can also set multiple default buttons on a page. The next section shows how to accomplish this.

Set Multiple Default Buttons

As you might remember, one of the limitations of an ASP.NET page is that you can have only one form element with a runat=server attribute set in the page. To avoid this limitation, ASP.NET 2.0 provides a way to set multiple default buttons for a panel control. Using this feature, you can create multiple default buttons (one for each section of the page that is identified by a panel control), enabling a different default button depending on the panel control that has the current focus.

The following simple ASP.NET page shows how to accomplish this:

<%@ Page Language="C#" %>

<html>
   <body>
      <form id="Form2" runat="server">
         <asp:Panel ID="Panel1" DefaultButton="Button1"
                    RunAt="server">
            <asp:Button ID="Button1" RunAt="server"/>
         </asp:Panel>
         <asp:Panel ID="Panel2" DefaultButton="Button2"
                    RunAt="server">
           <asp:Button ID="Button2" RunAt="server"/>
         </asp:Panel>
      </form>
   </body>
</html>

To emulate default button and default focus behaviors for the overall form, you also can set the DefaultButton and DefaultFocus properties of the Form element to the ID value of the specific controls.

Handle Client-Side Click Events

In ASP.NET 2.0, the button control provides a new event called OnClientClick that you can use to execute some client-side script before posting back to the server. This approach provides a way to programmatically run client-side script when the button is clicked:

<%@ Page Language="C#" %>
<script runat="server">
   void Button1_Click(Object sender, System.EventArgs e)
   {
      Response.Write("Server-side click event fired too");
   }

</script>

<html>
<head>
<script language="javascript">
   function OnClientClickEvent()
   {
      alert('Client side click event fired');
      //To cancel the server side event, simply return false
      //from this method
   }

</script>
</head>
   <body>
      <form id="Form1" runat="server">
         <asp:Button ID="Button1"
                     OnClientClick="return OnClientClickEvent()"
                     Text="Click Me!" runat="server"
                     OnClick="Button1_Click"/>
      </form>
   </body>
</html>

As the code shows, the Button control has an event handler named OnClientClickEvent that displays an alert message when the button is clicked. From this function, you also can cancel the server-side event by returning false.

Maintaining Scrollbar Position

ASP.NET 1.x had a property named SmartNavigation that enhanced the user's experience of the page by eliminating the flash caused by navigation. ASP.NET 2.0 replaces the SmartNavigation property with the MaintainScrollPositionOnPostBack property.

Similar to SmartNavigation, you set this new property in the @ Page directive in the .aspx file or in the web.config file. When a user requests the page, the dynamically generated class sets this property.

Here is how you set this property at the page level:

<%@ Page Language="C#" MaintainScrollPositionOnPostBack="true" %>

To set this property for all the pages in a Web application, use the following entry:

<pages maintainScrollPositionOnPostBack="true"/>

Server-Side Power on the Client Side

The new client-side features introduced with ASP.NET 2.0 complement the powerful server-side programming model by exposing some of the server-side capabilities on the client side. The new client-side features, along with the new server-side features, make ASP.NET a powerful tool in a Web developer's arsenal.

Download the Code

To download the accompanying source code for the examples, click here.

About the Author

Thiru Thangarathinam has six years of experience in architecting, designing, developing, and implementing applications using object-oriented application development methodologies. He also possesses a thorough understanding of the software life cycle (design, development, and testing). He holds several certifications, including MCAD for .NET, MCSD, and MCP. Thiru is an expert with ASP.NET, .NET Framework, Visual C# .NET, Visual Basic .NET, ADO.NET, XML Web services, and .NET Remoting. Thiru also has authored numerous books and articles. Contact him at thiruthangarathinam@yahoo.com.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel