如何在 ASP.NET Core 6 MVC 中的 <select> 下拉列表中选择后调用操作方法？

Question

我使用 <select> HTML 元素创建了一个下拉菜单。现在我想在用户从列表中进行选择后调用一个操作。

<select name="ddAircraft" id="ddAircraft" class="form-control form-select-sm form-select"  
        asp-items="@(new SelectList(ViewBag.ddaircraft,"id","name"))">
</select>

我也想知道用户是否在输入框中输入了一个值。然后我想运行一个Javascript方法。我该怎么做？

我试过 onClick 但我遇到了常见的错误。

Answer 1

如果您能显示错误的详细信息，将会有所帮助，

我试过以下代码：

@{
    var sel = new List<SelectListItem>()
{
        new SelectListItem(){Text="1",Value="1" },
        new SelectListItem(){Text="2",Value="2" },
        new SelectListItem(){Text="3",Value="3" }
    };
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>

<script>
    $(function () {
        $('#selectlist').change(function () {
            window.location.href = "Privacy";
        })
    });
</script>
<script>
    $(function () {
        $('#input').change(function () {
            window.location.href = "Privacy";
        })
    });
</script>
<input id="input" value=""></input>

<select id="selectlist" asp-items=sel></select>

结果：

要传递所选项目的值，您可以尝试：

<script>
    $(function () {        
        
        $('#selectlist').change(function () {
            window.location.href = "Home/Privacy?sel=" + $(this).val();
        })
    });
</script>

结果：

如果你想发出 post 请求，你可以尝试使用 ajax 如下：

 <script>
        $(function () {
            $('#selectlist').change(function () {
                var sel = $(this).val();
                var input = document.getElementById("input").value;
                $.ajax({
                    url: "Home/Test",
                    contentType: "application / json; charset = utf - 8",
                    type: "post",
                    data: JSON.stringify({
                        sel: sel,
                        input: input                    
                    }),
                    datatype: "json",
                    success: function (data) {                    
                        console.log(data);                    
                    }
                })
    
            })
        });
    </script>

结果：

如何在 ASP.NET Core 6 MVC 中的 <select> 下拉列表中选择后调用操作方法？

How to call an action method upon selection from the <select> dropdwon in ASP.NET Core 6 MVC?

asp.net-core-mvc