양식 게시 후 MVC3의 테이블 새로 고침

Question

시나리오는 JSON 결과가 반환되는 표를 동적으로 채우기 위해 jQuery를 실행하는 일부 HTML 드롭 다운이 있습니다.

[HttpPost] 
    public JsonResult GetTableInfo(Guid schemeId, Guid tableTypeId) 
    { 
     var tables = this.tableModel.GetTableInformationList(schemeId, tableTypeId); 
     var formattedData = from t in tables 
          select new 
          { 
           TableId = t.TableId.ToString(), 
           TableName = t.TableName 
          }; 

     return Json(formattedData.ToList(), "text/json"); 
    } 

동적 테이블에는 필터링 된 테이블과 테이블 이름을 표시하는 각 행 및 테이블을 삭제할 수있는 양식이 나열됩니다. JSON Reults는 jQuery 함수 "OnSuccess"에서 생성됩니다.

예 :

내 테이블 1 | 테이블 삭제 버튼

내 테이블 2 | 테이블 삭제 버튼

내 테이블 3 | 삭제 테이블 버튼

...

그래서 지금 내가 할 수 있기를 원하는 행을 형성하고 테이블이 삭제 된 후 일단의 새로 고침 목록을 가져 게시물 삭제 버튼을 클릭하는 것입니다 테이블에서 삭제 된 항목을 뺀 값. 이것을 실현하기 위해 내 DeleteTable 액션 executesthe 삭제 후 GetTableInfo이 JSONResult를 반환합니다 (이것은 테이블을 처음에 포 콜하는 호출입니다). 삭제 양식이 눈에 띄지 않는 ajax로 설정되어 OnSuccess 함수가 테이블을 다시 채우는 기능을 호출합니다. 문제는 JSON 문자열이 두 번째로 반환되지만 테이블에 다시 만들어지지 않습니다.

나는 혼란 스럽다, 아무도 도와 줄 수 있습니까? 또한 나는 올바른 방향으로 나아가고 있는가? MVC3 태그를 사용하여 Ajax.BeginForm을 사용하여 동적으로 테이블 내용을 만드는 방법을 배울 수 없어 jquery가 기본값이되었습니다.

Answer 1

행 안에 양식 태그가 필요하지 않습니다. jquery ajax를 사용하여 원하는 것을 게시하십시오.

for (var i = 0; i < data.length; i++) { 
     var name = data[i].TableName; 
     var id = data[i].TableId; 
     targetId.append('<tr data-id=\'' + id + \'' ><td>' + name + '</td><td class="buttoncol">' + 
         '<input id="tableId" name="tableId" type="hidden" value="' + id + '" />' + 
         '<input id="schemeId" name="schemeId" type="hidden" value="' + scheme + '" /> ' + 
         '<input id="tableTypeId" name="tableTypeId" type="hidden" value="' + tableType + '" /> ' + 
         '<input id="requestedBy" name="requestedBy" type="hidden" value="' + requestedBy + '" /> ' + 
         '<input type="button" value="Delete table" class="deleteButton" id="deleteButton" /></td></tr>'); 
     if (requestedBy.length <= 0) { 
      $('form input#deleteButton').attr('disabled', true); 
     }; 
    }   

$(".deleteButton").click(function(){ 
    var btn = $(this); 
    var currentTr = btn.closest("tr"); 
    var tableID = currentTr.attr("data-id"); 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: {id : tableID}, 
     success: function(){ 
     var tr = $('#tablesList tr[data-id="' + tableID +'"]'); 
     tr.remove(); 
     }, 
     dataType: 'JSON' 
    }); 
});