목록을 업데이트 한 다음 JQuery를 사용하여 업데이트 된 목록을 표시합니다.

Question

저는 JQuery에 익숙하지 않고 Web API를 사용하기 시작했습니다. 내 .js 파일 내에서 StudentsAPIController (내 WebApi 컨트롤러)에서 메서드를 호출하는 몇 가지 함수가 있습니다.

$(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") 
    }) 
} 

및

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; 
}) 
     } 

UpdateStudent() 함수는 잘 작동된다 (표에 업데이트됩니다)하지만 내가 원하는 그것이 성공하면 포함하여 테이블에있는 모든 학생들의 업데이트 된 목록을 표시합니다 방금 업데이트되었습니다. 지금 내가 얻는 것은 테이블의 모든 학생 목록입니다. 그 목록에는 마지막으로 업데이트 된 학생이 포함되지 않습니다 (목록은 업데이트되지 않습니다). 그걸 가지고있는 기능 : ShowList()는 UpdateStudent() 함수가 호출 된 후 페이지가로드 될 때 목록을 가져 오는 것이 아니라 가져 오는 것입니다. 페이지를 새로 고치면 업데이트 된 목록이 아닌 마지막 목록이 표시됩니다. 수정하려면 어떻게해야합니까 ???

Answer 1

이와 같이 ajax 호출 success 이벤트에서 ShowList() 메서드를 호출해야합니다.

솔루션의 은

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(); 
    }); 
});