从 JavaScript 调用 C# 方法并返回一个字符串答案

【问题标题】：Call C# method from JavaScript and return a string从 JavaScript 调用 C# 方法并返回一个字符串
【发布时间】：2019-10-10 09:17:05
【问题描述】：

我正在尝试创建一个网页来显示 SQL Server 中表中的列。若干列必须具有选择列表，并且若干列的值必须根据所选项目而改变。例如，我有一个名为Accounts 的表，它有一个AccountNumber 和AccountName 列。我希望网页上的 AccountName 单元格根据选择列表中的 AccountNumber 选择进行更改。我尝试使用 JavaScript 和 jQuery 将 AccountNumber 传递给获取 AccountName 的 C# 方法，但是当我进行选择和调试时，我收到一条错误消息，指出接收到的方法的参数不能为空。

JavaScript

function getAccountNumber(x) {
        var selectedAccountNumber = document.getElementById(x.id).value;
        var isNumber = isNaN(selectedAccountNumber);
        if (!isNumber) {
            var accountNumber = parseInt(selectedAccountNumber, 10);
            var accountName = $.post('@Url.Action("GetAccountName", "Statements")', accountNumber);
            alert(accountName);
        }
    }

public string GetAccountName(int ID)
{
    var item = db.Accounts.Where(acc => acc.AccountNumber == ID).Select(acc => acc.AccountName).Single();
    return item;
}

我不知道为什么它没有正确传递参数。

【问题讨论】：

请看官网详细说明，$.post的使用方法api.jquery.com/jQuery.post
问题是：你不能！直接调用代码....您需要调用和端点。也就是暴露代码 c# 的东西，这通常是使用 Web 项目 (MVC) 完成的。你需要首先修复你如何暴露你的 c# 然后玩弄 java 脚本。
您是否缺少动作上方的 Post 装饰器？
@schlonzo 是的。我认为它会干扰该方法，因为它的前缀是“GET”。
@IsaacOpperman 那你为什么要使用 $.post 呢？

标签： javascript c# asp.net-mvc

【解决方案1】：

查看以下代码

[HttpPost]
public string GetAccountName(int ID)
{
  JavaScriptSerializer js = new JavaScriptSerializer();
  var item = db.Accounts.Where(acc => acc.AccountNumber == ID).Select(acc => acc.AccountName).Single();
  return js.Serialize(item.ToString());

}

var accountNumber = parseInt(selectedAccountNumber, 10);
var targetUrl= "@Url.Action("GetAccountName", "Statements")"+ "?ID=" + accountNumber;
$.post(targetUrl, function (data) {
  alert(data);
});

【讨论】：

你不需要手动将字符串序列化为 JSON，2019 年你真的不应该推荐JavaScriptSerializer！

【解决方案2】：

我认为这段代码的问题在于您作为参数传递的对象，它必须是列表类型：

$.post('@Url.Action("GetAccountName", "Statements")', {ID: accountNumber }, function(htmlexterno){ $("#cargaexterna").html(htmlexterno);

【讨论】：

【解决方案3】：

问题是：你不能！直接调用代码....您需要调用端点。也就是暴露代码 c# 的东西，这通常是用 Web 项目 (MVC) 完成的。您需要先修复如何暴露您的 c#，然后再玩弄 java 脚本。

[ApiController]
[Route("[controller]")]
public class SomeNameController : ControllerBase
{
    public SomeNameController()
    {

    }

    [HttpPost]
    public string Get((int id)
    {
        return "cat";
    }
}

更新

var accountNumber = parseInt(selectedAccountNumber, 10);
var data { id : accountNumber };
var url = '@Url.Action("GetAccountName", "Statements")';
$.post(url, data);

【讨论】：

我正在使用 MVC。我是否应该尝试使用返回 JsonResult 的方法？
从您的片段中不清楚您实际上使用 mvc 可能还包括控制器级别，因此可以验证路由还包括您的路由并在控制器/操作上标记@IsaacOpperman
如果帖子 JS 上的第二个参数是数据对象，那么您需要指定值，然后指定类型...我的更新中会举一个例子
我改成 { ID = accountNumber } 还是不行。
就像我说的那样包含错误并更新代码以便可以看到更多内容。

【解决方案4】：

我试图让它尽可能简单，即使用常规的 JQuery 函数和 MVC 控制器。

服务器端

 public ActionResult GetAccountName(string accountNumber)
 {
    return Content("Account name of " + accountNumber);
 }

客户端（脚本）

<script language="javascript">
    $(document).ready(function () {
        $(".accountnumbers").change(function () {
            var accountNumber = $(this).val();
            var labelToUpdate = $("#" + $(this).data("label"));

            console.log(labelToUpdate);

            $.ajax({
                url: '@Url.Action("GetAccountName", "Home")',
                data: { "accountNumber": accountNumber},
                success: function (data) {

                    labelToUpdate.html(data);
                }
            })

        })
    });
</script>

为简单起见，我使用了静态 ID 控件，如果您有多个帐号字段，则可以使其动态化。

客户端 HTML

<table>
<tr>
    <td>
        Account Number
    </td>
    <td>
        Account Name
    </td>
</tr>
<tr>
    <td>
        <input type="text" id="txtAccountNumber_1" class="accountnumbers" data-label="lblAccountName_1" />
    </td>
    <td><label id="lblAccountName_1"></label></td>
</tr>
</table>

【讨论】：