C# 如何在ASP.NET Razor页面中更改下拉列表时重新加载/调用OnGet或OnPost方法

我正在为我的一个静态网站使用Asp.NETCoreRazor页面

我的页面上有一个下拉列表，我使用以下代码绑定它

[BindProperty]
public string selectedFilter { get; set; }

public List<SelectListItem> Options { get; set; }

public void OnGet()
{
    this.Options = new List<SelectListItem> {
                    new SelectListItem { Text = "Test1", Value = "1" },
                    new SelectListItem { Text = "Test2", Value = "2" },
                    new SelectListItem { Text = "Test3", Value = "3" },
                };
    selectedFilter = "3";
}

并将以下OnPost方法添加到CS文件中

public void OnPost（）
{
//在这里，您将把所选值输入selectedFilter
}

感谢大家帮助我

onchange（）

调用javascript函数，您需要使用ajax将数据发布到razor pages Handler

Razor页面设计用于防止（CSRF/XSRF）攻击。因此，Antiforgery令牌验证自动包含在Razor页面中。您需要在ajax请求的标题中发送正确的

RequestVerificationToken

Index.cshtml和

表单

<form>
    @Html.AntiForgeryToken()
    <select id="myDropdown" asp-for="selectedFilter" asp-items="Model.Options" onchange="sendData()"></select>
</form>
@section Scripts{ 
<script>
    function sendData() {
        var selectedFilter = $("#myDropdown").val();
        $.ajax({
            type: "POST",
            url: "/Home/Index",
            data: { selectedFilter: selectedFilter },
            headers: {
                    RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
                },
            success: function (result) {
                alert("success");
            },
            error: function () {
                alert("there was an error");
            }
        })
    }
</script>
}

<select id="myDropdown" asp-for="selectedFilter" asp-items="Model.Options" onchange="sendData()"></select>

@section Scripts{ 
<script>
    function sendData() {

        var token = '@Html.AntiForgeryToken()';

        var selectedFilter = $("#myDropdown").val();
        $.ajax({
            type: "POST",
            url: "/Projects/TestSelectList",
            data: { selectedFilter: selectedFilter },
            headers: {
                    RequestVerificationToken:  $(token).val()
                },
            success: function (result) {
                alert("success");
            },
            error: function () {
                alert("there was an error");
            }
        })
    }
</script>
}

在

Index.cshtml.cs

中添加

POST

处理程序，并添加断点以检查：

[BindProperty]
public string selectedFilter { get; set; }
public void  OnPost()
    {
        var data = selectedFilter;
    }

---

谢谢@LazZiya，这就是我要找的。我将在这里放置一个链接，以供其他问题使用

[BindProperty]
public string selectedFilter { get; set; }
public void  OnPost()
    {
        var data = selectedFilter;
    }