将数据从asp.net mvc中的两个不同jquerys传递到同一个Controller

Question

我的项目是根据用户绘制的坐标对图像进行OCR读取。因此，我制作了两个外部java脚本，一个处理矩形，另一个处理文件(删除、预览..(

文件上传。JS-

function saveImage() {
var file = $("#imageBrowser").get(0).files;
var data = new FormData;
data.append("ImageFile", file[0]);
$.ajax({
async: true,
type: "POST",
dataType: "JSON",
url: "/OcrImage/OcrOnImage",
data: data,
processData: false,
contentType: false,

})
}

RectangleDrawing.js

$(function () {
$('#btnSend').click(function (e) {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(boundingBoxes),
url: "/OcrImage/OcrOnImage",
});
});
});

控制器

[HttpPost]
public ActionResult OcrOnImage(ImageUploadModel objeImageViewModel, Coordinate[] Coordinates)
{//code}

我的问题是如何通过一次提交将数据从每个javascript传递到一个控制器。请记住，我曾尝试使用razorview上传文件，但我只能传递一个数据，即坐标或要上传的文件。

如果有更好的方法，请举例说明。提前谢谢。如果不清楚，我可以提供更多信息。

Answer 1

如果您想使用视图模型(在您的案例中是ImageUploadModel(进行文件上传，那么您需要考虑两件事。

1. 您的视图模型应该包含HttpPostedFileBase类型的属性，如下所示：

   HttpPostedFileBase ImageUpload｛get；set；｝

2. 您应该具有带有模型绑定的强类型视图。如下所示：

@model ImageUploadModel
<form action="" method="post" enctype="multipart/form-data">
<div>
@Html.LabelFor(m => m.ImageUpload)
@Html.EditorFor(m => m.ImageUpload)
</div>
<button type="submit">Create</button>

如果您想使用@using(Html.BeginForm(((｛…｝帮助程序来代替使用表单，但对于文件上传，您必须具有此enctype="多部分/形式数据"；属性

控制器代码如下：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult OcrOnImage(ImageUploadModel model)
{
var validImageTypes = new string[]
{
"image/gif",
"image/jpeg",
"image/pjpeg",
"image/png"
}
if (model.ImageUpload == null || model.ImageUpload.ContentLength == 0)
{
ModelState.AddModelError("ImageUpload", "This field is required");
}
else if (!imageTypes.Contains(model.ImageUpload.ContentType))
{
ModelState.AddModelError("ImageUpload", "Please choose either a GIF, JPG or PNG image.");
}
if (ModelState.IsValid)
{
var image = new Image
{
Title = model.Title,
AltText = model.AltText,
Caption = model.Caption
}
if (model.ImageUpload != null && model.ImageUpload.ContentLength > 0)
{
var uploadDir = "~/uploads"
var imagePath = Path.Combine(Server.MapPath(uploadDir), model.ImageUpload.FileName);
var imageUrl = Path.Combine(uploadDir, model.ImageUpload.FileName);
model.ImageUpload.SaveAs(imagePath);
image.ImageUrl = imageUrl;
}
db.Create(image);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(model);
}

我从来没有遇到过这样的情况，文件上传和另一个行动正在进行，这在某种程度上违反了SRP(单一责任原则(。顺便说一句，你可以试着用js进行协调，就像你上面描述的那样，把坐标列表/数组放在下面的控制器操作中，让我看看它是否有效。

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult OcrOnImage(ImageUploadModel model,Coordinate[] Coordinates) {//like above}