如何用Javascript更新MVC模型clientside？

在ASP.NET MVC項目中，我使用FineUploader jQuery插件將圖像文件上傳到Web服務器。文件上傳部分工作正常，但現在我需要將上傳的圖像名稱保存到具有相應模型詳細信息（產品詳細信息和產品圖像名稱）的數據庫中。如何用Javascript更新MVC模型clientside？

型號：

public class Product 
{ 
    [Key] 
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] 
    public int Id { get; set; } 
    public string Name { get; set; } 
    ... 
    public virtual IEnumerable<ProductImage> Images { get; set; } 
} 

public class ProductImage 
{ 
    [Key] 
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] 
    public int Id { get; set; } 
    public string FileName { get; set; } 
}

當上載完成

... 
<div id="fine-uploader"></div> 
<div id="divImgs"> 
    <ul> 
    </ul> 
</div> 
.... 

<script> 
    function createUploader() { 
     var uploader = new qq.FineUploader({ 
      element: document.getElementById('fine-uploader'), 
      debug: true, 
      request: { 
       endpoint: '@Url.Action("UploadFile", "Upload")' 
      }, 
      validation: { 
       allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'] 
      }, 
      deleteFile: { 
       enabled: true, 
       forceConfirm: true, 
       endpoint: '@Url.Action("DeleteFile", "Upload")' 
      }, 
      callbacks: { 
       onComplete: function (id, fileName, responseJSON) { 
        if (responseJSON.success) { 
         $('#divImgs ul').append(
          $('<li>').append(
           $('<img>').click(
            function DeleteFileCall() { 
             $.ajax({ 
              type: "POST", 
              url: '@Url.Action("DeleteFile", "Upload")' + '/' + fileName, 
              contentType: "application/json; charset=utf-8", 
              dataType: "html" 
             }); 
             $(this).parent().remove(); 
          }).attr('src', responseJSON.uploadedFilePath)) 
         ); 
        } 
       } 
      } 
     }); 


     } 

     window.onload = createUploader; 
</script>

這是我的HTML & JavaScript代碼上傳的文件&顯示上傳文件中的頁面如何添加上傳文件只有在用戶保存模型數據時，才能使用javascript &更新數據庫的名稱。

來源

2013-07-02 Nalaka526

這似乎並非是個好問題，上傳你的有關服務器端的代碼，並沒有真正涉及到圖書館專門詢問

例子。此外，您應該使用Fine Uploader jQuery插件，並且我不確定爲什麼您啓用了刪除文件功能並正在發送您自己的刪除文件ajax請求。 –

@RayNicholus是的，我剛剛刪除了[FineUploader]標籤..也是第二點，你是正確的..其實我嘗試'FineUploader'中的'deleteFile'功能，但後來意識到我需要自己的刪除方法刪除以前添加的圖像（當編輯現有的產品），但忘了刪除FineUploader的'deleteFile'方法...... :( – Nalaka526

我也建議你使用Fine Uploader的jQuery插件，因爲你已經在使用jQuery了。 –

如果您要在控制器中上傳Stream正文，則可以將該文件名作爲查詢字符串參數傳遞，並將其映射到函數參數以供日後保存。從另一個項目

[WebInvoke(UriTemplate = "/AddImage/{filename}", Method="POST")] 
public PrimitiveResponse AddImage(string filename, Stream imageData) 
{ 
    //magic happens here 
}

來源

2013-07-02 17:38:56 mckeejm

這種情況下的文件名將被包含在多部分邊界的頭部，該文件通過多部分編碼的POST請求發送。 –

如何用Javascript更新MVC模型clientside？

回答

相關問題