Ajax 업데이트는 처음에만 작동합니다.

Question

Ajax로 PartialView에서 업데이트 레코드에 문제가 있습니다. 나는 View @ Html.Action ("_PartialView", "Controller", 새로운 {id = OrderId}) 및 PartialView with Ajax Form을 가지고있다. 하지 -

@model IEnumerable<WebMartin.Models.OrderExecutionRemark> 
@{ 
AjaxOptions ajaxOpts = new AjaxOptions 
{ 
    UpdateTargetId = "orderdisplayremark", 
    Url = Url.Action("OrderRemarkDelete", "OrderExecution"), 
    HttpMethod = "POST"    
};  
} 

@ViewBag.Po 

@if (Model.Any()) 
{ 
<table id="orderdisplayremark"> 
    <thead> 
     <tr> 
      <th>Worker</th> 
      <th>Date</th> 
      <th>Remark</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var remark in Model) 
     { 
      <tr> 
       <td>@remark.UserName</td> 
       <td>@remark.OrderRemarkDate.ToString("yyyy-MM-dd")</td> 
       <td>@remark.OrderRemarkText</td> 
       <td> 
        @using (Ajax.BeginForm(ajaxOpts)) 
        { 
         @Html.Hidden("remarkid", remark.OrderRemarkId) 
         <input type="submit" value="Delete" /> 
        } 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
} 

및 컨트롤러

[HttpPost] 
    public PartialViewResult OrderRemarkDelete(int remarkid) 
    { 
     OrderExecutionRemark oer = db.OrderExecutionRemarks.Find(remarkid); 
     /* db.OrderExecutionRemarks.Remove(oer); 
     db.SaveChanges(); */ 
     ViewBag.Po = oer.OrderRemarkId; 

     return PartialView("_OERemarkPartial", db.OrderExecutionRemarks.Where(p => p.OrderId == oer.OrderId).ToList()); 
    } 

    [HttpGet] 
    [ChildActionOnly] 
    public PartialViewResult _OERemarkPartial(int id = 0) 
    { 
     return PartialView(db.OrderExecutionRemarks.Where(p => p.OrderId == id).ToList());   
    }  

문제

업데이트 후에 만 ​​처음 작동합니다. "삭제"버튼을 다시 누르기 전에 페이지를 새로 고침해야합니다. 어떻게 해결할까요? 나는 RedirectToAction (View)을 사용할 것이라고 생각했지만이 PartialView를 세 가지 뷰에서 사용하고있다.

PartialView는 근로자가 발주 한 주문에 대한 표시 설명입니다. 보시다시피 각 행에는 작업자 이름, 날짜, 발언 텍스트 및 양식이 포함되어있어 ID remark를 전달하여 작업을 삭제합니다. 많은 말 (많은 행)과 첫 번째 게시물 (삭제) 말을 한 후에는 테이블을 레코드로 업데이트해야하며 다음 발언을 삭제하려면 할 수 없습니다. 다음 발언을 삭제하려면 F5 (새로 고침 페이지)를 눌러야합니다. 어디가 잘못 됐니?

미리 답변 해 주셔서 감사합니다.

Answer 1

테이블의 다른 항목을 삭제하려고하면 코드가 제대로 작동합니다. 이상적으로 레코드를 삭제하기 위해 action 메소드를 성공적으로 호출 한 후에 UI에서 해당 항목을 제거하기 만하면 삭제가 다시 시도되지 않습니다.

이렇게하려면 AjaxOptions에서 OnSuccess 특성을 지정할 수 있습니다. 이 메소드는 자바 스크립트 메소드이며 ajax 호출이 서버로부터 200 응답을 받으면 실행됩니다. 이 방법에서 이제

@{ 
    AjaxOptions ajaxOpts = new AjaxOptions 
    { 
     UpdateTargetId = "orderdisplayremark", 
     Url = Url.Action("OrderRemarkDelete", "Home"), 
     HttpMethod = "POST", 
     OnSuccess = "DeletionCompleted" 
    }; 
} 

, 당신이해야 할도 (삭제 버튼이

function DeletionCompleted() 
{ 
    $(this).closest("tr").remove(); 
} 

가이 코드는 새 데이터로 전체 테이블 내용을 다시로드하지 않습니다 클릭 현재의 행을 삭제하는 것입니다 현재 메서드는 그 부분 뷰를 반환합니다.) 단순히 행을 삭제합니다. 당신이 정말로 (이전 코드를 테이블 - 업데이트) 부분 뷰 결과와 기존의 테이블 내용을 바꾸려면 그래서 그 경우에, 당신은 정말, 당신이 그렇게 할 수있는 부분보기를

[HttpPost] 
public PartialViewResult OrderRemarkDelete(int remarkid) 
{ 
    varoer = db.OrderExecutionRemarks.Find(remarkid); 
    db.OrderExecutionRemarks.Remove(oer); 
    db.SaveChanges();  
    return Json(new { message="successfully deleted"}); 
} 

을 반환 할 필요가 없습니다 게다가.

function MyComplete(res) {   
     $("#orderdisplayremark").html(res); 
}