Ajax 将空对象发布到 mvc 控制器

Posted 2023-04-01

【中文标题】Ajax 将空对象发布到 mvc 控制器

【英文标题】：Ajax posting null object to the mvc controller

【发布时间】：2021-11-07 22:03:35

【问题描述】：

我试图将一个对象传递给 MVC 控制器，但在控制器上，我通过 ajax 传递的对象得到了空值。

我可以看到我的对象在视图中有一些数据，但无法将它们绑定到控制器。

控制器

        [HttpPost]
        public ActionResult AddImage(ImageModel imageModel)
        
            UploadRepo.saveImage(imageModel);
            return null;
        

型号

namespace Fileupload.Models

    public class ImageModel
    

        public int Id  get; set; 

        public string ImageData  get; set; 
    

我的 javascript 代码

        var url = input.value;
        var imageData = '';
        var finalUrL = '';
        console.log(input.files[0])
        var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
        if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
            finalUrL = await readAsDataURL(input.files[0])
            imageData = finalUrL.replace(/^data:image\/[a-z]+;base64,/, '').trim()
            var obj = 
                Id: 1,
                ImageData: imageData
            
            $.ajax(
                url: '/Upload/AddImage',
                type: "POST",
                data: JSON.stringify(obj),

                contentType: "application/json;",
                success: function (data) 
                    //successMessage();
                    $("form")[0].reset();
                ,
                error: function (xhr, textStatus, errorThrown) 
                    console.log("textstatus", textStatus, xhr)
                    // errorMessage();-
                
            );
            console.log("imagedata", myobj);
         else 
            $('#img').attr('src', '/assets/no_preview.png');
        
    

【问题讨论】：

您“通过网络”得到什么？您可以在网络选项卡中的 F12 浏览器屏幕中看到

不，我不是@Gandalf

在网络选项卡中，我可以看到请求负载是合法对象

我假设“合法对象”是指 JSON 字符串 看起来 像你期望的那样。然而控制器动作仍然是空的，对吧？所以，它是不合法的。您可以将 ImageModel 中的参数替换为FormCollection，然后显式转换为ImageModel，看看会出现什么样的错误

【参考方案1】：

ASP.NET MVC 中的附件文件必须是 HttpPostedFileBase 类型。因此，如下更改您的图像数据属性，即

public HttpPostedFileBase ImageData  get; set; 

然后在您的 [HttpPost] 方法中执行以下操作以从上传的文件中获取数据，即

// Upload File data.
byte[] fileByteData = new byte[model.ImageData.InputStream.Length];
model.ImageData.InputStream.Read(fileByteData, 0, fileByteData.Length);
string fileContentType = model.ImageData.ContentType;