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

<强>被修改

更改为：

1）

这条线可能搞砸了你

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

应该阅读

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

使用data- *属性时，可以通过.data（）访问它们 http://api.jquery.com/data/

此外，在调试时始终打开浏览器开发人员工具，通常可以在“控制台”选项卡中看到这样的错误

2）

就像我上面的答案一样，你应该替换.success函数中的元素的html

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

Answer 2

您应首先为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);
            });
    }    

});

部分视图在Jquery删除后没有刷新

2 个答案: