Wednesday, March 21, 2012

UpdatePanel and force postback from button

Hello there!

To be short:

I have AJAX Updatepanel on the page. UpdatePanel contains TreeView and a button. You click button - and the tree gets populated.

So I wanted to add a little bit of animation to the tree - so user actually sees not the whole tree after the postback, but actualy the process of adding nodes to it:)

My approach is:

------------------------------

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

If IsPostBack() =TrueThen

PopulateTreeView()

EndIf

EndSub

PrivateSub PopulateTreeView()

If treeView.Nodes.Count > 5Then

ExitSub

EndIf

Dim treeNodeAsNew TreeNode("Node" & treeView.Nodes.Count.ToString())

treeView.Nodes.Add(treeNode)

System.Threading.Thread.Sleep(100)

Dim scriptAsString ="<script language='javascript'>document.getElementById('" & Button1.UniqueID &"').click();</script>"

ScriptManager.RegisterStartupScript(Me.UpdatePanel1,GetType(String),"PostBack", script,False)

EndSub

------------------------

After the button is clicked, node is added, then another click is generated via javascript andScriptManager.RegisterStartupScript so another postback will be forced and another node added and so on until we have 5 nodes.

And ofcourse problem is thatjavascript click() andScriptManager.RegisterStartupScript do not do postback :) hehe

BUT:

Dim script As String = "<script language='javascript'>document.forms[0].submit();</script>" works just fine. But it updates the whole page, not just my updatepanel

Do you guys see anything I'm doing wrong?

TreeView controls are not currently supported in an UpdatePanel, so you may not be able to do that.


What do you mean? As I said it work just fine when the whole page receives postback - nodes shows one by one. I just want to get rid of flickering with the help of Updatepanel


http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx

The UpdatePanel doesn't support partial postbacks with several controls, including TreeView. Check the section 3/4 down that page titled "Controls that are not compatible with UpdatePanel controls."


Well - I have a treeview inside UpdatePanel, it populates just fine, i can open and close nodes - what is incompatable then?


The part that isn't working for you. The partial postbacks.

Population is happening on full postbacks. The open/close operations are client side on the TreeView, so they would work without partial postbacks occurring.


I don't really care about that right now. All I care is if it is possible to force partial postbacks in updatepanel for now.


Try using the _doPostBack() method (one _, not two; for the async version) in your script registration. Something like:

Sys.WebForms.PageRequestManager.getInstance()._doPostBack('Button1', '')


Thank you for _doPostBack with one "_", this is new info for me.

I finally managed to get my little piece of code to work like that:

PrivateSub AddNode()

If treeView.Nodes.Count > 10Then

ExitSub

EndIf

Dim treeNodeAsNew TreeNode("Node" & treeView.Nodes.Count.ToString())

treeView.Nodes.Add(treeNode)

RefreshUpdatePanel()

Threading.Thread.Sleep(100)

EndSub

PrivateSub RefreshUpdatePanel()

Dim scriptAsString ="<script language='javascript'>" & Button1.ClientID &".click();</script>"

ScriptManager.RegisterStartupScript(Me.Page,GetType(String),"Refresh", script,False)

EndSub

ProtectedSub Button1_Click1(ByVal senderAsObject,ByVal eAs System.EventArgs)

AddNode()

EndSub

Important note: this works if Button1 is aasp:LinkButton, not asp:Button

So now it looks really nice - you click Button1, and it adds nodes one after another so user actually sees the process of building the tree. And no flickering 'cause it sits on UpdatePanel:)

I guess it will work with other controls as well, not onlyTreeView


You can probably make it work with a Button if you change RefreshUpdatePanel() to something like this:

Dim script As String = String.Format("Sys.WebForms.PageRequestManager.getInstance()._doPostBack('{0}', '');", Button1.ID)

ScriptManager.RegisterStartupScript(Me.Page, GetType(String),"Refresh", script, True)


No comments:

Post a Comment