Ajax Поля, не соответствующие ViewModel

Question

У меня есть эта модель представления, которая имеет следующую структуру:

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