Passing value from MVC View to Controller using ajax

Question

Hi!

I am developing web app with asp.net core 3.1.

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

How do i solve this problem?

 

My code is just as follow:

 

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="Date" 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="Descriptionion" class="form-control" cols="40" rows="5"></textarea>
                <span asp-validation-for="Descritcioncion" 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("Edit")",
                    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);
        }

 Thanks!