发布带有对象集合的表单

时间:2018-10-22 12:59:31

标签: asp.net-mvc asp.net-core form-submit

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

表单看起来像这样

enter image description here

查看

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

ViewModel

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为空。为什么会这样,我该如何解决?

enter image description here

1 个答案:

答案 0 :(得分:0)

主要错误是,我将 $('#iti-item-dz').attr('data-dial-code'); 属性分配给name标签而不是option标签。因此,数据未发送到控制器操作中。最后,我得到了这个解决方案。

select