如何在 MVC Razor 项目的 select 标签内接收所有选项项?
How can I receive all options item inside a select tag in MVC Razor project?
一个select值可以很容易地在Controller中通过这个得到:
var value = Request.Form("select");
我的select:
<select id="XCXCXC" multiple name="select" asp-for="NguoiNhan" class="col-8 col-lg-8 col-md-8 col-sm-8">
<option value="HHH">Hello DIV!</option>
<option value="XXX">Goodbye DIV!</option>
</select>
但它只能工作并接收 selected 选项。如果我想收到一个包含该项目内所有选项的列表怎么办?我怎样才能做到这一点?
根据Yiyi You
编辑分辨率
型号:
public int Id { 得到;放; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public List<string> NguoiNhan { get; set; }
public string NoiDung { get; set; }
CSHTML:
<form method="post" asp-action="TestPostAllOption">
<label asp-for="NguoiNhan" class="col-4 col-lg-4 col-md-4 col-sm-4"></label>
<select id="XCXCXC" asp-for="NguoiNhan" multiple class="col-8 col-lg-8 col-md-8 col-sm-8">
<option value="HHH">Hello DIV!</option>
<option value="XXX">Goodbye DIV!</option>
</select>
@*<div id="options"></div>*@
<input type="submit" value="submit" />
</form>
控制器:
[Route("test-thong-bao-select")]
[HttpPost]
public IActionResult TestPostAllOption(CacPhongBanVaThongTinUpsertModel selectNguoi)
{
var a = selectNguoi.NguoiNhan;
return Ok();
}
您可以使用隐藏的输入来输入选项的值。
查看(使用 foreach 获取选项的值,并将它们添加到隐藏的输入):
<form method="post" action="PostList">
<select name="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="options"></div>
<input type="submit" value="submit" />
js:
$(function () {
var i = 0;
$("select option").each(function () {
var s = document.createElement("input");
s.name = "options[" + i + "]";
s.setAttribute("value", $(this).val());
s.setAttribute("hidden", "hidden");
$("#options").append(s);
i++;
})
})
你最好创建一个模型来绑定形成帖子的数据。
型号:
public class BindModel
{
public string select { get; set; }
public List<string> options { get; set; }
}
控制器:
public IActionResult PostList(BindModel b) {
return Ok();
}
结果:
更新:
查看:
<form method="post" action="PostList">
<select asp-for="NguoiNhan">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="options"></div>
<input type="submit" value="submit" />
</form>
型号:
public class CacPhongBanVaThongTinUpsertModel
{
public int Id { get; set; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public string NguoiNhan { get; set; }
public List<string> options { get; set; }
public string NoiDung { get; set; }
}
更新2:
如果你想使用多个select,你只需要这样做:
View(不需要用js):
<form method="post" action="PostList">
<select asp-for="NguoiNhan" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="submit" value="submit" />
</form>
型号:
public class CacPhongBanVaThongTinUpsertModel
{
public int Id { get; set; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public List<string> NguoiNhan { get; set; }
public string NoiDung { get; set; }
}
您可以从 List<string> NguoiNhan
获得 selected 值。
一个select值可以很容易地在Controller中通过这个得到:
var value = Request.Form("select");
我的select:
<select id="XCXCXC" multiple name="select" asp-for="NguoiNhan" class="col-8 col-lg-8 col-md-8 col-sm-8">
<option value="HHH">Hello DIV!</option>
<option value="XXX">Goodbye DIV!</option>
</select>
但它只能工作并接收 selected 选项。如果我想收到一个包含该项目内所有选项的列表怎么办?我怎样才能做到这一点?
根据Yiyi You
编辑分辨率型号: public int Id { 得到;放; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public List<string> NguoiNhan { get; set; }
public string NoiDung { get; set; }
CSHTML:
<form method="post" asp-action="TestPostAllOption">
<label asp-for="NguoiNhan" class="col-4 col-lg-4 col-md-4 col-sm-4"></label>
<select id="XCXCXC" asp-for="NguoiNhan" multiple class="col-8 col-lg-8 col-md-8 col-sm-8">
<option value="HHH">Hello DIV!</option>
<option value="XXX">Goodbye DIV!</option>
</select>
@*<div id="options"></div>*@
<input type="submit" value="submit" />
</form>
控制器:
[Route("test-thong-bao-select")]
[HttpPost]
public IActionResult TestPostAllOption(CacPhongBanVaThongTinUpsertModel selectNguoi)
{
var a = selectNguoi.NguoiNhan;
return Ok();
}
您可以使用隐藏的输入来输入选项的值。 查看(使用 foreach 获取选项的值,并将它们添加到隐藏的输入):
<form method="post" action="PostList">
<select name="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="options"></div>
<input type="submit" value="submit" />
js:
$(function () {
var i = 0;
$("select option").each(function () {
var s = document.createElement("input");
s.name = "options[" + i + "]";
s.setAttribute("value", $(this).val());
s.setAttribute("hidden", "hidden");
$("#options").append(s);
i++;
})
})
你最好创建一个模型来绑定形成帖子的数据。 型号:
public class BindModel
{
public string select { get; set; }
public List<string> options { get; set; }
}
控制器:
public IActionResult PostList(BindModel b) {
return Ok();
}
结果:
更新:
查看:
<form method="post" action="PostList">
<select asp-for="NguoiNhan">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="options"></div>
<input type="submit" value="submit" />
</form>
型号:
public class CacPhongBanVaThongTinUpsertModel
{
public int Id { get; set; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public string NguoiNhan { get; set; }
public List<string> options { get; set; }
public string NoiDung { get; set; }
}
更新2:
如果你想使用多个select,你只需要这样做: View(不需要用js):
<form method="post" action="PostList">
<select asp-for="NguoiNhan" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="submit" value="submit" />
</form>
型号:
public class CacPhongBanVaThongTinUpsertModel
{
public int Id { get; set; }
public string TieuDe { get; set; }
public DateTime? NgayKetThucCongViec { get; set; }
public TimeSpan Gio { get; set; }
public string? NguoiThucHien { get; set; }
public string TrangThai { get; set; }
public string ThuocPhongban { get; set; }
public List<string> NguoiNhan { get; set; }
public string NoiDung { get; set; }
}
您可以从 List<string> NguoiNhan
获得 selected 值。