C# MVC - 控制器未从 ViewModel 表单接收所有数据

Question

我是 C# MVC 的新手，这是我的第一个项目/测试。

我正在使用 C# MVC 制作一个简单的 MVC 项目。我的问题是，当我从视图提交表单时，控制器正在接收部分数据，如果我从 PostMan 执行相同的帖子，控制器会接收所有数据。

这是我的代码：

查看：

<form asp-action="NewTask" asp-controller="Task" class="form-horizontal" name="NewTask">
<div class="table">
    <dl>
        <dt>
            Title:
        </dt>
        <dd>
            <input class="form-control" name="Title" id="Title" type="text" placeholder="Title" />
        </dd>
        <dt>
            Description:
        </dt>
        <dd>
            <input class="form-control" name="Description" id="Description" type="text" placeholder="Description" />
        </dd>
        <dd>
            <input type="hidden" name="Status" id="Status" value="A" />
        </dd>
        <dt>
            User:
        </dt>
        <dd>
            @Html.DropDownListFor(task => task.User, new SelectList(ViewBag.Users, "Id", "Username"), "Please Select One...", new { @class = "form-control", @name = "User"})                                
        </dd>
    </dl>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <input type="submit" class="btn btn-primary" id="btnSubmit" />
</div>

视图模型：

public class CreateTaskViewModel
{
    public string Title { get; set; }
    public string Description { get; set; }
    public string Status { get; set; }
    public string User { get; set; }
}

控制器：

[HttpPost, ValidateAntiForgeryToken]
    public IActionResult NewTask([FromBody] CreateTaskViewModel TaskVM)
    {
        var item = new Models.Task
        {
            Title = TaskVM.Title,
            Description = TaskVM.Description,
            Status = TaskVM.Status
        };

        var users = _userRepository.Find(Convert.ToInt32(TaskVM.User));

        if (item == null)
        {
            return NotFound();
        }

        _taskRepository.NewTask(item);

        var userTask = new UserTask
        {
            Status = "A",
            UserId = users.Id,
            TaskId = item.Id
        };
        _userTaskRepository.NewUserTask(userTask);
        return View("Tasks");
    }

我在提交表单时在var item = new Models.Task 行添加了一个断点，TaskVM 对象具有 Title、Description 和 Status 字段的所有值，但 User 值为 null。

如果我在浏览器的 Inspect 选项中捕获请求并从 Postman 发送它，它会完美运行。

我需要在视图或控制器中进行哪些更改？

编辑： 这是生成的 HTML：

<form class="form-horizontal" name="NewTask" action="/Task" method="post">
<div class="table">
    <dl>
        <dt>
            Title:
        </dt>
        <dd>
            <input class="form-control" name="Title" id="Title" type="text" placeholder="Title" />
        </dd>
        <dt>
            Description:
        </dt>
        <dd>
            <input class="form-control" name="Description" id="Description" type="text" placeholder="Description" />
        </dd>
        <dd>
            <input type="hidden" name="Status" id="Status" value="A" />
        </dd>
        <dt>
            User:
        </dt>
        <dd>
            <select class="form-control" data-val="true" data-val-required="The User field is required." id="User" name="User"><option value="">Please Select One...</option>
                <option value="1">User 1</option>
                <option value="2">User 2</option>
                <option value="3">User 3</option>
                <option value="">etc...</option>
            </select>                                
        </dd>
    </dl>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <input type="submit" class="btn btn-primary" id="btnSubmit" />
</div>
<input name="__RequestVerificationToken" type="hidden" value="dQhqzqtPv5jtvF4dmgleh4HqwmIa6w9ancJdYGLWKKWmnnkZS-IjSh9NFSUDeSPsfr9vNHiro1i4a4" />

Answer 1

我使用 JSon/JQuery 将表单发布到我的控制器。

$("#btnSubmit").click(function () {
    submitForm();
});

function submitForm() {
    Task = new Object();
    Task.Title = $("#Title").val();
    Task.Description = $("#Description").val();
    Task.Status = $("#Status").val();
    Task.UserId = $("#UserId").find(":selected").val();
    newTask(Task);
}

function newTask(Task) {
    var s = JSON.parse(JSON.stringify(Task))
    $.ajax({
        url: "http://url:port/Task",
        type: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        datatype: 'json',            
        data: JSON.stringify(s),
        success: function (data) {
            location.reload();
        },
        error: function (request, message, error) {
            location.reload();               
        }
    });
}