如何在 ASP.NET Razor 页面中的 DropDown 更改上重新加载/调用 OnGet 或 OnPost 方法答案

【问题标题】：How to reload/call OnGet or OnPost method on DropDown change in ASP.NET Razor Page如何在 ASP.NET Razor 页面中的 DropDown 更改上重新加载/调用 OnGet 或 OnPost 方法
【发布时间】：2020-03-27 01:05:30
【问题描述】：

我正在为我的一个静态网站使用 Asp.Net Core Razor Pages。

我的页面上有一个下拉菜单，我使用以下代码绑定它。

[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";
}

在cshtml中

<select asp-for="selectedFilter" asp-items="Model.Options"></select>

页面加载后 - Dropdown 正确呈现

现在，我只想知道如何处理 Dropdown 的 onchange 事件，所以它调用 Razor 页面的 OnGet/OnPost 方法，我可以在 selectedFilter 属性中获取值。

基本上我正在对 Dropdown 的更改事件进行内容过滤。

我使用https://www.learnrazorpages.com/razor-pages/forms/select-lists 作为参考。

提前谢谢你。

更新（答案）

我通过将 SELECT 放入 FORM 元素中获得了成功，如下所示。

<form method="post">
  <!-- Other HTML -->
  <select asp-for="selectedFilter" asp-items="Model.Options" onchange="this.form.submit();"></select>
  <!-- Other HTML -->
</form>

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

public void OnPost()
{
  //Here you will get the selected value into selectedFilter 
}

谢谢大家帮助我

【问题讨论】：

谢谢@LazZiya，这就是我要找的。span>
我将在这里放置一个有用的链接LazZiya answer 以解决另一个问题

标签： c# asp.net-core razor razor-pages

【解决方案1】：

onchange()调用一个javascript函数，你需要使用ajax将数据发布到razor pages hanlder。

Razor 页面旨在防止 (CSRF/XSRF) 攻击。因此，防伪令牌验证会自动包含在 Razor 页面中。您需要在 ajax 请求的标头中发送正确的 RequestVerificationToken。

Index.cshtml 与form

<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>
}

或者直接不用form

<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;
    }

【讨论】：