HOW TO: Manually Post Back for Specific Events in an .aspx Page Using Visual Basic .NET


This step-by-step article describes how to set up an .aspx page so that the HTML code that is generated will post back to the server in response to specific events of a control. For example purposes, this article uses the Internet Explorer Web Controls TreeView control.

The AutoPostBack Property

  • True. When AutoPostBack is True for a control, the control may post back to the server in response to events that you did not want to cause a postback.

    For example, setting AutoPostBack to True on the TreeView control causes a postback in response to these events: onExpand; onCollapse; onCheck; and onSelectedIndexChange.
  • False. By setting AutoPostBack to False, you post back manually in response to a specific event.
back to the top

Create the Code

To post back manually in response to the onSelectedIndexChange event, follow these steps.
  1. Create a Web Application, and then put the TreeView control into an .aspx page.
  2. In the .aspx page, set the AutoPostBack property of the TreeView control to False.
  3. In the Nodes property of TreeView, click the Collection elipsis (...) button, and then add some nodes and children to the
    TreeView nodes collection.
  4. Handle the onload event for the HTML page, and then call the initTree function. This client side function will be generated in the Page_Load event for the .aspx page.

    In the HTML view of the .aspx page, add a handler for the onload event to the body tag as follows:
    <body onload="initTree()">
  5. Add the following code from this Page_Load function to your own Page_Load function in the code-behind class for the .aspx file.
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Dim strTreeName As String = "TreeView1"
    Dim strRef As String = Page.GetPostBackEventReference(TreeView1)
    Dim strScript As String = "<script language=""JavaScript""> " & vbCrLf & _
    "<!-- " & vbCrLf & _
    "function initTree() { " & vbCrLf & _
    "" & strTreeName & ".onSelectedIndexChange = function() { " & vbCrLf & _
    "if (event.oldTreeNodeIndex != event.newTreeNodeIndex) " & vbCrLf & _
    "this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex & ',' & event.newTreeNodeIndex); " & vbCrLf & _
    "window.setTimeout('" & strRef.Replace("'", "\'") & "', 0, 'JavaScript'); " & vbCrLf & _
    "} " & vbCrLf & _
    "} " & vbCrLf & _
    "// --> " & vbCrLf & _

    Page.RegisterClientScriptBlock("InitTree", strScript)
    End Sub
back to the top

Explanation of the Code

How the Code is Developed

The code provided earlier in this article was developed using the following process:
  • An .aspx page was developed and AutoPostBack for the TreeView control was set to True.
  • The .aspx page was viewed in the Internet Explorer browser, and the source was saved to an .html file.
  • AutoPostBack for the TreeView control was set to False, and then the page was viewed again in the browser.
  • Comparing the two files and noting the differences helped produce the code provided earlier in this article.

More Information About the Code

  • The code from the Page_Load function in this article renders the following code in the browser:
    <script language="JavaScript">
    function initTree() {
    TreeView1.onSelectedIndexChange = function() {
    if (event.oldTreeNodeIndex != event.newTreeNodeIndex)
    this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex & ',' & event.newTreeNodeIndex);

    window.setTimeout('__doPostBack(\'TreeView1\',\'\')', 0, 'JavaScript');
    // -->
    The initTree function runs when the HTML page is loaded into the browser. The initTree function overrides the onSelectedIndexChange event of TreeView1 so that the onSelectedIndexChange event is added to the event queue for the page, and is then posted back to the server.
  • The first line of the new onSelectedIndexChange function,
    if (event.oldTreeNodeIndex != event.newTreeNodeIndex) 
    this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex);
    is taken directly from the original definition for the function as defined in the saved .html file.
  • Setting AutoPostBack for the TreeView to True renders the following code in HTML:
    window.setTimeout('__doPostBack(\'TreeView1\',\'\')', 0, 'JavaScript');
    Because the postback mechanism (in this case, __doPostBack) may change in the future, generate the function on the server by using the following code:
    string strRef = Page.GetPostBackEventReference(TreeView1);
    The postback event reference is then used in Page_Load to generate the PostBack event on the client.
back to the top


For additional information, click the following article numbers to view the articles in the Microsoft Knowledge Base:
305140 INFO: ASP.NET Roadmap

319441 HOW TO: Dynamically Add Nodes to a TreeView WebBrowser Control by Using Visual Basic .NET

back to the top

ID articolo: 328923 - Ultima revisione: 04 giu 2009 - Revisione: 1