Call C# method and pass variable from JavaScript

Question

I have this ASP.NET C# method in a user control:

protected void SaveChanges(object clientArr)
{
    System.Diagnostics.Debug.WriteLine("SaveChanges");
    //clientArr will be a string[]
}

I want to be able to call this method and pass a variable form the JavaScript side. I know doing this '<%=divMainContent.ClientID%>' worked to get a client ID. I tried doing '<%=SaveChanges(clientArr)%>' , but it's not working. Is there a working and simple solution for this? Preferably using the '<%=%>' (not sure what it's called)?

JavaScript method:

function clickSaveChanges(element) {
    var mainContentChildren = document.getElementById('<%=divMainContent.ClientID%>').childNodes;
    var clientArr = new Array(mainContentChildren.length * 2);
    //add stuff to  clientArr
   '<%=SaveChanges(clientArr)%>'  //this line causes page to crash
}

Answer 1

SaveChanges should return something for the <%= %> notation. However, you can't call a server-side method from client-side JavaScript by invoking it by name; you have to communicate with the server by a web service or page callback . Page callback initiates the normal flow of the page lifecycle, even though it is an out of band request.

Answer 2

You can achieve same thing with very simple ajax call. You just need to add JQuery in scripts to use ajax.

C# code

[WebMethod]
public static void SaveChanges(object clientArr)
{ 
 System.Diagnostics.Debug.WriteLine("SaveChanges");
 //clientArr will be a string[]
}

JavaScript

 function clickSaveChanges(element) {
var mainContentChildren = document.getElementById('<%=divMainContent.ClientID%>').childNodes;  

  var clientArr = new Array(mainContentChildren.length * 2);
   //add stuff to  clientArr

   String sParam = clientArr.toString(); 
   $.ajax({ 
   type: "POST", 
   url: "PageName.aspx/SaveChanges", 
   data: "{s:sParam}", // passing the parameter 
   contentType: "application/json; charset=utf-8", 
   dataType: "json", 
   success: function(retValue) {
    // Do something with the return value from.Net method
    } 
}); 

}

Answer 3

You cant mix client side JavaScript code an server side C# code. What you need is some AJAX magic to make this work. You will need 2 things to make this work:

1. An endpoint that you can send the request to. You can get this using ASP.NET WebAPI, or some other .NET style endpoint. That will be dependent on your current architecture. Are you using MVC or WebForms? This endpoint will be responsible for calling your SaveChanges() method once it receives the data from your UI.

2. You will need an AJAX call from the client to send the data to your endpoint. The easiest way to do this is using jQuery. Take a look at the documentation for the AJAX method:

http://api.jquery.com/jquery.ajax/

A super simple example would be something like this:

$.ajax({
type: "POST",
url: "yourEndpointAddress",
data: {
    name: "John",
    location: "Boston"
    }
})
.success(function (msg) {
        alert("Data Saved: " + msg);
    });

Hope it helps.