如何從在 ASP.NET CORE MVC 中使用 @Html.DropDownListFor 標簽助手的下拉按鈕中獲取值

Question

我有一個下拉按鈕，它使用 HTML 標簽助手@Html.DropDownListFor填充值該按鈕的代碼是：

<div class="col-sm-3" id="valueSetParent">
    @Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets, "Id", "Name"), new { @class = "btn btn-sm btn-outline-secondary dropdown-toggle", @style = "font-color: white" })
</div>

我有一個 javascript function 需要在下拉按鈕中選擇的選項的Id值。

function xyx=z(e, testId, Id) {
        e.stopPropagation();
        $('#Modal').data('test_id', testId).data('id', Id).modal('show');
    }

但是當我運行代碼時， Id的值不會發送到 function 並在這種情況下顯示NULL 。 如何確保將下拉按鈕中所選值的 Id 發送到 javascript function？

Answer 1

您的意思是要獲取所選項目的 Id， new SelectList(Model.Sets, "Id", "Name")使 Id 為 Value,Name 為所選項目的 Id。您可以使用$("select").val()或$("#Id").val()獲取 js 中的 Id 而不是將數據傳遞給 function。 這是一個演示：

Controller：

 public IActionResult DropDown() {
        DropDownModel dropDownModel = new DropDownModel();
        dropDownModel.Sets = new List<Set1> { new Set1 { Id="s1",Name="set1"},new Set1 { Id="s2",Name="set2"} };
        return View(dropDownModel);
    }

看法：

<h1>DropDown</h1>
<div>
    @Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets,"Id","Name"), new { @class = "btn btn-sm btn-outline-secondary dropdown-toggle", @style = "font-color: white" })
</div>
<div>
    <button onclick="selectId()">select</button>
</div>
@section scripts{ 
<script type="text/javascript">
    function selectId() {
        alert($("select").val());
    }
</script>
}

結果：