angularjs - [FromBody] 中的字节数组和 JSON

标签 angularjs angular typescript asp.net-web-api asp.net-web-api2

我正在尝试传递一个包含不同数据类型的对象。我总是在 Web API 中获取 orderDetails 的空值。

但是如果这样做,

purchaseOrder.Attachments = null, 

然后在客户端中,orderDetails 不再为空,我还有其他信息,如“SendEmail”和 PurchaseOrderNumber。

看起来我可能没有在客户端(angular 2)中正确设置参数。

但是,从控制台应用程序测试相同的 Web Api 方法工作正常,我没有得到空值。

我需要将 JSON 数据和字节数组分开吗?

问候, -艾伦-

模型

public class Attachments
{
   public int AttachmentId { get; set; }
   public string FileName { get; set ;}
   public byte[] FileData { get; set ;}
}
public class UpdatePurchaseOrderViewModel
{
      public bool SendEmail { get; set; }
      public int PurchaseOrderNumber { get; set; }
      public Attachments Attachments { get; set;
}

这是我的 Web API put 方法定义

[HttpPut("AddPurchaseOrderNumber/{purchaseOrderId}")]
       public StatusCodeResult AddPurchaseOrderNumber(int purchaseOrderId, [FromBody] UpdatePurchaseOrderViewModel orderDetails)
       {
           try
           {
               var status = _service.AddPurchaseOrderNumber(purchaseOrderId, orderDetails);
               if (status == 200)
                   _unitOfWorkAsync.SaveChanges();
               else return StatusCode(status);//No Data
           }
           catch
           {
               return StatusCode(400); // Bad Request
           }
           return StatusCode(200);//OK
       }

typescript 片段

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept','application/json');

let options = new RequestOptions({ headers: headers });
var body = JSON.stringify(
                purchaseOrder
            );

var uri = 'http://localhost:33907/api/purchaseorder/addpurchaseordernumber/' + purchaseOrderId;

     return this._http.put(uri, body , options)
            .map((response: Response) => {
             let data = response.json();
             if (data) {
                        return true;
                    }
                    else {
                        return false;
                    }
                })

更新

订单详情创建如下

  let file = Observable.create((observer) => {
            let fr = new FileReader();
            let data = new Blob([this.attachment]);
            fr.readAsArrayBuffer(data);
            fr.onloadend = () => {
                observer.next(fr.result);
                observer.complete();
            };
            fr.onerror = (err) => {
                observer.error(err);
            }
            fr.onabort = () => {
                observer.error("aborted");
            }
        });
        file.map((fileData) => {
            //build the attachment object which will be sent to Web API
            let attachment: Attachments = {
                AttachmentId: '0',
                FileName: this.form.controls["attachmentName"].value,
                FileData: fileData
            }
            //build the purchase order object
            let order: UpdatePurchaseOrder = {
                SendEmail: true,
                PurchaseOrderNumber:this.form.controls["purchaseOrderNumber"].value * 1, //for casting purpose
                Attachments: attachment
            }
            console.log("Loading completed");
            return order;
        })

最佳答案

当在客户端和 WebAPI 端点之间来回发送具有字节数组作为属性的对象时,我通常使用存储属性的 DTO 将其显式定义为 Base64 字符串。在服务器端,我通过将 Base64 字符串转换为字节数组或从字节数组转换为服务器端操作并存储在数据库中,将 DTO 映射到我的实体。

序列化程序会自动执行类似的操作,但从 JavaScript 传递的格式可能与 WebAPI JSON 序列化程序所期望的不匹配(这就是它在您的 C# 控制台应用程序中运行的原因)。

您没有在 JavaScript 中包含如何创建 purchaseOrder 对象,因此我无法评论该对象的设置方式 - 这可能是您的问题所在。

关于angularjs - [FromBody] 中的字节数组和 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42929789/

相关文章:

angularjs - 如何从 Angular2 本地存储中保存和检索数据?

html - 如何在 Angular 应用程序中显示电子邮件,就像它在电子邮件客户端中显示一样

node.js - 使用 ASP.Net Core 应用程序填充 Angular 上的下拉列表时出现错误 TS2717

javascript - 将方法从 Controller 注入(inject)到未使用正确变量调用的指令

javascript - Grunt 连接目录文件的最有效方法?

angular - 如何在 Angular 9 项目中延迟加载 HammerJS?

javascript - 类型 'Element' 的参数不可分配给类型为“ReactElement<any>”的参数

typescript - Eslint 未捕获 React-hooks/exhaustive-deps 违规行为

javascript - 点击后退按钮后停止 Angular $timeout 计时器

javascript - 使用 AngularJS 从 Behance Api 发布图像