带有 ViewModel 的 Asp Core Ajax Post答案

【问题标题】：Asp Core Ajax Post with ViewModel带有 ViewModel 的 Asp Core Ajax Post
【发布时间】：2016-04-30 19:46:32
【问题描述】：

我正在开发一个 Asp 核心项目，并尝试通过 Ajax 将文件选择器 blob Javascript 对象发布回操作以将图像上传到 Amazon S3。我尝试了几种不同的方法，但无法让它发挥作用。这似乎是一个模型绑定问题。当我仅使用字符串参数将图像 url 发布到操作时，此功能有效，但我也需要文件名。

问题：正在运行的模型对象为空

Ajax 代码：

function pickit() {
            //Start the filepicker
            filepicker.pick(
              {
                  //cropRatio: 4 / 3,
                  ////cropMin: [200, 100],
                  //cropForce: true,
                  mimetype: 'image/*',
                  //services: ['CONVERT', 'COMPUTER', 'FACEBOOK', 'FLICKR', 'DROPBOX', 'INSTAGRAM', 'BOX', 'EVERNOTE', 'GMAIL', 'PICASA', 'IMAGE_SEARCH', 'FTP', 'GOOGLE_DRIVE', 'SKYDRIVE', 'URL', 'WEBCAM', 'CLOUDDRIVE', 'IMGUR', 'CLOUDAPP'],
                  conversions: ['crop', 'rotate', 'filter', 'scale']
              },
              function (Blob) {
                  $("#imagespinner").removeClass("invisible")
                  $.ajax({
                      type: "POST",
                      url: '@Url.Action("CreateImage","Photos")',
                      contentType: 'application/json',
                      dataType: "json",
                      data: JSON.stringify(Blob),
                      success: function (data, textStatus, jqXHR) {
                          $("#ImageURL").val(data);
                          var img = document.getElementById("imgImageURL");
                          img.src = data;
                          $("#imagespinner").addClass("invisible")
                      },
                      error: function (jqXHR, textStatus, error) {
                          alertify.alert(jqXHR.responseText);
                          $("#imagespinner").addClass("invisible")
                      }
                  });


                  setTimeout(function () { $('#image-loading-message').fadeOut() }, 500);

              },
               function (FPError) {

               },
               function (FPProgress) {

               }

             );
        };

控制器动作：

    [HttpPost]
        public async Task<JsonResult> CreateImage(FilePickerViewModel model)
        {
            if (!String.IsNullOrWhiteSpace(model.url))
            {
                //Code to Upload to S3
return Json("ImageURL");
            else
            {
                Response.StatusCode = 400;
                return Json("Url is needed");
            }
        }

视图模型：

    public class FilePickerViewModel
{
    public Int32 id { get; set; }
    public String url { get; set; }
    public String filename { get; set; }
    public Int32 size { get; set; }
    public String client { get; set; }
    public String mimetype { get; set; }
    public Boolean isWriteable { get; set; }
}

感谢您的帮助

【问题讨论】：

什么是Blob？字符串化后是什么样子的？
Blob 是文件选择器为上传的图像返回的 javascript 对象。字符串化它看起来像 {client: "computer", filename: "foobar.jpg", id:1,isWriteable:true,mimetype:"image/jpeg",size:12345,url:"foobar.com/foo"}

标签： ajax asp.net-core-mvc

【解决方案1】：

我发现了问题，控制器动作需要声明 [FromBody] 因为这是来自 ajax 帖子

【讨论】：