2016-08-22 5 views
0

ajax로 부분 뷰를 다시로드하는 중 흥미로운 문제가 있습니다.부분 뷰 및 Ajax 다시로드 - ASP.NET MVC

<div> 
    <div id="items"> 
     @Html.Partial("SubView", Model.Items); 
    </div> 
<div> 

서브 뷰는 다음과 같이 일반적으로 테이블에있는 항목의 목록은 다음과 같습니다 :

<table class="table table-striped"> 
    <tr> 
     <th>Date</th> 
     <th>Time</th> 
     <th></th> 
</tr> 
@foreach (var item in Model) 
{ 
    <tr> 
     @Html.HiddenFor(modelItem => item.Id) 
     <td>@Html.DisplayFor(modelItem => item.Date)</td> 
     <td>@Html.DisplayFor(modelItem => item.Time)</td> 
     <td> 
      @Html.ActionLink("Delete", "Delete", new { itemId= item.Id, page = Model.PageNumber }, new { @class = "deleteItem" }) 
    </td> 
</tr> 
} 

의 deleteItem 액션 컨트롤러에 기본적으로 다음과 같은 작업을 수행 나는 마스터보기에서 다음과 같은 설정을 가지고 :

[HttpDelete] 
    public ActionResult DeleteItem(int itemId, int page) 
    { 
     this.dbService.DeletItem(expenseId); 
     return PartialView("SubView", this.GetPagedList(page)); 
    } 

내가 마스터보기에서 참조하는 스크립트에서 나는 follo 날개 코드 :이 처음으로 잘 작동하지만 두 번째는 단지 부분보기를로드

$(document).ready(function() { 
// delete expense 
$(".deleteItem").click(function() { 

    $.ajax({ 
     url: this.href, 
     type: 'delete', 
     success: function (result) { 
      $("#items").html(result); 
     } 
    }); 

    return false; 
}); 

-

...> 자바 스크립트 코드가 실행되고 있지 않기 때문에 내가 그 비교적 새로운 오전 물건과 나는 약간 혼란스러워하고있다. 모든 타사 스크립트가 Layout.cshtml에 렌더링됩니다.

+0

당신은 내가 그 누락 된 조각이다, –

+0

추가,뿐만 아니라 전체 코드의 deleteItem 게시하시기 바랍니다. 내가 게시 한 코드와 동일한 코드가 이전 프로젝트에서 작동했지만 마스터 뷰에서 직접 스크립트를 만들었습니다. 아마도 그것이 작동하는 이유 일 것입니다. – Myar

답변

1

동적으로 생성 된 항목에 .click() 이벤트를 첨부 할 수 없습니다. 부분 뷰를 렌더링하는

$(document).on('click', '.deleteItem', function() { 
    // Deletey stuff here. 
}); 
+0

덕분에 매우 간단 말했듯이 – Myar

+0

문서가 처음로드 될 때, 즉 바인딩이 발생할 때 동적으로 생성 된 항목이 DOM의 일부가 아니기 때문입니다. 위의 코드는'.click()'이벤트를 대신'document'에 붙입니다. –

0

를 들어, 오히려 ActionResult보다 수익 형 PartialViewResult을해야 : 당신은이 방법을 구성해야합니다. ActionResult가 리디렉션을 유발하기 때문입니다.

이렇게 DeleteItem 함수를 편집 해보십시오.

[HttpDelete] 
    public PartialViewResult DeleteItem(int itemId, int page) 
    { 
     this.dbService.DeletItem(expenseId); 
     return PartialView("SubView", this.GetPagedList(page)); 
    } 
+0

불행히도 전혀 변경되지 않았습니다. – Myar

관련 문제