如何在 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 值。