Passing variables with AjaxPro

Question

I found this AJAX .NET framework the other day, and so far I am enjoying working with it. However, one thing I can't figure out (the documentation is rather poor atm) is how to pass variables through the AJAX script. This is what I have so far:

//default2.aspx.vb
  <AjaxPro.AjaxMethod()> _
  Public Shared Function testSomething(ByVal value As String) As String
     Return value
  End Function
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     AjaxPro.Utility.RegisterTypeForAjax(GetType(Default2))
  End Sub

//default2.aspx
  <a href="#" onclick="doTest(1);">test something</a>
  <div id="temp" style="margin:15px 15px 0px 5px; padding:10px;"></div>
  <script type="text/javascript">
     function doTest(x){
         Default2.testSomething(doTest_callback,x)
     }
     function doTest_callback(res,x){
         alert(res.value);
         document.getElementById("temp").innerHTML = ">>>> " + x + " <<<<"
     }
  </script>

I have a couple of other test functions that work fine, and they do comparatively more complex operations. Anyone have any insight into how to pass variables with AjaxPro? Alternative methods are welcome as well!

Answer 1

It's been a while since I used that framework (version 6.9.22.2, so things may have changed a little) - have you had a look at the ASP.NET AJAX framework? I'm not sure how much work Michael's done on this since that came out - certianly his blog posts about it dried up around July 2007.

Anyway, if I understand your question right, you want to:

1. Pass a value to your server side method
2. Use that value somewhere in your call back method

Firstly, to pass variables to your methods, shouldn't they come before the name of the callback function?

To retrieve the initial values in the callback, I either:

1. Returned them as part of a JSON return object
2. Stored them in a variable outside the scope of both functions

Going with option 2, you'd have:

<a href="#" onclick="doTest(1);">test something</a>
<div id="temp" style="margin:15px 15px 0px 5px; padding:10px;"></div>
<script type="text/javascript">
   var initialValue;

   function doTest(x){
     initialValue= x;
     Default2.testSomething(x, doTest_callback)
   }

   function doTest_callback(res){
     alert(res.value);
     document.getElementById("temp").innerHTML = ">>>> " + initialValue + " <<<<"
   }
</script>

The main downside with this, is that if the user fires your "doTest" method with a different value while you're still processing the first request, the value of initialValue could well have changed by the time it's queried in doTest_callback.

Answer 2

Thanks for your input Zhaph. I implemented option 2, but I still can't get the value to show up. I tried placing a break point at the testSomething function, turns out it doesn't get hit. Any thoughts?

Answer 3

Hmm. Have you noticed any JavaScript errors? If you've got Firefox and FireBug installed, are there any errors in the JavaScript console?

It sounds like there's something wrong with the generated JS files from the component.

Answer 4

With AjaxPro you pass the parameters first and a callback function as the last parameter. If you use an anonymous function here you can get access to both the response and the original value. It would looks something like this:

function doTest(x){
    Default2.testSomething(x, function(res){
        doTest_callback(res.value, x);
    });
}
function doTest_callback(resonseValue,originalValue){
    alert("response: " + responseValue);
    alert("original: " + originalValue);
}