Частичный просмотр не обновляется после Jquery delete

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

При использовании данных- * атрибуты, вы можете получить доступ к ним через .data() 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); 
});