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

Question

我的Index.cshtml文件中有一个用户名文本框，我想在用户更改文本框内的文本时检查我们的 Active Directory 中的匹配项，然后可能将其显示在DropDownList ，以便用户可以选择它。
所以我在文本框的oninput事件上调用了一个 JavaScript 函数，现在的问题是我如何从那个 JS 函数调用我在Index.cshtml.cs C# 方法FindUser() ？ 我已经尝试了很多我读过的内容， 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 页面模型中的方法不是路由方法（不能通过请求路由来调用），这就是为什么尝试向Index\\FindUser发送ajax请求不起作用，服务器返回的错误将是404 未找到。

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

在您的Index.cshtml.cs如果方法是异步方法， OnGetFindUser()方法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 执行您想要的函数，然后将数据返回给客户端。

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

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

希望能帮助到你。

Answer 3

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

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

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

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

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

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

不要混淆 jquery 和 javascript。

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

Javascript 是母语。

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

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

您可以通过对 Index.cshtml 的少量添加来准确地调用您想要的方法。 第一行可能是：

@page "{handler?}"

然后从ajax调用：

url:'/index/FindUser'

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

void  OnGetFindUser(){}