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