Call C# method from JavaScript and return a string

Question

I'm trying to create a web page that displays the columns from a table in SQL Server. Several of the columns must be have select lists and the value of several columns must change depending on the selected item. As an example, I have a table called Accounts that has an AccountNumber and AccountName column. I want the AccountName cell on the web page to change depending on the AccountNumber selection from the select list. 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;
}

I don't know why it's not passing the parameter properly.

Please have a look detail at official site , how to use $.post api.jquery.com/jQuery.post — Asif Raza
– Asif Raza, Commented Oct 10, 2019 at 9:27
The problem is: you can not! call straight code.... you need to call and endpoint. aka something which exposes the code c# this is normally done with Web project (MVC). you need to first fix how you are exposing your c# then toy with the java-script. — Seabizkit
– Seabizkit, Commented Oct 10, 2019 at 9:29
@schlonzo yes. I thought it would interfer with the method since it's prefix is "GET". — Isaac Opperman
– Isaac Opperman, Commented Oct 10, 2019 at 9:41

Pawan Lakhara · Accepted Answer · 2019-10-10 10:12:55Z

1

Check below code

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

answered Oct 10, 2019 at 10:12

Pawan Lakhara

1,1404 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Kennedy Over a year ago

You don't need to serialise the string to JSON manually, and you really shouldn't be recommending JavaScriptSerializer in 2019!

Ahmed Msaouri · Accepted Answer · 2019-10-10 09:24:09Z

0

I think that the problem with this code is the object that you are passing as a parameter, it has to be a list type:

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

answered Oct 10, 2019 at 9:24

Ahmed Msaouri

3161 silver badge10 bronze badges

Comments

Seabizkit · Accepted Answer · 2019-10-10 09:43:25Z

0

The problem is: you can not! call straight code.... you need to call an endpoint. aka something which exposes the code c# this is normally done with Web project (MVC). you need to first fix how you are exposing your c# then toy with the java-script.

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

    }

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

Update

JS

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

edited Oct 10, 2019 at 9:43

answered Oct 10, 2019 at 9:31

Seabizkit

2,4152 gold badges17 silver badges33 bronze badges

5 Comments

Isaac Opperman Over a year ago

I am using MVC. Should I rather try and use a method that returns a JsonResult?

Seabizkit Over a year ago

it was not clear from your snip that you are infact using mvc maybe include the controller level as well, so the routing can be verified also include your routing and mark up on the controller/action @IsaacOpperman

Seabizkit Over a year ago

if the second param on the post JS is the data object then you need to specify the value and then the type... ill give an example in my update

Isaac Opperman Over a year ago

I changed it to { ID = accountNumber } and it still doesn't work.

Seabizkit Over a year ago

like i said include the error and update the code so that more can be seen.

Angry Coder · Accepted Answer · 2019-10-10 10:04:30Z

I've tried to keep it as simple as possible i.e. used regular JQuery function and MVC controller.

Server side

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

Client Side (Script)

<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>

For simplicity I've used static IDs of control, you can make it dynamic if you have more than one account number field.

Client Side 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>

Collectives™ on Stack Overflow

Call C# method from JavaScript and return a string

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related