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

Question

我的Index.cshtml文件中有一个用户名文本框，我想在用户更改文本框内的文本时检查我们的 Active Directory 中的匹配项，然后可能将其显示在 中DropDownList，以便用户可以从中选择。所以我在文本框的事件上调用了一个 JavaScript 函数oninput，现在的问题是如何从该 JS 函数调用我的 C#FindUser()方法Index.cshtml.cs？我已经尝试了很多我读过的东西，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);    }  })}引导浏览器提醒错误：[对象对象]Index.cshtml.cs 中的方法：public void FindUser(){  // code            }甚至没有从 JS 函数调用该方法。我也读过几次从视图中调用 C# 方法不是正确的方法。如果是这样，我怎样才能实现我的目标呢？

Answer 1

我看到您正在使用 Razor 页面。razor 页面模型中的方法不是路由方法（它不能通过请求路由来调用），这就是为什么尝试发送请求将不起作用ajax，Index\FindUser并且服务器返回的错误将是 404 not found。

或者，您可以使用剃刀页面处理程序。

在您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 执行函数。您也许可以创建对 C# 的 API 调用并使 API 执行您想要的功能，然后将数据返回给客户端。

如果我没有误解的话，您希望用户键入一些文本，然后根据键入的文本从数据库返回一个列表。

您可以在输入标签中使用 onChange，每次更改时，它都会向服务器执行 API 请求，服务器将搜索您需要的任何内容并将其作为 json 返回。然后在 JavaScript 中，解析数据并将其放入 select 标记中。

希望能帮助到你。

Answer 3

好的，首先，您在 javascript 函数中调用 jquery。

从 ajax 调用控制器操作方法非常简单。

您需要确定请求类型、url、返回的数据类型、传递的参数等，然后在控制器操作和 ajax 请求成功和错误函数上设置断点。然后您将能够看到它成功或失败的原因。

我会这样做的方式是给输入一个 id，然后当用户键入文本时捕获事件。

不要混淆 jquery 和 javascript。

Jquery 是一个将 javascript 封装在其中的框架。

Javascript 是母语。

Answer 4

您可以像这样使用 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 5

像这样更改您的 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 6

您可以通过向 Index.cshtml 添加少量内容来准确地调用方法。第一行可能是：

@page "{handler?}"

然后从ajax调用：

url:'/index/FindUser'

在 Index.cshtml.cs 调用方法中：

void  OnGetFindUser(){}