使用 Ajax post 来控制映射模型

Question

我正在尝试将包含过滤器的表单映射到我的视图模型，但是当发送 ajax post 时，控制器对象为空。

这是我的视图模型

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

这是我的控制器

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

这是我的剃须刀页面

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

映射在使用提交按钮时完美运行，但我想在有人单击复选框时立即进行过滤。因此，我试图制定每当有人检查过滤器时调用控制器的逻辑

关于如何正确映射我的实体的任何想法

Answer 1

将 [FromBody] 属性替换为 [FromForm] 属性。然后，在 ajax 查询中，删除 content-type:"application/json" 语句。它对我很有效。

使用 Ajax post 来控制映射模型

Mapping model to control using Ajax post

c#

asp.net-mvc

asp.net-ajax

razor