How to call C# method from Javascript in ASP.NET Core?

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?

When you use a debugger in your javascript code, what is the content of the error object? — Progman
– Progman, Commented Jun 29, 2019 at 13:36
Change your method(Action) to return a value like: public bool FindUser() — Saeid Amini
– Saeid Amini, Commented Jun 29, 2019 at 13:45
URLs don’t take backslashes. That’s an escape sequence now and may cause issues... — Sami Kuhmonen
– Sami Kuhmonen, Commented Jun 29, 2019 at 13:48

Ammar · Accepted Answer · 2019-06-29 15:07:36Z

9

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

answered Jun 29, 2019 at 15:07

Ammar

8185 silver badges12 bronze badges

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

2 Comments

Dave Over a year ago

Thanks Ammar, it worked! I will definitely take a look at the link you posted. Can you explain shortly what handlers are and why it works that way?

SoftwareDveloper Over a year ago

This is very helpful. I have a question: How do I pass a parameter to FindUser?

Max · Accepted Answer · 2019-06-29 13:41:23Z

1

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.

answered Jun 29, 2019 at 13:41

Max

3331 gold badge2 silver badges14 bronze badges

1 Comment

Dave Over a year ago

I haven't worked with APIs yet, I will take a look at that!

user9863635 · Accepted Answer · 2019-06-29 14:20:22Z

0

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.

answered Jun 29, 2019 at 14:20

user9863635

7 Comments

Dave Over a year ago

"Calling a controller action method from ajax is pretty easy".. Mind elaborating?

user9863635 Over a year ago

Did you look at the documentation? You literally give the url the name of the controller then the name of the action, then the request type, data type, parameters and thats it. You can debug the success or error method in the console on chrome, firefox or edge.

Dave Over a year ago

I mean that's exactly what I tried as you can see in my post, but it doesn't work :D

user9863635 Over a year ago

no sorry i cant see that from your post. i can see you attempted it but it didnt work. read the docs and you will figure it out

Dave Over a year ago

That's a useless comment. I post here for you to provide the answer, not redirect me to the same pages I've already visited.

|

Tony · Accepted Answer · 2019-06-30 08:53:39Z

0

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

edited Jun 30, 2019 at 8:53

user9863635

answered Jun 29, 2019 at 23:35

Tony

20.3k7 gold badges42 silver badges62 bronze badges

1 Comment

Dave Over a year ago

I get the error "the name Json does not exist in the current context". I googled it and found that Json can only be used when your class inherits from the Controller class, but I'm using RazorPages.

Saeid Amini · Accepted Answer · 2019-06-30 11:21:49Z

0

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()" />

edited Jun 30, 2019 at 11:21

user9863635

answered Jun 29, 2019 at 14:36

Saeid Amini

1,3055 gold badges20 silver badges27 bronze badges

3 Comments

Dave Over a year ago

Hi, it didn't work, even after changing "Home" to "Index".

Saeid Amini Over a year ago

Actually, I've tested it and it worked. Can send your code, please?

Dave Over a year ago

That's probably cause you're using MVC, but in RazorPages I don't even have Home. What do you want me to send, the code was the same as yours?

proa · Accepted Answer · 2020-04-11 15:09:31Z

0

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(){}

edited Apr 11, 2020 at 15:09

answered Apr 9, 2020 at 14:52

proa

1291 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to call C# method from Javascript in ASP.NET Core?

6 Answers 6

2 Comments

1 Comment

7 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

7 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related