如何在 ASP.NET Core 中从 Javascript 调用 C# 方法？

Question

I have a username textbox in my Index.cshtml file and I want to check for matches in our Active Directory whenever the user changes the text inside the textbox and then maybe display it in a DropDownList , so the user can choose form it.
So I call a JavaScript function on the oninput event of the textbox and now the question is how do I call my C# method FindUser() in Index.cshtml.cs from that JS function? I have tried a lot of what I've read, ajax call doesn't work, adding [WebMethod] and making the method static doesn't work and most on the internet is on MVC which I'm not using.

Textbox in Index.cshtml :

<input type="text" class="form-control" oninput="findUsers()" />

JavaScript function:

function findUsers() {
  $.ajax({
    url: 'Index\FindUser',
    success: function (data) {
      alert(data);
    },
    error: function (error) {
      alert("Error: " + error);
    }
  })
}

leads the browser to alert

Error: [object Object]

Method in Index.cshtml.cs:

public void FindUser()
{
  // code            
}

The method is not even called from the JS function.
Also I've read a few times that calling a C# method from the view is not the proper way of doing it. If so, how can I achieve my goal then?

Answer 1

I see you're using Razor pages. A method in razor page model is not a routed method (it can't be called by requesting a route), and that's why trying to send an ajax request to Index\\FindUser won't work, and the error returned by server would be 404 not found.

Alternatively you can use razor page handlers.

In your Index.cshtml.cs rename the method FindUser() to OnGetFindUser() or OnGetFindUserAsync() if the method is an asynchronous method.

You can then call this method by sending a request to "Index?handler=FindUser" .

// Note the difference in method name
public IActionResult OnGetFindUser()
{
    return new JsonResult("Founded user");          
}

function findUsers() {
  $.ajax({
    type: 'GET',
    // Note the difference in url (this works if you're actually in Index page)
    url: '?handler=FindUser',
    success: function (data) {
      alert(data);
    },
    error: function (error) {
      alert("Error: " + error);
    }
  })
}

Further suggested read

Answer 2

I am not very experienced yet, I have only started programming last year, but I hope I can help a little bit.

I also had a similar problem, but I could not execute a function directly from JavaScript. You could maybe create an API call to C# and make the API execute the function you want, and then return the data back to the client.

If I don't misunderstand, you want the user to type some text, and then return from your database a list based on the typed text.

You could use an onChange in the input tag, and each time it changes, it executes an API request to the server, which will search whatever you need and return it as a json. Then in JavaScript, you parse the data and put it in a select tag.

Hope it helps.

Answer 3

Ok so first off, you are calling jquery inside javascript function.

Calling a controller action method from ajax is pretty easy.

https://api.jquery.com/jquery.ajax/

You need to determine the request type, the url, the datatype returned, parameters passing etc and then set a breakpoint on the controller action and on the ajax request success and error functions. Then you will be able to see why it has succeeded or failed.

The way i would do it would be to give the input an id, then when a user types text catch the event.

https://api.jquery.com/category/events/

Don't confused jquery and javascript.

Jquery is a framework that packs javascript inside it.

Javascript is the native language.

Answer 4

Change your API like this:

public bool FindUser(string value)
{
    if (value == "Joe")
        return true;
    else
        return false;
}

Then call it like this:

 <script type="text/javascript"> function findUsers() { var value = document.getElementById("value").value; $.ajax({ type: 'GET', url: '/Home/FindUser, data: value, dataType: 'json', success: function (data) { alert(data); }, error: function (error) { alert(error); } }); } </script>

 <br /> <input type="text" class="form-control" id="value" oninput="findUsers()" />

Answer 5

You can use onkeyup or onblur like this

onblur: When you leave the input field, a function is triggered

onkeyup: A function is triggered when the user releases a key in the input field

Then modify your code like this

html file:

<input type="text" class="form-control" id="username" oninput="findUsers()" />

js

function findUsers() {
    var username= document.getElementById("username").value;
    $.ajax({
        type: 'GET',
        url: '/Home/FindUser
        dataType: 'json',
        data: {username},
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        }
    });
}

You must return something like this. You are using void keyword so it will not return anything to FE side

public JsonResult FindUser(string username)
{
    var object = {
     // something here
    }
    return Json(object);
}

Answer 6

you can call method exactly you want with small addition to Index.cshtml. First line may be:

@page "{handler?}"

then call from ajax:

url:'/index/FindUser'

in Index.cshtml.cs calling method:

void  OnGetFindUser(){}