从 [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 应用程序的一部分...

1. 您需要向execModal 发起呼叫。这需要从您的客户端到您的服务器的AJAX 调用。您可以创建自己的 AJAX 框架，但有many open source frameworks available。我将在下面给出一个使用 jQuery 的示例。

2. 你需要在服务器上静态地做这项工作，或者你需要使用HttpCurrent.Context来获取Page、Session等的实例。Page可以通过以下方式检索HttpCurrent.Context.Handler as Page。

3. 一旦方法在服务器上完成，结果（成功或失败）以及您想要返回给客户端的任何数据（可选）都会发送回客户端的浏览器。应用程序的客户端部分应该能够使用事件处理程序处理此响应。事件处理程序应与XMLHttpRequest 对象的onreadystatechange 事件相关联，并在状态更改为4（完成）时处理响应。框架，如 jQuery，通过在 AJAX 调用中提供参数来指定成功/失败回调来处理这种开销。不要将此通信过程的结果（成功/失败）与您的应用程序过程的结果（execModal 的实际工作）混淆。

4. 然后您的客户端（成功）回调函数将调用您想要的 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。

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

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

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

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

Answer 2

这就是我所做和工作的魅力

javascript部分

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

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

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

Aspx.cs 部分

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

        --your any logic to check

        -- pass the javascript function as return parameter

        return "functionToCallAfterwebmethod"
    }