javascript - ASP.NET 在按键时从客户端调用服务器端方法

Question

简单地说，我需要一种方法让客户端代码能够触发我的项目中的服务器端方法。我尝试使用此类功能的方式是，当用户将其电子邮件地址输入到文本框中时，在输入每个字符后，我希望项目触发下面所示的方法，该方法使用类来查询我的数据库。

private void EmailCheck()
{
    lblEmailError.Text = null;
    Customer y = new Customer();

    int counter = 0;
    y.Email = Email.Text;

    counter = y.CheckEmail();
    if (counter.Equals(1))
    {
        lblEmailError.Text = "Email is already in use";
    }
    else
    {
        lblEmailError.Text = null;
    }
}

我目前几乎没有任何 JavaScript 或任何形式的客户端脚本方面的经验。据我了解，AJAX 可能对我有用，但我再次对如何实现它一无所知。我也听说过 onkeydown/press/up，但我再次不确定如何根据我的特定需求更改在线解决方案。有什么帮助吗？

Answer 1

最直接的方法是在 HTML5 中制作一个按钮，使用 jQuery $.ajax() 函数调用服务器端 REST API(实现可以是任何 C# Web API、Python Flask API ，Node.JS API)。

在您的客户端:

<label> Enter something into the textbox </label> 
<input type = "text" id = "myTextBox" placeholder="Enter something"/>


<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<script>
$(function(){

//On button click query the server

$("#myTextBox").change(function(){
var textBoxValue = $("#myTextBox).val();
var dataToBeSent = {
 "data": textBoxValue
}; 

$.ajax(function(){
url: "http://localhost:9999/api/YourAPIName",
method: "POST",
data: JSON.stringify(dataToBeSent),
success: function(data){
   console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
   console.log("Failed because" + errorThrown);
}
}); //end .ajax

}); //end click

}); //end jQuery
</script>

在服务器端(假设使用 C#):

创建一个模型类，其属性与您为 [FromBody] 属性构建的 JSON 键同名，以正确反序列化它。

public class SomeModelClass
{
   public string data { get; set; }
}

[HttpPost]
[Route("api/YourAPIName")]
public HttpResponseMessage YourMethod([FromBody] SomeModelClass modelClass)
{
    //perform logic and return a HTTP response
}