ASP.NET Calling Server Side-Methode von Client-Seite auf Tastendruck

Question

Um es einfach zu sagen, ich brauche eine Möglichkeit für clientseitige Code in der Lage sein, eine serverseitige Methode in meinem Projekt auszulösen. Die Art, wie ich diese Funktionalität verwenden möchte, ist, wenn ein Benutzer seine E-Mail-Adresse in ein Textfeld eingibt, nachdem jedes Zeichen eingegeben wurde. Ich möchte, dass das Projekt die unten gezeigte Methode auslöst, die eine Klasse verwendet, um meine Datenbank abzufragen.

Ich habe derzeit fast keine Erfahrung mit JavaScript oder irgendeine Art von Client-Side-Scripting. Soweit ich weiß, kann AJAX mir hier nützlich sein, aber ich habe keine Ahnung, wie ich es umsetzen würde. Ich habe auch von onkeydown/press/up gehört, aber ich bin mir nicht sicher, wie ich Online-Lösungen auf meine speziellen Bedürfnisse anpassen kann. Irgendeine Hilfe?

Answer 1

Die einfachste Möglichkeit wäre, eine Schaltfläche in HTML5 zu erstellen, verwenden Sie die Funktion jQuery $.ajax(), um eine serverseitige REST-API aufzurufen (die Implementierung kann C# -Web-API, Python-Flask-API, Node.JS-API sein).

In Ihrem Client-Seite:

<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> 

in Ihrem Server-Seite (Unter der Annahme, C#):

eine Modellklasse Machen, mit Eigenschaften die gleichen Namen wie die JSON Schlüssel Sie konstruiert für das Attribut [FromBody], um es korrekt zu deserialisieren.

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 
}