使用 ajax 將值從 MVC 視圖傳遞到 Controller

Question

我正在使用 asp.net 核心 3.1 開發 web 應用程序。 I have an ajax call sends a ConsultViewModel object to my controller, but in controller it is getting null. 我不明白我的錯誤。 我將 ajax “數據：JSON.stringify（{consultView：consultView}）”更改為“數據：JSON.stringify（con）”但錯誤仍然存在我該如何解決這個問題？

我的代碼如下：

視圖模型

public class ConsultViewModel
{
    public int Id { get; set; }
    [Range(1, int.MaxValue, ErrorMessage = "Select a Department")]
    public int DepartmentId { get; set; }
    [Required]
    public string Description { get; set; }
    public string Date { get; set; }
    public IEnumerable<SelectListItem> Department { get; set; }
}

看法

@model MyApp.AppWeb.Models.ConsultViewModel;

    <h1>Edit</h1>
    <form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />

        <div class="form-group">
            <label asp-for="DepartmentId" class="control-label"></label>
            <select asp-for="DepartmentId" asp-items="Model.Department" class="form-control"></select>
            <span asp-validation-for="DepartmentId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Dateate" class="control-label"></label>
            <input asp-for="Date" class="form-control" disabled />
            <span asp-validation-for="Date" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Description" class="control-label"></label>
            <textarea asp-for="Description" class="form-control" cols="40" rows="5"></textarea>
            <span asp-validation-for="Description" class="text-danger"></span>
        </div>

        <div id="@Model.Id" class="form-group">
            <input type="button" class="btn btn-primary" value="Save" id="btnEdit"/>
        </div>
    </form>

腳本

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnEdit').click(function () {
            var id = $(this).parent()[0].id;
            var consultView = {
                Id: id,
                DepartmentId: $('#DepartmentId').val(),
                Date: $('#Date').val(),
                Description: $('#Description').val()
            };

            $.ajax({
                type: 'POST',
                url: "@Url.Action("Editar")",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({consultView: consultView}), 
                success: function (data) {
                    alert(data.message);
                },
                error: function (ex) {
                    alert('Error.' + ex);
                }
            });
        });
    });
</script>

}

[HttpPost]
    //[ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(ConsultViewModel consultView)
    {
        if (ModelState.IsValid)
        {
            //More code..

            return Json(new { success = true, message = "Done." });               
        }

        return View(consultaView);
    }

感謝！

Answer 1

I have an ajax call sends a ConsultViewModel object to my controller, but in controller it is getting null.

You can try to modify the code to stringify your JavaScript object consultView directly, need not to construct a new JavaScript object {consultView: consultView} .

data: JSON.stringify(consultView),

此外，將[FromBody]屬性應用於如下參數。

public async Task<IActionResult> Edit([FromBody]ConsultViewModel consultView)
{

我發送的測試數據

發布的數據可以按預期綁定