如何用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？

回答

相关问题