如何將多個選項的值從選擇列表發布到 MVC 控制器？

Question

我有一個如下所示的選擇列表，我需要將選擇列表中的每個選項的值發布到控制器。 是否有可能以某種方式獲得這些值？

選擇列表

<select size="10" id="SelectedSortOrderOptions" name="SelectedSortOrderOptions">
    <option value="Parcel Number">Parcel Number</option>
    <option value="Receipt Number">Receipt Number</option>
    <option value="Municipality">Municipality</option>
</select>

我可以在我的控制器中做類似的事情嗎？

public IActionResult Submit(List<string> SelectedSortOrderOptions)
{
   ...
}

我需要獲取包含值Parcel Number 、 Receipt Number和Municipality的新字符串列表。

Answer 1

我可以在我的控制器中做類似的事情嗎？

是的，你可以這樣做。 如果要定義一個多選項的選擇列表，在視圖中，需要在<select>標簽中添加multiple屬性：

<form method="post" action="/home/submit">
    <select name="SelectedSortOrderOptions" multiple>
        <option value="Parcel Number">Parcel Number</option>
        <option value="Receipt Number">Receipt Number</option>
        <option value="Municipality">Municipality</option>
    </select>
    <button type="submit">Submit</button>
</form>

在控制器中：

[HttpPost]
public IActionResult Submit(List<string> SelectedSortOrderOptions)
{
    return View();
}

您可以在選擇多個選項時按住 Windows 上的Ctrl鍵（或 Mac 上的命令鍵）。

Answer 2

您可以使用jquery獲取所有選項並通過ajax將它們傳遞給控制器​​：

<script>
        $('#SelectedSortOrderOptions').change(function (e) {
            var optionsVal =[];
            $("#SelectedSortOrderOptions option").each(function () {
                optionsVal.push($(this).val());
            });
            $.ajax({
                type: 'POST',
                url: '/Home/submit',
                traditional: true,
                dataType: "json",
                data: { SelectedSortOrderOptions: optionsVal },
                success: function () {

                },
            });
        });
    </script>