Jquery無法執行控制器操作並刷新局部視圖

我有一個模式窗口的視圖，您可以拖動圖像進行上傳。單擊模式窗口上的保存按鈕後，我將圖像發佈到控制器的UploadImage操作中，隱藏模式，然後再次調用get動作以重新加載包含上傳圖像列表的PartialView。Jquery無法執行控制器操作並刷新局部視圖

我的圖片上傳正常，但部分操作從未被擊中。

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

這是相關的Jquery在我的js文件：

$("#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將顯示包含新圖像的圖像列表。任何想法，我在這裏搞砸了嗎？

來源

2017-04-13 Brad

請記住，「ajax」中的第一個「a」代表「異步」。你想在開始做其他事情之前等待第一個Ajax的返回。把它放在'.success'方法中。 http://api.jquery.com/jquery.ajax/ – nurdyguy

你釘了它，謝謝你的提醒！我沒有意識到第一個Ajax可能還沒有回來。通過成功方法中的部分ajax，一切都很好。謝謝。如果你發佈這個答案我會接受它。 – Brad

您的代碼在第一次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/

來源

2017-04-13 21:28:47 nurdyguy

Jquery無法執行控制器操作並刷新局部視圖

回答

相關問題