将数据从asp.net mvc中的2个不同jquery传递到同一个控制器答案

【问题标题】：Pass data to same Controller from 2 different jquerys in asp.net mvc将数据从asp.net mvc中的2个不同jquery传递到同一个控制器
【发布时间】：2021-02-04 21:00:09
【问题描述】：

我的项目包括从用户绘制的坐标对图像进行 OCR 读取。所以我制作了 2 个外部 javascript，一个操作矩形，第二个操作文件（删除、预览..）

文件上传.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}

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

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

【问题讨论】：

标签： javascript asp.net-mvc-5

【解决方案1】：

如果您想使用视图模型（在您的情况下为 ImageUploadModel）上传文件，那么您需要考虑两件事。

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

HttpPostedFileBase ImageUpload { get;放; }
您应该拥有带有模型绑定的强类型视图。如下所示：

@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="multipart/form-data" 属性。

控制器代码如下：

[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}

【讨论】：