Calling Code-Behind Method from JavaScript

While this page is still popular I have blogged about an alternate method for sending data from client to server using Javascript. You may want to check that out while you are here.

It shouldn’t be too hard should it? You want to use some Javascript on the client-side to call a method on in the Code-Behind of your aspx page – how hard can that be? Surely it must be possible.

I was developing a DotNetNuke module (so the code below is VB.NET and not C#) which would allow the user to search for locations using Virtual Earth and store the latitude and longitude (as well as the zoom level) in a database.
 
The problem is that the Virtual Earth API is a Javascript (and hence Client-Side) technology and in the normal scheme of things cannot access .NET code on the server. So how do you do it? How do you get a Javascript function to call a Server-Side method – Is it even possible?
 
Well yes it is – and it ain’t that difficult either 🙂
 
Here is a sample that I used:
 
In the .aspx source code (actually in the <head> section of the page):
function geoLock()
{
    var loc = map.GetCenter();
    var args = loc.Longitude + ":" + loc.Latitude + ":" + map.GetZoomLevel();
    performGeoLock(args,"");
    return false;
}

function geoLockComplete(result)
{
    if(result = 1)
    {
      document.getElementById("geoLockResult").innerHTML = 'GeoLock Successful';
    }
    else
    {
      document.getElementById("geoLockResult").innerHTML = 'GeoLock Failed';
    }
}
I also had a button with the onclick event set to onclick=’geoLock()’
 
In the Code Behind I had the following:
 
After the Page/Class definition add the following interface implementation:
Implements System.Web.UI.ICallbackEventHandler
In the Page Load:
' Create Callback Reference
Dim cbReference As String
cbReference = Page.ClientScript.GetCallbackEventReference(Me, "arg", "geoLockComplete", "context")

' Create Callback Script
Dim callbackScript As String = ""
callbackScript += "function performGeoLock(arg, context) { " + cbReference + "} ;"
.
.
' Register the Script
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "performGeoLock", callbackScript, True)
You will also need to implement the RaiseCallbackEvent and GetCallbackResult methods.
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
    ' [Your Logic in Here]
    ' Need to Set Value to be passed back to Client Script
    result = GeoBlogController.performGeoLock(newGeoLock)
    ' Note: result is an Int32 with Page Level Scope
End Sub

Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
    ' Pass Back Info Value
    Return result
End Function

And that’s it.
 
When the user clicks the button the client-side geoLock() method is called.
 
It in turn creates an args variable (which in this case holds a colon separated list of values) and calls the performGeoLock() callback method.
 
The code in the Code Behind ‘RaiseCallbackEvent’ method is executed performing some logic and setting the value of a return variable that will be passed back to the client script via the GetCallbackResult method.
 
Finally the client side method specified in the CallBackReference (in this case geoLockComplete) is called and passed the return value from the Code Behind methods.
 
I hope you followed all that (easier to do than to describe) but if not then take a look at http://msdn2.microsoft.com/en-us/library/ms153103.aspx which provides both explanation and example.
 
As promised in the comments I’ve created a sample Visual Studio solution to demonstrate this code in action. Note that the sample project was written in VS2010 using C# (not VB.NET as above).
 

11 Comments

  1. Dave, THANK YOU SO MUCH!!! I have been crawling the web for DAYS looking for this. Code workings like a charm (after modifying for my environment). You’ve made me a happy man

  2. Thanks for that – just shows that there is more than one way to skin a cat.
    I’m hoping that VS2010/.NET4.0 will be making this a little easier but only time will tell I guess.

    (no cats were harmed in the writing of this comment)

  3. You might find this solution cheesy but here’s what I do:
    Create a tiny asp:button in some corner of the page and give it an OnClick function in the code behind.

    Then in javascript:

    var b = document.getElementById(“tinyButton”);
    b.click();

    The codebehind executes (BUT, probably wont return to the javascript)

  4. @Vaman: I’m looking to create a simple sample project to support this post (which may or may not help) – will upload once I’m done.

  5. I need to call a Code Behind Function which i will call upon the Confirmation of the Message Displayed.I’m finding Problem coding this..

    Dim NewScript As String
    Dim strAlert As String = “”

    strAlert &= “The Refund Amount for the Flight Cancellation is” & dblRefundAmount
    strAlert &= “nDo you want to continue with the Cancellation?”

    NewScript = “”
    NewScript &= “if(confirm(‘” & strAlert & “‘)){”
    ‘NewScript &= “‘” & GetFunction() & “‘;}”
    NewScript = NewScript & “”

    If (Not ClientScript.IsClientScriptBlockRegistered(“alert”)) Then
    ClientScript.RegisterClientScriptBlock(Me.GetType, “alert”, NewScript, False)
    End If
    Exit Sub

    In the Above Code need to call a Function or at least a button control event…

  6. Reviewing the code I noticed that the line that registers the script was missing. This has now been added to the Page_Load event handler

  7. Hmmm .. the code in the post was taken directly from a working application, i.e. not from memory, so I’m puzzled as to why it would not work for you.
    What is the error you are getting.?

    (Sorry for delay – been away on holiday)

  8. There is error on load
    // Define callback references.
    String cbReference1 = cs.GetCallbackEventReference(this, “arg”,
    “ReceiveServerData1″, context1.ToString());

Comments are closed.