Вызовите метод C # из JavaScript и верните строку

Question

Я пытаюсь создать веб-страницу, которая отображает столбцы из таблицы в SQL Server. Несколько столбцов должны иметь списки выбора, а значение нескольких столбцов должно меняться в зависимости от выбранного элемента. Например, у меня есть таблица с именем Accounts, в которой есть столбцы AccountNumber и AccountName. Я хочу, чтобы ячейка AccountName на веб-странице изменялась в зависимости от выбора AccountNumber из списка выбора. Я пытался использовать JavaScript и jQuery для передачи AccountNumber методу C #, который получает AccountName, но когда я делаю выбор и отлаживаю, я получаю сообщение об ошибке, в котором говорится, что параметр, полученный методом, не может быть нулевым.

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

Проблема в том, что вы не можете! вызовите прямой код .... вам нужно позвонить на конечную точку. что-то, что раскрывает код c #, обычно это делается с помощью веб-проекта (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 3

Я пытался сделать это как можно более простым, т.е. использовал обычную функцию 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>

Для простоты я использовал статическийИдентификаторы контроля, вы можете сделать его динамическим, если у вас есть более одного поля номера счета.

Клиентская часть 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>

Answer 4

Я думаю, что проблема с этим кодом - это объект, который вы передаете в качестве параметра, это должен быть тип списка:

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