asp.net의 드롭 다운 셀에 html 테이블에 행을 동적으로 추가하는 방법 mvc

Question

드롭 다운 셀이 있고 항목을 클릭 한 후 html 테이블에 행을 추가하고 싶습니다. (addRowToTable 기본적인 자바 스크립트 기능입니다) : 나는이 사용하는 자바 스크립트를했다

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#locations').change(function() { 
      if (this.selectedIndex != 0) { 
       var support = new Array("True", "False"); 
       addRowToTable(this.value, support , "Table"); 
       this.remove(this.selectedIndex); 
       this.selectedIndex = 0; 

      } 
     }); 
    }); 
</script> 

하지만 지금은 새로운 테이블 행에 표시 할 필요가있는 데이터 중 일부는, 내가 클라이언트에서이없는 것을 깨달았다 측면 그래서 나는 어떻게 든이 필요합니다

• 서버 (컨트롤러 액션)에 선택된 값에 합격 한 후 데이터 속성의 나머지 부분을 다시 얻을 클라이언트 측에서 새로운 값 이후로 HTML 테이블 (아약스) 새로 고침 서버에서 전체 데이터를 다시 가져옵니다.

누구나 이와 같은 작업을 시도한 사람이 있습니까?

Answer 1

당신은 JSON 직렬화 된 데이터를 얻을 수 JQuery와에게 $.ajax 방법을 사용할 수 있습니다 :

<script type='text/javascript'> 
     $(document).ready(function() { 
      $('#locations').change(function() { 
       if (this.selectedIndex != 0) { 
        var support = new Array("True", "False"); 

       $.ajax({ 
       type: "POST", 
       url: "/YourController/YourAction, 
       dataType: "json", 
       error: function(xhr, status, error) { }, 
       success: function(data) { 

        addRowToTable(this.value, data.This ,data.That, "Table"); 
        this.remove(this.selectedIndex); 
        this.selectedIndex = 0; 

       } 
      }); 
     }); 
    </script> 

및 컨트롤러 액션 :

public JsonResult YourAction() 
     { 
      //do your stuff.. 

      return Json(new { This="this", That="that"}); 
     } 

Answer 2

나는 그래서는 HTTP GET 요청을 선택한 어떤 값의 URL 매개 변수 = (http://localhost/test?value=something)를 통과하여 서버/테스트로 만들 것 JQuery와 아약스 방법 http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#locations').change(function() { 
      if (this.selectedIndex != 0) { 
       $.get("test", { value:this.value }, function(data){ 
        addRowToTable(this.value, data , "Table"); 
        this.remove(this.selectedIndex); 
        this.selectedIndex = 0; 
       }); 
      } 
     }); 
    }); 
</script> 

을 사용합니다. 요청이 완료되면 행을 추가 할 때 사용할 수있는 콜백으로 전달되는 데이터 객체가 생성됩니다. 다시 얻은 내용과 확인 방법 (응답 유형, 성공 또는 실패 등을 확인할 수 있음)에 대한 자세한 정보는 jQuery 문서를 살펴보십시오.

희망 하시겠습니까?