Question

我有一个带模态窗口的视图，您可以拖动图像进行上传。单击模态窗口上的保存按钮后，我将图像发布到我的控制器的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操作永远不会被点击，但文件会上传。如果我手动刷新包含视图，则partial会显示包含新图像的图像列表。我有什么想法搞砸了？

Answer 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(...)和{{1替换为更多的字符串表示法}}。有关详细信息，请访问：http://api.jquery.com/jquery.ajax/

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

1 个答案: