如何從ajax文件上傳後的部分模型更新？

所以我有AJAX文件上傳部分（使用Jquery Form插件），它的工作完美，但我不知道文件上傳如何從ajax文件上傳後的部分模型更新？

<div> 
    @Html.Partial("PhotoUpload", Model.Place) 
</div>

這裏我打電話的部分，並給予它部分後更新模型值的模型。

@model PlaceMap.DAL.Entities.Place 
@using (Html.BeginForm("PhotoUpload", "Place", FormMethod.Post, new { @id = "photoUpload", enctype = "multipart/form-data" })) 
{ 
    { 
     @Html.ValidationSummary(true, "Image upload was unsuccessful") 
     @Html.HiddenFor(m => m.Photo)                                             
     <input type="file" id="file" name="file"/> 
     <input type="submit" id="sbm" /> 
    } 
}

這是局部視圖，接受模型和形式的代碼上傳

var options = { 
    url: "/Place/PhotoUpload", 
    dataType: "json", 
    clearForm: true, 
    resetForm: true, 
    success: showResponse 
}; 

function showResponse(responseText, statusText, xhr, $form) 
{ 
    $('#photo').append('<img src="/Images/Places/' + responseText.Photo + '" />'); 
} 

$('#photoUpload').submit(function() 
{ 
    $('#photoUpload').ajaxSubmit(options); 
    return false; 
});

JavaScript代碼插件

[Authorize] 
    [HttpPost] 
    public ActionResult PhotoUpload(string Photo, HttpPostedFileBase file) 
    { 
     try 
     { 
      using (var ms = new MemoryStream()) 
      { 
       //some logic here 
       return Json(new { Photo = filename }); 
      } 

     } 
     catch (ArgumentException) 
     { 

     } 

     return PartialView(); 
    }

控制器操作代碼。它返回文件名稱，它將js功能「showResponse」並將圖像附加到div。這一切都很完美，但我必須將文件名寫入@Model.Photo這部分，我不知道該怎麼做。有什麼建議麼？

來源

2012-05-14 dantix

一種可能性是使用text/plain從服務器：

return Json(new { Photo = filename }, "text/plain");

，並在客戶端上手動解析：

function showResponse(responseText, statusText, xhr, $form) { 
    var data = $.parseJSON(responseText); 
    $('#photo').append('<img src="/Images/Places/' + data.Photo + '" />'); 
}

很明顯，你的慾望刪除dataType: 'json'選擇這個工作。

另一種可能性是遵循什麼在documentation解釋和編寫自定義操作結果將包裹與<textarea>標記您的JSON響應：

瀏覽器支持XMLHttpRequest的2級就能上傳隨着上傳的進行，無縫地進行文件處理，甚至可以獲得進度更新。對於舊版瀏覽器，使用回退技術，其中涉及iframe，因爲不可能使用XMLHttpRequest對象的第1級實現上載文件。這是常見的後備技術，但它有固有的侷限性。 iframe 元素用作表單提交操作的目標，其中表示將服務器響應寫入iframe。如果響應類型是HTML或XML，但是如果響應類型是腳本或JSON，這兩個都很好，但兩者通常都包含字符，如果在HTML中找到，則需要使用實體引用來重複使用該字符，這是行不通的標記。

要使用當IFRAME模式佔腳本和JSON響應的困難，這個插件可以讓這些反應被嵌入在textarea元素，建議您使用時，這些響應類型這麼做結合文件上傳和較舊的瀏覽器。但請注意，如果表單中沒有文件輸入，則請求將使用正常的XHR來提交表單（不是 iframe）。這會讓服務器代碼的負擔知道何時使用 textarea以及何時不使用。如果您願意，可以使用插件的iframe選項強制它始終使用iframe模式，然後您的服務器始終可以將響應嵌入到textarea中。但推薦的解決方案是測試'X-Requested-With'請求標頭。如果該頭的值是'XMLHttpRequest'，那麼你知道該表單是通過ajax發佈的。

來源

2012-05-14 12:36:06

我想你誤解了問題。此代碼完美運行。我只需要在其中添加模型更新邏輯。從部分視圖中可以看出，它是強類型的，所以我需要將上傳文件的文件名放在@Model中，我嘗試使用ViewData和ViewBag，但沒有運氣。 – dantix

從我的理解你想要獲取服務器在你的'showResponse'方法中返回的照片文件名。我不明白你的意思是更新模型。不再有模型。您正在向服務器發送AJAX請求。 –

如果你看第一段代碼，你會看到我正在將模型傳遞給這個部分。這個模型我想更新。 – dantix

如何從ajax文件上傳後的部分模型更新？

回答

相關問題