JQuery 함수는 처음 제출 버튼을 누를 때 컨트롤러 동작을 호출합니다.

Question

제출 버튼()을 누를 때마다 정확하게 실행되는 InsertShowStudents()이라는 JQuery 함수가 있습니다. 성공하면 다른 함수 GetStudents()을 호출하여 테이블에 업데이트 된 요소 목록을 표시합니다. GetStudents() 함수는 버튼을 처음 누를 때 컨트롤러 동작을 호출합니다. 그 후 InsertShowStudents()은 테이블에 계속 삽입되지만 GetStudents() 함수는 컨트롤러에서 Action Method를 호출하지 않습니다.이를 증명하기 위해 중단 점을 사용했습니다. 무슨 일이 일어나는지 알고 계십니까 ??

jQuery 코드 :

$(function() { 
    $("#btnInsertStudent").click(function() { 
     InsertShowStudents(); 
     return false; 
    }) 

}) 

function InsertShowStudents() { 
    $.ajax({   
     type:"post", 
     url: "/Students/InsertStudent/", 
     data: { Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() } 
    }).success(function() {   
     GetStudents(); 
     //clear the form 
     $("#myform")[0].reset(); 
    }).error(function() { 
     $("#divGetStudents").html("An error occurred") 
    }) 
} 

function GetStudents() 
{ 
    $.ajax({ 
     type: "get", 
     url: "/Students/GetStudents" 
    }).success(function (result) { 
     $("#divGetStudents").html(result) 
    }) 
} 

컨트롤러 조치 : 처음으로 제가 캐시를 가정 것 작동된다

public ActionResult InsertStudent() 
{ 
    return View(); 
} 

[HttpPost] 
//[ValidateAntiForgeryToken] 
public ActionResult InsertStudent(Student student) 
{ 
    if (ModelState.IsValid) 
    { 
     db.Students.Add(student); 
     db.SaveChanges(); 
     return View(); 
    } 
    return View(student); 
} 

public PartialViewResult GetStudents() 
{ 
    List<Student> students = db.Students.ToList(); 
    return PartialView(students); 
} 

Answer 1

시도 문제. 캐시를 우회하려면 ajax 요청에 옵션을 추가하면됩니다. 자세한 내용은 jquery ajax documentation

$.ajax({ 
 
     type: "get", 
 
     url: "/Students/GetStudents", 
 
     cache: false 
 
    }).success(function (result) { 
 
     $("#divGetStudents").html(result) 
 
    })

Answer 2

이 같은 상황에서이

function InsertShowStudents() { 
    $.ajax({   
     type:"post", 
     url: "/Students/InsertStudent/", 
     data: { Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() } 
    }).done(function() {   
     GetStudents(); 
     //clear the form 
     $("#myform")[0].reset(); 
    }).fail(function() { 
     $("#divGetStudents").html("An error occurred") 
    }) 
} 

function GetStudents() 
{ 
    $.ajax({ 
     type: "get", 
     url: "/Students/GetStudents" 
    }).done(function (result) { 
     $("#divGetStudents").html(result) 
    }) 
}