Asp net mvc 및 javascript 응답

Question

나는 두 가지 일을해야하는 javascript가 있습니다. 1. 데이터베이스에 업데이트 할 데이터를 보내십시오. 2. 표시 모드에서 내 HTML 양식 장소를 업데이트하십시오. 3. 업데이트 된 데이터를 반영하도록 내 테이블의 행을 업데이트하십시오.

내 자바 스크립트가 할 단지 1, 2 :

$(".form-commands .save").live("click", function() { 
    var f = $(".form-edit"); 
    var sf = f.serialize(); 
    $.post(this.href, 
     sf, 
     function (response) { 
      f.html(response); 
     }); 
    // I need to do something here to update the html table row... 
    return false; 
}); 

내가 해결책은 테이블 행 요소를 렌더링 다른 작업을 호출하는 것입니다 생각합니다. 어떻게해야합니까?

-

테이블 행은 다음과 같이 뭔가를 만들었습니다 :

<tr id="h62"> 
    <td>Ford</td> 
    <td>Focus</td> 
</tr> 

곳 (62)는이 기록의 "ID"입니다.

---

코드 작업,하지만 추한 :

$(".form-commands .save").live("click", function() { 
    var f = $(".form-edit"); 
    var sf = f.serialize(); 
    var handle = $(".form-edit #Handle")[0].value; 
    var itemLink = this.attributes["edititem"].value; 
    var row = $("#grid #h" + handle); 

    $.post(this.href, 
     sf, 
     function (response) { 
      $("#form-edit").html(response); 
      $.get(itemLink, 
       sf, 
       function (response) { 
        row.replaceWith(response); 
       }); 
     }); 

    return false; 
}); 

Answer 1

당신은 같은 것을 할 필요가 :

$(".form-commands .save").live("click", function (evt) { 
    //Capture the jQuery event object and call preventDefault() to stop the default click action 
    evt.preventDefault(); 
    var f = $(".form-edit"); 
    var sf = f.serialize(); 
    $.post(this.href, 
     sf, 
     function (response) { 
      f.html(response); 
     }); 
    //UPDATE THE ROWS 
    $('#h62 td:eq(0)').text(newVehicleMakeName); 
    $('#h62 td:eq(1)').text(newVehicleModelName); 
}); 

나는 차량 데이터에서 오는 코드에서 확실하지 않다. 컨트롤러에서 다시 전달하는 경우이 줄을 성공 콜백으로 옮겨야합니다.

또한 일반적으로 false를 반환하지 않아야합니다. jQuery 이벤트를 param으로 캡처하고 preventDefault()를 호출해야합니다. 클릭 핸들러가 브라우저 네비게이션을 방지하기 위해 false를 반환하면 인터프리터가 return 문에 도달하지 못하게되고 브라우저가 앵커 태그의 기본 비헤이비어를 실행하도록 진행합니다. 이것은 귀하의 문제를 일으킨 것이지, 귀하가 클릭 대 제출을 사용했기 때문이 아닙니다. event.preventDefault() 사용의 이점은 핸들러의 첫 번째 행으로이를 추가하여 앵커의 기본 비헤이비어가 실행되지 않도록 할 수 있다는 것입니다.

Answer 2

음 데이터를 다시로드하기 위해 페이지를 새로 고침하거나 아약스 루틴 (해당되는 경우 적용 가능)을 불러 오면이 작업을 수행 할 수있는 간단한 방법이 없습니다. 사실 난 당신이 사용되는 방법 (f.html (응답))를 인식하지 않았다, 나는 아직도 그 해결책 : 대한 회의적

글쎄, 당신은 정말 그냥 단일 행 업데이트하려면 :

을 1) 자바 스크립트 코드에서 업데이트 된 행의 ID를 알아야합니다. 이 값은 "h62"(따옴표 제외)입니다.

2) TD에 클래스 이름을 지정하십시오.

<tr id="h62"> 
    <td class="brand">Ford</td> 
    <td class="model">Focus</td> 
</tr> 

3) jquery를 사용하여 업데이트하십시오. "rowId"라는 변수에 행의 ID를 보유하고 있다고 가정 해 보겠습니다.

$('#'+rowId).find('.brand').html(response.brand); 
$('#'+rowId).find('.model').html(response.model); 

이렇게하면 프로세스가 완료됩니다.