C# 如何从jQuery调用C静态方法

我看过一些文章，展示了如何使用Microsoft的[WebMethod]从JavaScript调用用于Web表单应用程序的C方法。我想对ASP.NETMVC应用程序也这样做。我有一个C静态方法，返回转换后的数据：

public static string Translate(string word)
{
  return langRepo.Translate(word);
}

上述函数在服务器端代码中运行良好。但是，我想将相同的代码扩展到客户端。理想情况下，我希望创建如下jQuery函数：

function Translate(word) {
  //call C# translate method and return result
}

"<hr /><h5>" + Translate(heading) + "</h5>";

然后像这样使用它：

function Translate(word) {
  //call C# translate method and return result
}

"<hr /><h5>" + Translate(heading) + "</h5>";

我该怎么做

请执行以下操作：

在服务器端的函数顶部添加[WebMethod]。 来自客户端的调用应类似于以下代码段： 提示：类型应为POST类型。检查完整的示例

function Translate(word){
  // Type of data passed should match the function's parameters
  var data = {word: word};
  $.ajax({
    type: "POST",
    url: "pageName.aspx/Translate",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
    },
    success: function (response) {
      // Here you can assign response to tags.
      // If response was empty, try response.d.
      $("#id").html(response);

    }
  });
}

如果您使用的是ASP.NET MVC应用程序，则可以改用[HttpGet]，并以JSON格式返回函数操作的结果，因为我们在Ajax请求中指定了数据类型：JSON

以下是一个例子：

[HttpGet]
public ActionResult Translate(String word)
{
  var resultWord = ModelInit.repo.TranslateItem(word);
  return Json(new {result = resultWord}, JsonRequestBehavior.AllowGet);
}

在Ajax调用的成功处理程序中，通过访问result属性获取值：

success: function (response) {
  // Here you can assign response to tags
  $("#id").html(response.result);
}

---

尝试以下方法。首先是返回json的C控制器操作，然后从jQuery方法调用控制器操作

public class LanguageController : Controller
{
    [HttpGet]
    public JsonResult Translate(string word) 
    {
        var translatedWord = langRepo.Translate(word);
        return Json(translatedWord, JsonRequestBehavior.AllowGet); 
    }
}

jQuery方法：

function Translate(word){ 
    $.ajax({
        type: "GET",
        url: "/Language/Translate",
        data: {word: word},
        dataType: "json",
        cache: false,
        success: function (data) {
            if(data.length == 0) {
                alert("Cannot translate.");
            }
            else {
                // Get the translated word
                var translatedWord = data.translatedWord;

                // Update the DOM element (label) with translated word 
                $("#translatedWord").text(translatedWord);
            }
        }
    });
}

---

在我多年的编程生涯中，我第一次不得不将AJAX调用更改为synchronous，以使其按我所希望的方式工作。所需要的只是将async:false属性添加到AJAX调用中。通过这种方式，AJAX调用被视为与任何其他同步函数一样：

function Translate(word) {
    var Url = "/api/translate/" + word;
    var translated;

    $.ajax({
        type: "GET",
        url: Url,
        dataType: "json",
        cache: false,
        async: false,
        success: function (response, status, xhr) {
            translated = response.translatedWord;
        },
        error: function (jqXhr, textStatus, errorThrown) {
            var error = CapitalizeFirst(textStatus) + ": " + errorThrown + " - " + jqXhr.responseText;
            bootbox.alert(error);
        }
    });

    return translated;
}

---

对于那些想将此作为项目解决方案的人，请三思！使AJAX调用同步并不是一件小事。这样做会迫使用户在程序再次响应之前等待服务器的响应。除非您确定数据集很小且访问频率不高，否则您应该寻找其他方法。

我看不到您的截图imgur domain被阻止，而且您也没有发布太多代码，因此我将向您展示一个我是如何做到这一点的示例，稍后我可以更新答案以更好地回答您的问题

我调用了一个存储过程，并使用AJAX将生成的数据插入到我的页面中

首先，我在C中有一个对象，它有一个开始和结束日期。我的模型：

public class DateRange
{
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
}

我的数据访问层DateRepository调用了我的存储过程，但由于它与此问题无关，所以对它进行了一点匿名化：

public static List<DateRange> GetDates(int number)
{
    // execute stored procedure, ORM converts the rows to a list of objects
    ...
    return dateRanges;
}

Jsonresult来自System.Web.Http>ApiController>Jsonresult-JsonT内容

现在，我的UI层控制器调用此服务方法：

