Jquery 无法执行控制器操作并刷新部分视图答案

【问题标题】：Jquery fails to execute controller action and refresh partial viewJquery 无法执行控制器操作并刷新部分视图
【发布时间】：2017-04-13 18:13:19
【问题描述】：

我有一个带有模态窗口的视图，您可以将图像拖到该窗口进行上传。单击模态窗口上的保存按钮后，我将图像发布到控制器的 UploadImage 操作，隐藏模态，然后对 get 操作进行另一个 ajax 调用以重新加载包含已上传图像列表的 PartialView。

我的图片上传正常，但从未点击过部分操作。

我没有太多使用 Jquery 的经验，所以我不确定自己做错了什么。

这是我观点的相关部分：

    <div id="viewSavedContentAreaDiv">
        @Html.Action("PartImagesPartial", "Part", new { PartID = Model.ID }) 
    </div>

这是我的控制器的相关部分：

    public ActionResult PartImagesPartial(int PartID)
    {
        IEnumerable<PartImageViewModel> images = _map.GetPartImages(PartID);

        return PartialView("PartImagesPartial", images);
    }

这是我的 js 文件中的相关 Jquery：

$("#btnDroppedSave").click(function () {

var imgSource = $("#drop").find("img").attr("src");

if (imgSource == undefined)
    $("#validateDroppedImage").show();

if (imgSource != undefined) {
    var partId = $('#ID').val();
    var formData = new FormData();
    var totalFiles = 1;
    var dropedFile = newFile;
    formData.append("FileUpload", dropedFile);
    formData.append("PartID", partId)

    $.ajax({
        type: "POST",
        url: '/Part/UploadImage',
        data: formData,
        dataType: "html",
        contentType: false,
        processData: false,
     });

    $('#part-image-modal').modal('hide');

    //this should refresh PartImagesPartial
    $.ajax({
        url: "/Part/PartImagesPartial",
        type: "GET",
        dataType: "html",
        contentType: false,
        data: { PartID: (partId) },
        success: function (result) {
            $("#viewSavedContentAreaDiv").empty().append(result);
        }
    });        
}
});

单击按钮后不会触发 PartImagesPartial 操作，但文件会上传。如果我手动刷新包含视图，则部分显示包含新图像的图像列表。有什么想法我在这里搞砸了吗？

【问题讨论】：

请记住，“ajax”中的第一个“a”代表“异步”。您想等待第一个 ajax 返回，然后再开始做其余的事情。把它放在.success 方法中。 api.jquery.com/jquery.ajax
您成功了，感谢您的提醒！我没有意识到第一个 ajax 可能还没有返回。使用成功方法中的部分ajax，一切都很好。谢谢你。如果您将此作为答案发布，我会接受。

标签： jquery asp.net-mvc

【解决方案1】：

您的代码在导致问题的第一个 ajax 调用返回之前发生了第二个 ajax 调用。如果您将模态隐藏和第二次调用都移动到第一个 ajax 的 .success 方法中，那么它应该修复它。我可能会将第二个 ajax 调用包装在一个单独的函数中并调用它而不是嵌套 ajax 调用本身。像这样的：

//... function stuff up here
   $.ajax({
       type: "POST",
       url: '/Part/UploadImage',
       data: formData,
       dataType: "html",
       contentType: false,
       processData: false,
       success: function() {
           RefreshPartial();
       },
       complete: function(){
           $('#part-image-modal').modal('hide');
       }
    });

}//--- end previous function here

function RefreshPartial(){
   //this should refresh PartImagesPartial
   $.ajax({
       url: "/Part/PartImagesPartial",
       type: "GET",
       dataType: "html",
       contentType: false,
       data: { PartID: (partId) },
       success: function (result) {
           $("#viewSavedContentAreaDiv").empty().append(result);
       }
   }); 
}

您可以在关闭模式时玩一下，看看什么看起来最好。把它放在complete 意味着它会在最后发生，这可能是也可能不是你想要的。

特别说明：
新的 jQuery 规范将 success、error 和 complete 折旧并替换为更多使用 .done(...)、.fail(...) 和 .always(...) 的字符串表示法。更多信息在这里：http://api.jquery.com/jquery.ajax/

【讨论】：