How to get Telerik DropDownListFor selected values to controller on save of Telerik Upload

Question

I have a Telerik UI for ASP.NET Upload control that when the file get uploaded, I also need to pass the selected values of two Telerik UI for ASP.NET DropDownListFor. Everything works except for getting the drop down values in the saveUpload action.

The selfEvaluationId comes across correctly, but the evaluationAreaId and evidenceTypeId both come across as 0. What is my mistake?

View:

@using Kendo.Mvc.UI
@model BE.USATLE.UI.MVC.Areas.Leader.Models.UploadViewModel

<h1>
    Add Evidence
</h1>

@Html.HiddenFor(x => x.SelfEvaluationId)

<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <form class="col-3">
            <div class="form-group">
                @Html.LabelFor(m => m.EvaluationAreaId)
                
                @(Html.Kendo().DropDownListFor(m => m.EvaluationAreas)
                    .HtmlAttributes(new { style = "width:100%" })
                    .OptionLabel("Select Evaluation Area...")
                    .DataTextField("Name")
                    .DataValueField("EvaluationAreaId")
                    .BindTo(Model.EvaluationAreas)
                    )


                @Html.ValidationMessageFor(m => m.EvaluationAreaId)
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.EvidenceTypeId)
                
                @(Html.Kendo().DropDownListFor(m => m.EvidenceTypes)
                    .HtmlAttributes(new { style = "width:100%" })
                    .OptionLabel("Select Evidence Type...")
                    .DataTextField("Name")
                    .DataValueField("EvidenceTypeId")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetEvidenceTypes", "SelfEvaluation")
                                .Data("filterEvidenceTypes");
                        })
                            .ServerFiltering(true);
                    })
                    .Enable(false)
                    .AutoBind(false)
                    .CascadeFrom("EvaluationAreas")
                    )
            </div>
        </form>
    </div>


    <div class="row h-100 justify-content-center align-items-center">
        <form class="col-3">
            <div class="form-group">
                @(Html.Kendo().Upload()
                    .Name("files")
                    .Async(a => a
                        .Save("SaveUpload", "SelfEvaluation", new {selfEvaluationId = @Model.SelfEvaluationId, evaluationAreaId = @Model.EvaluationAreaId, evidenceTypeId = @Model.EvidenceTypeId})
                        .AutoUpload(false)
                    )
                    )
            </div>
        </form>
    </div>
</div>

<script>
    function filterEvidenceTypes() {
        return {
            evaluationAreaId: $("#EvaluationAreas").val()
        };
    }
</script>

Controller:

public async Task<ActionResult> SaveUpload(IEnumerable<IFormFile> files, int selfEvaluationId, int evaluationAreaId, int evidenceTypeId)
        {
            // The Name of the Upload component is "files"
            if (files != null)
            {
                foreach (var file in files)
                {
                    var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

                    // Some browsers send file names with full path.
                    // We are only interested in the file name.
                    var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
                    var physicalPath = Path.Combine("D:\\Uploads", fileName);

                    // The files are not actually saved in this demo
                    await using (var fileStream = new FileStream(physicalPath, FileMode.Create))
                    {
                        await file.CopyToAsync(fileStream);
                    }

                    _selfEvaluationAttachmentService.AddSelfEvaluationAttachment(new SelfEvaluationAttachment
                    {
                        DocumentName = fileName,
                        DocumentPath = physicalPath,
                        SelfEvaluationId = selfEvaluationId,
                        EvaluationAreaId = evaluationAreaId,
                        EvidenceTypeId = evidenceTypeId
                    });
                }
            }

            // Return an empty string to signify success
            return RedirectToAction("Edit", new {id = selfEvaluationId});
        }

Answer 1

Found it searching Telerik Forums.

You have to pass it as metadata.

So the Upload in the view becomes

<div class="row h-100 justify-content-center align-items-center">
        <form class="col-3">
            <div class="form-group">
                @(Html.Kendo().Upload()
                    .Name("files")
                    .Async(a => a
                        .Save("SaveUpload", "SelfEvaluation")
                        .AutoUpload(false)
                    )
                    .Events(e => e.Upload("onUpload"))
                    )
            </div>
        </form>
    </div>

With a JS function

function onUpload(e) {
        e.data = {
            selfEvaluationId: $("#SelfEvaluationId").val(),
            evaluationAreaId: $("#EvaluationAreas").val(),
            evidenceTypeId: $("#EvidenceTypes").val()
        };
    }