public async Task<JsonResult> Get_DateRanges(int number)
{
    var response = await ServiceClient.HttpGetList<DateRange>([url here calling /Dates/{number} ]);
    return new JsonResult { Data = response, MaxJsonLength = Convert.ToInt32(WebConfigurationManager.AppSettings["MaxJsonLength"]), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

记住，这个JSONResult是列表的一部分。这就是JSON的数据字段中的内容

最后，调用UI控制器方法的javascript代码：

function updateDateRanges() {
    var nNumber = $("input#Number").val();
    var params = { number: nNumber };

    // note the JSON call is to the UI layer
    $.getJSON(ROOT + "UIController/Get_DateRanges", params, function (data) { })
    .done(function (data) {
        // change model values from server
        $("input#StartDate").val(data[0].StartDate);
        $("input#EndDate").val(data[0].EndDate);
    })
    .fail(function () {
        errorAlert("Error retrieving dates.");
    })


}

请注意，我检索日期（例如数据[0].StartDate）的方式是因为我有一个日期范围对象列表。由于您可以调用单独返回JSON的函数，就像我在浏览器中键入服务层的URL一样，因此应该很容易看到JSON数据的样子

从您的评论来看，您的问题似乎根本不是原始帖子中所述的内容，而是对javascript异步本质的基本理解。考虑下面的例子：

$output.clickfunction{ var inputText=$output.text； 翻译输入文本； }; 函数translateWordword{ getTranslationFromServerword； } 函数getTranslationFromServerword{ //使用setTimeout模拟2秒的慢速响应，而不是AJAX请求 setTimeoutfunction{ $output.texto en español； }, 2000; $output.css'background-color'，'yellow'； } 英文文本

---

您需要使用ajax来调用服务器方法我已经尝试过了。如果您没有正确尝试，则无法正常工作：添加ajax代码，我们将能够更正。请将代码、错误和数据添加为文本，而不是图像。图片：A不允许我们复制和粘贴代码/错误/数据进行测试；B不允许基于代码/错误/数据内容进行搜索；和一般来说，文本格式的代码/错误/数据>>>>图像格式的代码/错误/数据>>无。如果图像添加了一些仅由文本代码/错误/数据无法传达的重要信息，则只能在代码格式的文本之外使用图像。不幸的是，这不起作用。您假设我的函数在.aspx页面中。我在这里使用的是MVC No.aspx页面。我创建了一个模拟函数调用的Web API，但即使这样也不适用于我。我的函数在另一个程序集中，我调用App.Services.Helpers:namespace App.Services.Helpers{public static class Utility{public static string capitalize firststring word{//检查空字符串。如果string.IsNullOrEmptyword{return string.empty；}//返回char和concat substring.return char.ToUpperword[0]+word.Substring1；}

---

[WebMethod]公共静态字符串Translatestring word{return ModelInit.repo.TranslateItemword；}}}}}也许我可以用另一种方法来处理这个问题。。。假设我创建了一个Web API，在这里我可以传递单词，它会像这样为我翻译：/API/translate/title，这个API返回一个字符串：título。我如何获取这个结果并像这样使用它：heading=+translatedWord+；？当您提到web表单应用程序时，您的问题还不够清楚，这就是我写这个答案的原因。如果是MVC应用程序，则无需使用[WebMethod]进行装饰。。相反，用[HttpGet]装饰并在函数内部返回Jsonnew{id=10，title=test}；这绝对不是你应该追求的解决方案。我看不到您的屏幕截图，但很明显您在某处做错了什么，因为您不是第一个使用jQuery异步调用方法的人，我今天早些时候确实这么做了。第二，如果你想翻译网页，这可能不是你应该采用的方法。如果你有更好的解决方案，无论如何，请发布它！一定是！！在另一个Ajax调用中有一个Ajax调用。它们在异步执行时都会混淆。内部需要同步。好的。您的解决方案是我所说的传统解决方案，也是我们许多开发人员每天的解决方案。$.getJSON直接将值写入DOM。但正如您从问题中看到的，如果您能看到它，我想知道如何从可以在Javascript中调用的函数中获取AJAX调用的结果作为返回值。通过这种方式，该函数可以变得通用，比如大写第一个字母，并根据需要在任何地方使用，而不仅仅是用于特定的用例。为什么我需要这样？因为在本例中，我是从另一个AJAX函数内部调用它@KeithHarris我的方法超出了泛型——数据被插入到DOM中，因为我正在显示数据。这并没有使任何事情变得不一般。如果您需要从另一个异步函数中调用异步函数，听起来您需要阅读Javascript中回调的工作原理。您的解决方案对我不起作用，因为我不知道在运行时DOM将是什么。事实上，DOM是根据允许用户访问的内容动态构建的。我意识到这是一个不寻常的情况，因为我以前从来没有这样做过，所以我想知道其他开发人员是否也遇到过类似的问题，以及他们是如何解决的。我尝试使用了一个回调函数，也显示在屏幕截图中，你看不到，但它也不起作用。@KeithHarris我用片段回答了你的问题演示等待AJAX调用的正确方法，有望帮助您理解javascript。如果你能帮我一个大忙，那就是把你的实际代码编辑成你的原始问题，因为你复制/粘贴它比我从手机屏幕截图上重新键入要容易得多。如果你想让我实际使用你的代码作为例子，你需要为我发布它。