Update-Liste und dann zeigen aktualisierte Liste mit JQuery

Question

Ich bin sehr nicht mit JQuery erlebt und ich beginne mit WebAPI zu arbeiten, in meiner JS-Datei Ich habe einige Funktionen, die Methoden von StudentsAPIController (mein WebAPI Controller) nennen:

$(document).ready(function() { GetAll(); GetStudent(); AddStudent(); UpdateStudent()}) 

function ShowList() { 
    $.ajax({ 
     type: "get", 
     url:"/api/StudentsAPI" 
    }).success(function (result) { 
     var Output = ""; 
     for (var i = 0; i < result.length; i++) { 
      Output += "<hr>"; 
      Output += "<b> Name: </b>" + result[i].Name + "<br/>"; 
      Output +="<b> LastName: </b>" + result[i].LastName + "<br/>" 
     } 
     $("#lblMessage").html(Output); 
    }) 
    .error(function() { 
     $("#lblMessage").html("An error occurred") 
    }) 
} 

und

function UpdateStudent() { 
$("#btnUpdateStudent").click(function() { 
    var student = { StudentID:2, Name: "Prika", LastName: "Prika" } 
    $.ajax({ 
     type:"put", 
     url: "/api/StudentsAPI/2", 
     data: student 
    }).success($("#lblMessage").html(ShowList())) 
    .error(function (xhr, ajaxOptions, thrownError) { 
     $("#lblMessage").html("Error: An error occurred") 
    }) 
    return false; 
}) 
     } 

die UpdateStudent() Funktion funktioniert gut (in der Tabelle zu aktualisieren) aber sobald es Erfolg ich eine aktualisierte Liste aller Schüler in der Tabelle angezeigt werden sollen, einschließlich der gerade aktualisiert, was ich jetzt bekomme, ist eine Liste aller Schüler des Tisches , aber diese Liste enthält nicht den zuletzt aktualisierten Schüler (Die Liste wird nicht aktualisiert). Ich weiß, dass die Funktion, die ich dafür habe: ShowList() ruft die Liste ab, wenn die Seite geladen wird, aber nicht, nachdem die UpdateStudent() - Funktion aufgerufen wurde. Wenn ich die Seite aktualisiere zeigt es die letzte Liste nicht die aktualisierte Liste, was kann ich tun, um es zu reparieren ???

Answer 1

Sie sollten die ShowList() Methode auf dem success Ereignis Ihrer Ajax-Aufruf wie folgt aufrufen.

function ShowList() { 
    // Add here your existing code(ajax call code) to get data from api endpoint 
} 

function UpdateStudent() { 

    var student = { StudentID:2, Name: "Prika", LastName: "Prika" } 
    $.ajax({ 
     type:"put", 
     url: "/api/StudentsAPI/2", 
     data: student 
    }).success(function(){ 
     ShowList(); 
    }); 
    .error(function (xhr, ajaxOptions, thrownError) { 
     $("#lblMessage").html("Error: An error occurred") 
    }) 
    return false; 
} 


$(function(){ 
    //Call other methods also here as needed. 
    UpdateStudent(); 

    // bind the click event to UpdateStudent method 
    $("#btnUpdateStudent").click(function() { 
      UpdateStudent(); 
    }); 
});