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); 
});