Как вызвать метод C # из Javascript в ASP.NET Core?

Question

У меня есть текстовое поле имени пользователя в моем файле Index.cshtml, и я хочу проверять совпадения в нашей Active Directory всякий раз, когда пользователь изменяет текст внутри текстового поля, а затем, возможно, отображать его в DropDownList, чтобы пользователь мог выбрать
Итак, я вызываю функцию JavaScript для события oninput в текстовом поле, и теперь вопрос в том, как мне вызвать мой метод C # FindUser() в Index.cshtml.cs из этой функции JS?Я перепробовал многое из того, что я прочитал, ajax вызов не работает, добавление [WebMethod] и создание статического метода не работает, и большинство в Интернете используют MVC, который я не использую.

Текстовое поле в Index.cshtml:

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

Функция JavaScript:

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

приводит браузер к предупреждению

Ошибка: [объектObject]

Метод в Index.cshtml.cs:

public void FindUser()
{
  // code            
}

Этот метод даже не вызывается из функции JS.
Также я читал несколько разчто вызов метода C # из представления не является правильным способом сделать это.Если так, как я могу достичь своей цели?

Answer 1

Я вижу, вы используете страницы Razor. Метод в модели страницы бритвы не является маршрутизируемым методом (его нельзя вызвать, запрашивая маршрут), и поэтому попытка отправить запрос ajax на Index\FindUser не будет работать, а ошибка вернется на сервер будет 404 не найден.

В качестве альтернативы вы можете использовать обработчики страниц бритвы.

В вашем Index.cshtml.cs переименуйте метод FindUser() в OnGetFindUser() или OnGetFindUserAsync(), если метод асинхронный.

Затем вы можете вызвать этот метод, отправив запрос на "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);
    }
  })
}

Далее предлагается прочитать

Answer 2

Я не очень опытный, я только начал программировать в прошлом году, но надеюсь, что смогу немного помочь.

У меня тоже была похожая проблема, но я не мог выполнить функцию напрямую изJavaScript.Возможно, вы могли бы создать вызов API для C # и заставить API выполнять желаемую функцию, а затем вернуть данные обратно клиенту.

Если я не пойму неправильно, вы хотите, чтобы пользователь набрал какой-то тексти затем верните из своей базы данных список, основанный на набранном тексте.

Вы можете использовать onChange во входном теге, и каждый раз, когда он изменяется, он выполняет запрос API к серверу, который будет искать любойвам нужно и вернуть его как JSON.Затем в JavaScript вы анализируете данные и помещаете их в тег выбора.

Надеюсь, это поможет.

Answer 3

Вы можете использовать onkeyup или onblur следующим образом:

onblur: Когда вы покидаете поле ввода, запускается функция

onkeyup: функция запускается, когда пользователь отпускаетвведите в поле ввода

Затем измените свой код следующим образом:

html-файл:

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

Вы должнывернуть что-то вроде этого.Вы используете ключевое слово void, поэтому оно ничего не вернет на сторону FE

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

Answer 4

Измените свой API следующим образом:

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

Затем назовите его так:

<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

Хорошо, во-первых, вы вызываете jquery внутри функции javascript.

Вызов метода действия контроллера из ajax довольно прост.

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

Вам нужноопределить тип запроса, URL-адрес, возвращаемый тип данных, параметры передачи и т. д., а затем установить точку останова для действия контроллера и для функций успешного и ошибочного запроса ajax.Тогда вы сможете увидеть, почему это удалось или не удалось.

То, как я бы это сделал, было бы дать идентификатору ввода, а затем, когда пользователь вводит текст, перехватывает событие.

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

Не путайте jquery и javascript.

Jquery - это фреймворк, который упаковывает в него javascript.

Javascript - это родной язык.