Jquery刪除後部分視圖不刷新

Question

在我的MVC 4應用程序中，刪除操作後部分視圖不刷新。我的部分觀點如下

@model IEnumerable<SFRS.DataMarketPlace.Data.Dataset_Files> 
@using Microsoft.Web.Helpers; 

@{ int datasetId = 0;} 

@foreach (var item in Model) 
{ 
datasetId = item.DatasetID; 

<div class="FileLinkBox clearfix)"> 
    <a class="FileLink FileLinkColor" href="@Href("/files")/dataset/@item.FilePath">@item.FilePath</a> 
</div> 
<div class="deleteFileLink"><a class="removeFile" href="#" data-id="@item.ID">(Delete File)</a> </div> 
} 

@FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: true, includeFormTag: false, addText: " Add more files") 
<a href="#" onclick="removeFile(); return false;">Remove last file</a> 


<script type="text/javascript"> 

$('.removeFile').click(function() { 
    var fileid = $(this).attr('data-id');    
    var answer = confirm ("Are you sure you want to delete this file?"); 
    if (answer) { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("RemoveDatasetFile", "Dataset")', 
      data: { id: fileid, datasetId: @datasetId } 

     }) 
      .success(function(result) { 
      }) 
      .error(function(xhr, status) { 
       alert(status); 
      }); 
    }  

}); 

刪除操作不工作，當我刷新頁面我看到刪除的文件。看看下面我怎麼稱呼從主力

<div class="col-sm-8"> 
    @Html.Partial("_DatasetFiles", @Model.Dataset_Files) 
</div> 

負責處理此請求的方法，這部分的示意圖如下

[HttpPost] 
    public virtual PartialViewResult RemoveDatasetFile(int id,int datasetId) 
    { 
     this.UnitOfWork.DatasetRepository.RemoveDatasetFileByDatasetIdAndId(id,datasetId); 
     this.UnitOfWork.SaveChanges(); 

     var revisedDatasetFiles = this.UnitOfWork.DatasetRepository.GetDatasetFilesByDatasetId(datasetId); 
     return PartialView("_DatasetFiles", revisedDatasetFiles); 
    } 

Answer 1

你應該首先提供一些識別到你的DIV容器。

<div class="col-sm-8 target"> 
    @Html.Partial("_DatasetFiles", @Model.Dataset_Files) 
</div> 

然後您應該按照以下方式處理從服務器發送的響應。

<script type="text/javascript"> 

$('.removeFile').click(function() { 
    var fileid = $(this).attr('data-id');    
    var answer = confirm ("Are you sure you want to delete this file?"); 
    if (answer) { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("RemoveDatasetFile", "Dataset")', 
      data: { id: fileid, datasetId: @datasetId } 

     }) 
      .success(function(result) { 
       // Here you should have a code to render the server response to your target div 
       $(".target").html(result); 
      }) 
      .error(function(xhr, status) { 
       alert(status); 
      }); 
    }  

}); 

Answer 2

編輯

變化，使：

1）

此行可以搞亂您

var fileid = $(this).attr('data-id'); 

應改爲

var fileid = $(this).data('id'); 

當您使用數據 - *屬性，你可以訪問它們通過。數據（） http://api.jquery.com/data/

同時，始終開拓您的瀏覽器開發人員工具在調試時，通常可以在「控制檯」選項卡中看到類似這樣的錯誤：

2）

像我上面的回答，你應該更換元素的HTML你.success功能

$.ajax({ 
     type: 'POST', 
     url: '@Url.Action("RemoveDatasetFile", "Dataset")', 
     data: { id: fileid, datasetId: @datasetId } 
    }) 
    .success(function(result) { 
     $(".target").html(result); // Replace the contents of this element with the result returned from your controller 
    }) 
    .error(function(xhr, status) { 
     alert(status); 
});