Mapping model to control using Ajax post-CodePudding

I am trying to map my form that contains the filters to my view model but when the ajax post is sent the controller object is empty.

This my view model

public class FilterViewModel
{
    public string GroupName { get; set; }
    public List<Filter> Filters { get; set; }
}

public class Filter
{
    public int Id { get; set; }
    public string FilterName { get; set; }
    public List<Facet> Facets { get; set; }
}

public class Facet
{
    public int Id { get; set; }
    public string Value { get; set; }
    public bool Selected { get; set; }
}

This is my controller

[HttpPost]
        public ActionResult Index([FromBody] FilterViewModel filterViewModel)
        {
            var auxFilters = filterViewModel;
            try
            {
                if (auxFilters != null)
                {
                    return Json(new
                    {
                        msg = "Successfully parsed filters"
                    }); ;
                }
                else
                {
                    return Json(new
                    {
                        msg = "Object is empty"
                    }); ;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

This my razor page

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 container-fluid">
                <form asp-action="Index" asp-controller="Overview" method="post" id="formfilter">
                    <input type="hidden" asp-for="@Model.GroupName" />
                    @for (int i = 0; i < Model.Filters.Count; i  )
                    {
                        <article class="card-group-item">
                            <header class="card-header">
                                <label asp-for="@Model.Filters[i].Name">@Model.Filters[i].Name</label>
                                <input type="hidden" asp-for="@Model.Filters[i].Id" />
                                <input type="hidden" asp-for="@Model.Filters[i].FilterName" />
                            </header>
                            <div class="filter-content">
                                <div class="card-body">
                                    @for (int j = 0; j < Model.Filters[i].Facets.Count; j  )
                                    {
                                        <label class="form-check">
                                            <input type="checkbox" asp-for="@Model.Filters[i].Facets[j].Selected" id="facetcheck">
                                            <label asp-for="@Model.Filters[i].Facets[j].Selected">@Model.Filters[i].Facets[j].Value</label>
                                            <input type="hidden" asp-for="@Model.Filters[i].Facets[j].Id" />
                                            <input type="hidden" asp-for="@Model.Filters[i].Facets[j].Value" />
                                        </label>
                                    }
                                </div>
                            </div>
                        </article>
                    }
                    <div class="form-group">
                        <input type="submit" value="Filter" class="btn btn-primary" id="btnSubmit" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

@section Scripts
{
<script>
        $(document).ready(function() {
        $('input:checkbox').click(function() {
            if(this.checked) {
                 $.ajax({
                            type: "POST",
                            url: "/Overview/Index",
                            data: $('form#formfilter').serialize(),
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            success: function (data)
                            {
                            alert(data);
                            }
                        });
            }
        });
    });
</script>
}

The mapping works perfectly when using a submit button, but I want to filter as soon as someone clicks the checkbox. Therefor I am trying to make the logic of calling the controller whenever someone checks a filter

Any ideas of how to properly map my entity

CodePudding user response：

Replace [FromBody] attribute with the [FromForm] attribute. And then, in the ajax query, remove the content-type:"application/json" statement. It works for me well.