使用对象集合发布表单

Question

我需要上传表单，其中包含多个相同类型的选择列表。

表格是这样的

查看

<form asp-action="UpdateFilter" asp-controller="Home" method="post">

                @for (int i = 0; i < Model.FilterRows.Count(); i++)
                {
                    <div class="form-inline" style="margin-top:5px">

                        <select class="form-control form-control-sm">
                            @for (int i2 = 0; i2 < Model.FilterRows[i].FilterOptions.Count(); i2++)
                            {
                                <option name="FilterRows[@i].FilterOptions[@i2]"
                                        value="@Model.FilterRows[i].FilterOptions.ToArray()[i2].Value">@Model.FilterRows[i].FilterOptions.ToArray()[i2].Text</option>
                            }
                        </select>

                        <select class="form-control form-control-sm" style="margin-left: 5px">
                            @for (int i3 = 0; i3 < Model.FilterRows[i].FilterOperators.Count(); i3++)
                            {
                                <option name="FilterRows[@i].FilterOperators[@i3]"
                                        value="@Model.FilterRows[i].FilterOperators.ToArray()[i3].Value">@Model.FilterRows[i].FilterOperators.ToArray()[i3].Text</option>
                            }
                        </select>

                        <input type="text" class="form-control form-control-sm" style="margin-left: 5px" />
                    </div>
                }

                <button class="btn btn-primary btn-sm" style="margin-top: 15px;">Apply</button>
            </form>

HTML 输出

<form method="post" action="/Home/UpdateFilter">

    <div class="form-inline" style="margin-top:5px">

        <select class="form-control form-control-sm">
            <option name="FilterRows[0].FilterOptions[0]" value=""></option>
            <option name="FilterRows[0].FilterOptions[1]" value="1">Column 1</option>
            <option name="FilterRows[0].FilterOptions[2]" value="2">Column 2</option>
            <option name="FilterRows[0].FilterOptions[3]" value="3">Column 3</option>
            <option name="FilterRows[0].FilterOptions[4]" value="4">Column 4</option>
        </select>

        <select class="form-control form-control-sm" style="margin-left: 5px">
            <option name="FilterRows[0].FilterOperators[0]" value=""></option>
            <option name="FilterRows[0].FilterOperators[1]" value="1">Like</option>
            <option name="FilterRows[0].FilterOperators[2]" value="2">&gt;</option>
            <option name="FilterRows[0].FilterOperators[3]" value="3">=</option>
            <option name="FilterRows[0].FilterOperators[4]" value="4">&lt;</option>
        </select>

        <input type="text" class="form-control form-control-sm" style="margin-left: 5px">
    </div>


    <div class="form-inline" style="margin-top:5px">

        <select class="form-control form-control-sm">
            <option name="FilterRows[1].FilterOptions[0].Value" value=""></option>
            <option name="FilterRows[1].FilterOptions[1].Value" value="1">Column 1</option>
            <option name="FilterRows[1].FilterOptions[2].Value" value="2">Column 2</option>
            <option name="FilterRows[1].FilterOptions[3].Value" value="3">Column 3</option>
            <option name="FilterRows[1].FilterOptions[4].Value" value="4">Column 4</option>
        </select>

        <select class="form-control form-control-sm" style="margin-left: 5px">
            <option name="FilterRows[1].FilterOperators[0].Text" value=""></option>
            <option name="FilterRows[1].FilterOperators[1].Text" value="1">Like</option>
            <option name="FilterRows[1].FilterOperators[2].Text" value="2">&gt;</option>
            <option name="FilterRows[1].FilterOperators[3].Text" value="3">=</option>
            <option name="FilterRows[1].FilterOperators[4].Text" value="4">&lt;</option>
        </select>

        <input type="text" class="form-control form-control-sm" style="margin-left: 5px">
    </div>


    <button class="btn btn-primary btn-sm" style="margin-top: 15px;">Apply</button>

    </div>
</form>

控制器

[HttpPost]
        public JsonResult UpdateFilter(ModalFilterViewModel model)
        {
            return Json(new { success = 1 });
        }

视图模型

public class ModalFilterViewModel
    {
        public IList<FilterRow> FilterRows { get; set; }
    }

public class FilterRow
    {
        public int? Id { get; set; }

        public SelectList FilterOptions { get; set; }
        public int? FilterOptionId { get; set; }

        public SelectList FilterOperators { get; set; }
        public int? FilterOperatorId { get; set; }

        public string SearchValue { get; set; }
    }

问题是，在提交表单（点击应用按钮）后，上传的 ViewModel 是空的。为什么会这样，我该如何解决？

Answer 1

主要的错误是，我将name 属性分配给option 标签而不是select 标签。因此数据没有发送到控制器动作中。最后我得到了这个解决方案。

<form asp-controller="Home" asp-action="UpdateFilter" method="POST">

                @for (int i = 0; i < Model.FilterRows.Count(); i++)
                {
                    <div class="form-inline" style="margin-top:5px">

                        <input type="hidden" name="FilterRows[@i].Id" value="@i" />

                        <select asp-for="@Model.FilterRows[i].FilterOptionId"
                                asp-items="@Model.FilterRows[i].FilterOptions"
                                class="form-control form-control-sm"></select>

                        <select asp-for="@Model.FilterRows[i].FilterOperatorId"
                                asp-items="@Model.FilterRows[i].FilterOperators"
                                class="form-control form-control-sm"
                                style="margin-left: 5px"></select>

                        <input type="text" 
                                asp-for="@Model.FilterRows[i].SearchValue" 
                                class="form-control form-control-sm" 
                                style="margin-left: 5px" />
                    </div>
                }

                <button type="submit" class="btn btn-primary btn-sm" style="margin-top: 15px;">Apply</button>

            </form>