如何获得ASP.Net核心选择元素的选择项

Question

我有一个List<Incident>，可以通过调用API并使用它来填充ASP.Net核心MVC应用程序中的select元素。我想获取所选的Incident，并在标签中显示其Option属性的值。

在视图中，我有以下内容：

@model List<Incident>
@{
    var incidents = (List<Incident>)ViewData["incidents"];
    ViewData["Title"] = "Dashboard";
}

<select class="browser-default custom-select mb-2">
    <option selected>Open this select menu</option>
    @foreach (var incident in @incidents)
    {
        <option value="@incident.id">@incident.Name</option>
    }
</select>

<div class="custom-control custom-checkbox mb-2">
    <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
    <label class="custom-control-label" for="defaultUnchecked">@SelectedIncident.Option</label> CAN THIS BE DONE?
</div>

控制器的代码如下：

public async Task<IActionResult> Index()
{
    var incidents = await GetIncidentsAsync();
    ViewData[nameof(incidents)] = incidents;
    return View(incidents);
}

事件类别是：

public class Incident
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Option { get; set; }
    public string Description { get; set; }
    public string OtherDescription { get; set; }
}

可以在不将其回传到服务器的情况下完成此操作吗？类似于Syncfusion的DropDownList。

Answer 1

此操作将在客户端执行，因此您可以为此使用javascript（或jQuery）。

我建议在id和select上添加label，然后使用document.querySelector从DOM中选择它们（尽管您可以按标签和/或类别选择）。

然后您可以在更改select列表时附加事件侦听器。 Javascript解决方案如下：

<!-- give the select an id -->
<select id="ddlIncidents" class="browser-default custom-select mb-2">
...

<!-- and give the label an id -->
<label id="lblIncident" class="custom-control-label" for="defaultUnchecked"></label>


// add this script to the bottom of your page
<script>
    // get the incidents dropdown list
    var ddlIncidents = document.querySelector('#ddlIncidents');

    // add event listener on change
    ddlIncidents.addEventListener('change', function() {
        // get selected option
        var selected = ddlIncidents.options[ddlIncidents.selectedIndex];
        // get label
        var lblIncident = document.querySelector('#lblIncident');
        // update label with selected item value
        // if you want to display the text, use selected.text instead
        lblIncident.innerText = selected.value;             
    });
</script> 

请参见下面的工作片段。

var ddlIncidents = document.querySelector('#ddlIncidents');

ddlIncidents.addEventListener('change', function() {
    var selected = ddlIncidents.options[ddlIncidents.selectedIndex];
    var lblIncident = document.querySelector('#lblIncident');
    lblIncident.innerText = selected.value;
});

<select id="ddlIncidents" class="browser-default custom-select mb-2">
    <option selected>Open this select menu</option>   
    <option value="1">Incident 1</option>
    <option value="2">Incident 2</option>
</select>

<label id="lblIncident" class="custom-control-label" for="defaultUnchecked"></label>

Answer 2

一种简单的方法是将每个选项的Option属性值设置为id属性，然后使用jquery获取所选项目的id并将其分配给lable。>

<select class="browser-default custom-select mb-2" id="ddlIncidents">
  <option selected>Open this select menu</option>
  @foreach (var incident in @incidents)
  {
    <option id="@incident.Option" value="@incident.Id">@incident.Name</option>
  }
</select>

<div class="custom-control custom-checkbox mb-2">
  <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
  <label class="custom-control-label" for="defaultUnchecked" id="selectedItem"></label>
</div>

@section Scripts
{
 <script>   
  $("#ddlIncidents").change(function () {
    var value = $(this).children(":selected").attr("id");
    console.log(value);
    $("#selectedItem").text(value);
  });

 </script>
}