从 [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方法在服务器上。您尚未指定要从何处调用（调用）它，但由于您已将其装饰（向定义它的方法添加了属性...）作为 a 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 框架，但是有许多开源框架可用。下面我将使用 jQuery 给出一个例子。

2. 您需要在服务器上静态地执行工作，或者需要使用 来获取、等HttpCurrent.Context的实例。可以通过 来检索。PageSessionPageHttpCurrent.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.NETScriptManager与EnablePageMethods=true. 那是对的吗？

这将向脚本注入类型PageMethods，并为每个WebMethods. 因此，您正在使用 AJAX 框架- 由 MS 提供的框架。进行 AJAX 调用的所有工作都对您隐藏起来PageMethods.execModal(groupname, zw)。但是，为您（在对象上）生成的每个函数都PageMethod需要附加参数OnSuccess和OnFailure回调。这是一个详细说明如何使用 ScriptManagerPageMethod对象的答案。

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

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

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

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