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.
Create the Code
To post back manually in response to the onSelectedIndexChange
event, follow these steps.
- Create a Web Application, and then put the TreeView control into an .aspx page.
- In the .aspx page, set the AutoPostBack property of the TreeView control to False.
- In the Nodes property of TreeView, click the Collection elipsis (...) button, and then add some nodes and children to the
TreeView nodes collection.
- 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()">
- 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 & _
"</script>"
Page.RegisterClientScriptBlock("InitTree", strScript)
End Sub
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');
}
}
// -->
</script>
- The first line of the new onSelectedIndexChange function,
if (event.oldTreeNodeIndex != event.newTreeNodeIndex)
this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex);
- Setting AutoPostBack for the TreeView to True renders the following code in HTML:
window.setTimeout('__doPostBack(\'TreeView1\',\'\')', 0, 'JavaScript');
string strRef = Page.GetPostBackEventReference(TreeView1);