asp.net-mvc - 使用对象集合发布表单
问题描述
我需要上传表单,其中包含多个相同类型的选择列表。
表格看起来像这样
看法
<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 });
}
视图模型
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 是空的。为什么会这样,我该如何解决?
解决方案
主要错误是,我将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>
推荐阅读
- c++ - 如何使用 fstream 将字符串用于 .get?
- project-reactor - 使用带有重试的 Spring WebClient 时使用 StepVerifier 块进行测试
- java - 尝试获取数据时出现数字格式异常
- sql-server - 将 SQL 中的日期格式从 1980-12-17 00:00:00.000 更新为 SQL 中的 17-Dec-80
- wpf - Wpf Material Design 日期选择器主题
- kubernetes - k8s是否支持https liveness和readness probe
- linux - Arch Linux 的默认用户名和密码是什么
- python - 为什么 keras model.fit_generator() 显示错误,例如无法获得卷积算法?
- codesys - Codesys 中是否有与 arduino millis() 一样的计时器函数或变量?
- html - 如何使用 goquery 提取自定义 html 标签的文本?