Mixing your javascript into ajax extensions

Posted on March 13, 2007. Filed under: Uncategorized | Tags: , , |

After you start working deep in asp.net ajax extensions, you might sometimes need to write some of your additional javascript codes, and you will need them to integrate with the ajax extension system.

For example, suppose I need to populate a GridView control by doing an ajax callback, say with a Button click. I have the GridView in a <DIV style=”position:absolute;”> element. I want to show the DIV layer after the GridView is populated at the position where button was clicked.

Sounds simple and the old story isn’t it? But if you think little more, you might find this little interesting, because for this situation you will need to write some of your own javascript code before doing ajax callback and also after the completion of callback.

So here is my simple approach:

1. First I create the GridView control inside the DIV layer. The details of GridView in this post is not necessary. I also create the required button, and I put all of them in UpdatePanel.

<asp:UpdatePanel id=”upnlMain” runat=”server”>

<ContentTemplate>

<div id=”divLayer1″ style=”position:absolute;display:none;”>
<asp:GridView id=”GridView1″ runat=”server”></GridView>
</div>

<asp:Button id=”btnShowGrid” runat=”server” Text=”Show Grid” OnClick=”btnShowGrid_Click” OnClientClick=”return ShowGrid_Start(event);” />

</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnShowGrid” EventName=”Click” />
</Triggers>

</asp:UpdatePanel>

Note that I have used OnClientClick event for the button, to have javascript codes to execute before the ajax call is made, I will explain the javascript function ShowGridClick() a little later.

2. Now, in the code behind I write following btnShowGrid click handler:

Protected Sub btnShowGrid_Click(ByVal sender As Object, ByVal e As EventArgs)
‘ populate the GridView here.

ScriptManager.RegisterStartupScript(btnShowGrid, btnShowGrid.GetType, “key”, “ShowGrid_End();”, True)
End Sub

Here, the code calls the shared (static) method of the ScriptManager to register the javascript code, which will be executed in client side after the callback is completed. The only code is to call the javascript funtion ShowGrid_End().

3. So, as you might have understood the simple principle for our custom javascript codes: set required variables before ajax call in function ShowGrid_Start() and finally write final codes in function ShowGrid_End(). So here is the javascript code:

<script type=”text/javascript”>

function ShowGrid_Start(e) {
// store the mouse coordinates when button was clicked.
if (document.all) {
X = window.event.clientX + document.body.scrollLeft;
Y = window.event.clientY + document.body.scrollTop;
} else {
X = e.pageX;
Y = e.pageY;
}
document.GetElementById(“divLayer1”).style.left = X;
document.GetElementById(“divLayer1”).style.top = Y;

// return true to proceed with ajax call :: returning false would not trigger it.
return true;
}
function ShowGrid_End() {
document.GetElementById(“divLayer1”).style.display = “block”;
}

</script>

Read Full Post | Make a Comment ( 3 so far )

Liked it here?
Why not try sites on the blogroll...