Ajax 字段与 ViewModel 不匹配

Question

我有这个结构如下的 ViewModel：

public class SendNewMessageViewModel
{
    public GroupDropdownListViewModel Groups { get; set; }
    [Required]
    public MessageDropdownListViewModel Templates { get; set; }
    public string ContactId { get; set; }
    [Display(Name ="Contact Name")]
    public string ContactName { get; set; }
    [Display(Name = "Message Content")]
    public string MessageContent { get; set; }
}

我的功能

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult Send(SendNewMessageViewModel Input)
{
   return null;
}

我正在尝试将数据传递给我的函数，该函数将此视图模型作为输入。但是，当我调试它时，所有输入都是空的。但是，在我的 Request.Form["ContactName"] 等中，有数据。

我尝试在输入中添加 [FromBody]，但只收到 415 错误。

这就是我将数据传递到服务器的方式：

$("#dropzone").dropzone({
    url: "@Url.Action("Send", "Messages", new { area = "Action" })",
    autoProcessQueue: false,
    addRemoveLinks: true,
    maxFiles: 1,
    uploadMultiple: false,
    parallelUploads: 1,
    init: function () {
            var submitButton = document.querySelector("#submit");
            var token = $('input[name="__RequestVerificationToken"]').val();
            var wrapperThis = this;
            submitButton.addEventListener("click", function (e) {
                wrapperThis.processQueue();
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                return false;
            });

            this.on('sending', function (data, xhr, formData) {
                formData.append("__RequestVerificationToken", token);
                formData.append("@Html.IdFor(x => x.ContactId)", $("#@Html.IdFor(x => x.ContactId)").val());
                formData.append("@Html.IdFor(x => x.ContactName)", $("#@Html.IdFor(x => x.ContactName)").val());
                formData.append("@Html.IdFor(x => x.Groups.GroupId)", $("#@Html.IdFor(x => x.Groups.GroupId)").val());
                formData.append("@Html.IdFor(x => x.Templates.MessageId)", $("#@Html.IdFor(x => x.Templates.MessageId)").val());
            });;

            this.on('error', function (file, message) {
                wrapperThis.disable();
            });

            this.on('success', function (file,message) {
                $(".dz-remove").hide();
                wrapperThis.disable();
                $(document).off("submit");
            });
        }
});

Answer 1

这是工作示例的视图，您可以检查差异：

@model MVC2_2Project.Models.DropZone.SendNewMessageViewModel


@using (Html.BeginForm(FormMethod.Post, new { enctype = "multipart/form-data", id = "modal" }))
{
@Html.AntiForgeryToken()
<div class="col-sm-12">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <div id="dropzone" name="Files" class="dropzone form-group"></div>
            </div>
            <div class="form-group">
                <input asp-for="ContactId" />
            </div>
            <div class="form-group">
                <input asp-for="ContactName" />
            </div>
            <div class="form-group">
                <input asp-for="Groups.GroupId" />
            </div>
            <div class="form-group">
                <input asp-for="Templates.MessageId" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <div class="clearfix">
                    <div class="pull-right">
                        <button type="submit" id="submit" class="btn btn-primary">Upload</button>
                        @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

@section Scripts
{
<script>

Dropzone.autoDiscover = false;
$("#dropzone").dropzone({
    url: "@Url.Action("Send", "Home")",
    autoProcessQueue: false,
    addRemoveLinks: true,
    maxFiles: 1,
    uploadMultiple: false,
    parallelUploads: 1,
    init: function () {
        var submitButton = document.querySelector("#submit");
        var token = $('input[name="__RequestVerificationToken"]').val();
        var wrapperThis = this;
        submitButton.addEventListener("click", function (e) {
            console.log("submitted");
            wrapperThis.processQueue();
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        });

        this.on('sending', function (data, xhr, formData) {
            formData.append("__RequestVerificationToken", token);
            formData.append("@Html.IdFor(x=>x.ContactId)",$("#@Html.IdFor(x => x.ContactId)").val());
            formData.append("@Html.IdFor(x=>x.ContactName)",$("#@Html.IdFor(x => x.ContactName)").val());
            formData.append("@Html.IdFor(x=>x.Groups.GroupId)",$("#@Html.IdFor(x => x.Groups.GroupId)").val());
            formData.append("@Html.IdFor(x=>x.Templates.MessageId)",$("#@Html.IdFor(x => x.Templates.MessageId)").val());
        });
     ...
    }
});
</script>
}