Question

我将Asp.Net Core Razor Pages用于我的静态网站之一。

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
    <pattern id="i" width="100%" height="100%">
    <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/>
    </pattern>
    <rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
    </svg>

在cshtml中

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

页面加载后-下拉菜单正确显示

现在，我只想知道如何处理Dropdown的<select asp-for="selectedFilter" asp-items="Model.Options"></select>事件，以便它调用Razor页面的onchange方法，并且可以在OnGet/OnPost属性中获取值。

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

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

先谢谢您。

Answer 1

onchange()调用了javascript函数，您需要使用ajax将数据发布到剃须刀页面。

Razor Pages被设计为受到（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>
}

在您的POST中添加Index.cshtml.cs处理程序并添加断点以进行检查：

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

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

1 个答案: