如何在 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 namepublic 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 或 onbluronblur：当你离开输入框时，触发一个函数onkeyup：当用户在输入域中松开一个键时触发的函数然后像这样修改你的代码html文件：<input type="text" class="form-control" id="username" oninput="findUsers()" />jsfunction findUsers() {&nbsp; &nbsp; var username= document.getElementById("username").value;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; &nbsp; url: '/Home/FindUser&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; data: {username},&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}你必须返回这样的东西。您正在使用 void 关键字，因此它不会向 FE 端返回任何内容public JsonResult FindUser(string username){&nbsp; &nbsp; var object = {&nbsp; &nbsp; &nbsp;// something here&nbsp; &nbsp; }&nbsp; &nbsp; return Json(object);}

Answer 5

像这样更改您的 API：public bool FindUser(string value){&nbsp; &nbsp; if (value == "Joe")&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; return false;}然后这样称呼它：<script type="text/javascript">function findUsers() {&nbsp; &nbsp; var value = document.getElementById("value").value;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; &nbsp; url: '/Home/FindUser,&nbsp; &nbsp; &nbsp; &nbsp; data: value,&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(data);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(error);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}</script><br /><input type="text" class="form-control" id="value" oninput="findUsers()" />

Answer 6

您可以通过向 Index.cshtml 添加少量内容来准确地调用方法。第一行可能是：@page&nbsp;"{handler?}"然后从ajax调用：url:'/index/FindUser'在 Index.cshtml.cs 调用方法中：void&nbsp;&nbsp;OnGetFindUser(){}