在keypress上从客户端调用ASP.NET调用服务器端方法

时间:2017-12-17 16:50:38

标签: javascript c# asp.net client-server

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

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但是我不知道如何根据我的具体需要改变在线解决方案。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

最直接的方法是在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
}