我需要上传表格,其中包含多个相同类型的选择列表。
表单看起来像这样
查看
<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">></option>
<option name="FilterRows[0].FilterOperators[3]" value="3">=</option>
<option name="FilterRows[0].FilterOperators[4]" value="4"><</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">></option>
<option name="FilterRows[1].FilterOperators[3].Text" value="3">=</option>
<option name="FilterRows[1].FilterOperators[4].Text" value="4"><</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为空。为什么会这样,我该如何解决?
答案 0 :(得分:0)
主要错误是,我将 $('#iti-item-dz').attr('data-dial-code');
属性分配给name
标签而不是option
标签。因此,数据未发送到控制器操作中。最后,我得到了这个解决方案。
select