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

Question

我正在尝试创建一个 web 页面，该页面显示 SQL 服务器中表中的列。 若干列必须具有 select 列表，并且若干列的值必须根据所选项目而改变。 例如，我有一个名为Accounts的表，其中包含AccountNumber和AccountName列。 我希望 web 页面上的 AccountName 单元格根据 select 列表中的 AccountNumber 选择进行更改。 I've tried using JavaScript and jQuery to pass the AccountNumber to a C# method that gets the AccountName , but when I make a selection and debug I get an error saying that the parameter the method received can't be null.

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);
        }
    }

C#

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

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

Answer 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);
});

Answer 2

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

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

Answer 3

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

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

    }

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

更新

JS

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

Answer 4

我试图让它尽可能简单，即使用常规的 JQuery function 和 MVC controller。

服务器端

 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>

为简单起见，我使用了 static 控件 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>