如何使用 Kendo for jquery 将上传的图像文件绑定到 ASP.NET MVC 5 模型？

Question

我已经准备好我能找到的关于这个主题的一切，但没有任何东西能解决我的问题。我是 Kendo 的新手（它的版本是 2018.1.221，已经很旧了），对 ASP.NET MVC 5 比较陌生，我的 jQuery 技能也很生疏。

我有一个 Kendo 网格，由仪表板模型填充。每行都有一个编辑按钮。我添加了一个新列来上传图像，但是当我保存时，我的控制器中的图像字段为空。我正在尝试将图像本身保存到我的数据库中，而不仅仅是 URL。

admin.js:

$(document).ready(function () {

var dashboardData = new kendo.data.DataSource({
    autosync: true,
    transport: {
        read: {
            url: APP_PATH + 'BIAdmin/DashboardList',
            dataType: "json",
            type: "POST"
        },
        update: {
            url: APP_PATH + 'BIAdmin/UpdateDashboard',
            dataType: "json",
            type: "POST"
        },
        create: {
            url: APP_PATH + 'BIAdmin/CreateDashboard',
            dataType: "json",
            type: "POST"
        },
        destroy: {
            url: APP_PATH + 'BIAdmin/DestroyDashboard',
            dataType: "json",
            type: "POST"
        },
        parameterMap: function (options, operation) {
            switch (operation) {
                case "read":
                    return {
                    };
                case "update":
                    return {
                        Dashboard: {
                            DashboardKey: options["DashboardKey"],                               
                            DashboardName: options["DashboardName"],                              
                            ThumbnailImage: options["ThumbnailImage"],                     
                        }
                    };
                case "create":
                    return {
                        Dashboard: {
                            DashboardKey: options["DashboardKey"],                              
                            DashboardName: options["DashboardName"],                              
                            ThumbnailImage: options["ThumbnailImage"],                              
                        }
                    };
            }
        }
    },
    schema: {
        model: {
            id: "DashboardKey",
            expanded: false,
            fields:
            {
                DashboardKey: { type: "number", editable: false },                  
                DashboardName: { type: "string", editable: true, validation: { required: true } },                  
                ThumbnailImage: { type: "byte", editable: true, validation: { required: false } },                  
            }
        }
    },
    pageSize: 20
});

$("#DashboardGrid").kendoGrid({
    dataSource: dashboardData,
    dataBound: function (e) {
        $("input[type='file']").kendoUpload();
        async: {
            saveUrl: '~/Controllers/BIAdmin/UpdateImage'  
            autoUpload: true;
        }
    },
    sortable: true,
    pageable: true,
    editable: "inline",
    toolbar: ["create"],
    columns:
        [
            {
                field: "DashboardKey", title: "Key", template: "#=DashboardKey#", width: "80px",
                filterable: { operator: "equals" }
            },              
            {
                field: "DashboardName", title: "Dashboard", width: "300px",
                filterable: { operator: "contains" }
            },              
            {
                field: "ThumbnailImage", title: "Thumbnail Image", editor: thumbnailEditor, width: "300px",
                filterable: false,
                sortable: false
            },
            
            { command: ["edit"], title: " ", width: "100px" }
        ]      
});

function thumbnailEditor(container, options) {
    $('<form action="" method="post" enctype="multipart/form-data"><input id="ThumbnailImage" type="file" data-role="upload" name="ThumbnailImage" /></form> ')
        .appendTo(container)
}});

BIAdminController.cs:

[HttpPost]
public ActionResult UpdateImage(DashboardImage dashboard, HttpPostedFileBase ThumbnailImage)
{
        try
        {
            Debugger.Break();  <--This never gets hit
            DashboardImage d = db.DashboardImage.Find(dashboard.ThumbnailImage);

            if (ThumbnailImage != null)
            {
                d.ImageName = "FakeImageName";
                d.ThumbnailImage = new byte[ThumbnailImage.ContentLength];
                ThumbnailImage.InputStream.Read(d.ThumbnailImage, 0, ThumbnailImage.ContentLength);
            }

            db.DashboardImage.Add(dashboard);
            db.SaveChanges();

            return Json(dashboard);
        }
        catch (Exception e)
        {
            ModelState.AddModelError("error", e.Message);
            return Json(null);
        }
}
   
public JsonResult UpdateDashboard(DashboardModel dashboard)
{
        try
        {
            Dashboard d = db.Dashboard.Find(dashboard.DashboardKey);
            d.DashboardName = dashboard.DashboardName ?? " ";
            DashboardImage di = new DashboardImage();
            di.DashboardKey = dashboard.DashboardKey; <---This is always null             
            db.SaveChanges();
            
            dashboard.ThumbnailImage = db.DashboardImage.Where(x => x.DashboardKey == dashboard.DashboardKey)
                .Select(x => x.ThumbnailImage).FirstOrDefault();
            
            return Json(dashboard);
        }
        catch (Exception e)
        {
            ModelState.AddModelError("error", e.Message);
            return Json(null);
        }
}

DashboardModel.cs:

public class DashboardModel
{
    public int DashboardKey { get; set; }        
    public string DashboardName { get; set; }        
    public byte[] ThumbnailImage { get; set; }
}

仪表板图像模型：

public class DashboardImageModel
{
    public int ImageKey { get; set; }
    public int DashboardKey { get; set; }
    public string ImageName { get; set; }
    public byte[] ThumbnailImage { get; set; }
    public virtual Dashboard Dashboard { get; set; }
}