javascript - 从[WebMethod]调用JavaScript函数

Question

我需要调用一个显示Bootstrap模式的JavaScript函数。我有以下代码：

[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

}

这是我如何通过JS调用execModal方法：

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

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

函数execModal是从.aspx站点中的javascript函数调用的。

如何调用javascript函数showModal？

Answer 1

您的execModal方法在服务器上。您尚未指定要从何处调用（调用）它的位置，但是由于您已经将它（在定义它的方法中添加了属性...）修饰为WebMethod，因此有可能尝试从中调用它。在客户端浏览器中运行的（HTML）页面。要进行此调用，您需要在要运行该方法的客户端与拥有该方法的服务器之间进行通信。您还将注意到，execModal被定义为static方法。这意味着在调用它时，它不会具有Page类的实例成员，包括fillPH之类的东西（除非fillPH是static）。我不知道您是否正在使用ASP.NET WebForms（试图从.aspx页面进行调用），或者这是某些应用程序使用的服务（方法驻留在.asmx中），还是我猜测这甚至可能是ASP.NET MVC。



假设ASP.NET WebForms

让我们处理最简单的情况，因为几乎没有提供任何细节。如果我们假定此方法execModal驻留在.aspx.cs文件中，而您正尝试从相应的.aspx页调用它，则这是ASP.NET WebForms应用程序的一部分...


您需要发起对execModal的呼叫。这需要从客户端到服务器的AJAX调用。您可以创建自己的AJAX框架，但是有many open source frameworks available。我将在下面使用jQuery给出一个示例。
您需要在服务器上静态完成工作，或者需要使用HttpCurrent.Context获取Page，Session等的实例。可以通过Page检索HttpCurrent.Context.Handler as Page。
一旦方法在服务器上完成，结果（成功或失败）以及您想要返回给客户端的任何数据（可选）将被发送回客户端的浏览器。应用程序的客户端部分应该能够使用事件处理程序来处理此响应。事件处理程序应与XMLHttpRequest对象的onreadystatechange事件相关联，并在状态更改为4（完成）时处理响应。像jQuery这样的框架通过在AJAX调用中提供参数来指定成功/失败回调，从而解决了这些开销。不要将此通信过程的结果（成功/失败）与应用程序过程的结果（execModal的实际工作）相混淆。
然后，您的客户端（成功）回调函数将只调用所需的js函数showModal。


您的客户端AJAX调用（如果您要使用jQuery）看起来像这样...

$.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");
    }
});

这是一个非常基本的例子。您可能希望服务器决定成功时会发生什么，但是返回JSON数据或带有可以在客户端上执行的js函数名称的字符串-这些只是使您思考可能的例子。



编辑-考虑OP向问题添加的PageMethods.execModal()

您说您正在从中调用服务器代码...

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

      PageMethods.execModal(groupname, zw);
   }

这意味着您正在将ASP.NET的ScriptManager与EnablePageMethods=true一起使用。那是对的吗？

这将以PageMethods类型注入脚本，并为每个WebMethods定义函数。因此，您使用的是AJAX框架-MS提供的框架。 PageMethods.execModal(groupname, zw)对您隐藏AJAX调用的所有工作。但是，为您生成的每个函数（在PageMethod对象上）都为OnSuccess和OnFailure回调采用其他参数。这是SO answer detailing how to use the ScriptManager's PageMethod object。

与PageMethod对应的WebMethod对象上生成的任何函数的签名为...

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

在您的情况下，您有两个参数传递给WebMethod，因此在这两个参数之后，您将需要提供成功和失败的回调函数。 showModal可能是您成功的处理程序...

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