Calling JavaScript function from [WebMethod]

Question

I need to call a JavaScript function that shows a Bootstrap modal. I have the following code:

[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static void execModal(string groupname, int zw) { 
    //need to generate the data first
    StringBuilder sb = new StringBuilder();
    Generate gen = new Generate();
    sb = gen.generateDeeperTable(zw, groupname);

    //insert into my placeholder
    //Append the HTML string to Placeholder.
    fillPH(sb);

    //run javascript function <showModel> to show the modal

}

Here is how I call the execModal method form JS:

    <script type="text/javascript>
       function callGenDeeperTable(zw, groupname) {

          PageMethods.execModal(groupname, zw);
       }
   </script>

The function execModal is called from a javascript function in the .aspx site.

How can I call the javascript function showModal?

Answer 1

Your execModal method is on the server. You have not specified where you want to invoke (call) it from, but since you've decorated it (added attributes to the method defining it...) as a WebMethod, chances are you're trying to invoke it from a (HTML) page running in a client's browser. To make this call you need a line of communication between the client that wants to run the method, and the server that holds the method. You will also notice that execModal is defined as a static method. That means that when it is invoked it will not have the instance members of the Page class, including things like fillPH (unless fillPH is static). I don't know if you're working with ASP.NET WebForms (trying to make the call from an .aspx page), or this is a service consumed by some application (method resides in an .asmx), or I guess this could even be ASP.NET MVC.

---

Assuming ASP.NET WebForms

Let's deal with the simplest case since there have been almost no details provided. If we assume that this method, execModal, lives in an .aspx.cs file, and you're trying to call it from the corresponding .aspx page, and this is part of an ASP.NET WebForms application...

1. You need to initiate the call to execModal. This requires an AJAX call from your client to your server. You can create your own AJAX framework, but there are many open source frameworks available. I will give an example below using jQuery.

2. You need to do the work on the server statically, or you need to use the HttpCurrent.Context to get the instance of the Page, Session, etc. The Page can be retrieved via the HttpCurrent.Context.Handler as Page.

3. Once the method finishes on the server, the result (success or failure), and optionally any data you want to return to the client, is sent back to the client's browser. The client portion of the application should be able to process this response with an event handler. The event handler should be associated with the XMLHttpRequest object's onreadystatechange event and process the response when the state changes to 4 (done). Frameworks, like jQuery, take care of this overhead by providing parameters in your AJAX call to specify the success/failure callbacks. Do not confuse the result (sucess/failure) of this communication process with the result of your application's processes (actual work of execModal).

4. Your client side (success) callback function would then just call your desired js function showModal.

Your client side AJAX call (if you were to use jQuery) would look something like this...

$.ajax({
    type: "POST",
    url: "Default.aspx/execModal",
    data: '{groupname: "' + groupname + '", zw: ' + zw + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        showModal();
    },
    failure: function(response) {
        alert("AJAX request failed");
    }
});

This is a very basic example. You might want the server to decide what happens on success, but returning a JSON data, or a string with the name of a js function that can be executed on the client - these are just examples to get your thinking about what is possible.

---

Edit - account for OP's addition of PageMethods.execModal() to question

You say you're calling your server code from this...

<script type="text/javascript>
   function callGenDeeperTable(zw, groupname) {

      PageMethods.execModal(groupname, zw);
   }

That implies that you're using ASP.NET's ScriptManager with EnablePageMethods=true. Is that correct?

That would inject the script with the PageMethods type, and define functions for each of your WebMethods. So you are using an AJAX framework - the one provided by MS. All that work of making the AJAX call is being hidden from you with PageMethods.execModal(groupname, zw). However, each of the functions generated for you (on the PageMethod object) take additional parameters for OnSuccess and OnFailure callbacks. Here is a SO answer detailing how to use the ScriptManager's PageMethod object.

The signature for any function generated on the PageMethod object corresponding to a WebMethod is...

function foo(param1, param2, param3, etc., OnSuccess, OnFailure)

In your case, you have two parameters being passed to the WebMethod, so after those two parameters you would want to supply callback functions for success and failure. showModal would be your success handler probably...

PageMethods.execModal(groupname, zw, showModal, function() { alert('failed!') });

Answer 2

this is what i did and worked like charm

javascript part

   function buyproduct(productId) 
   {
        PageMethods.checkifvalid(productid, OnSuccess);
   }                             

   function OnSuccess(response, userContext, methodName) 
   {
        this[response]();
   }

   function functionToCallAfterwebmethod()
   {
        alert("Javascript Function called successfully!!");
   }

Aspx.cs part

    [System.Web.Services.WebMethod]
    public static string checkifvalid(int productId)
    {

        --your any logic to check

        -- pass the javascript function as return parameter

        return "functionToCallAfterwebmethod"
    }