[英]How to reload/call OnGet or OnPost method on DropDown change in ASP.NET Razor Page
I'm using the Asp.Net Core Razor Pages for one of my static website.我正在为我的一个静态网站使用 Asp.Net Core Razor Pages。
I have one drop-down on my page and I bind it using the following code.我的页面上有一个下拉菜单,我使用以下代码绑定它。
[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";
}
In cshtml在 cshtml 中
<select asp-for="selectedFilter" asp-items="Model.Options"></select>
Once the page load - The Dropdown is rendered properly页面加载后 - 下拉列表正确呈现
Now, I just wanted to know how to handle the onchange
event of Dropdown so it calls the OnGet/OnPost
method of Razor page and I can get the value in selectedFilter
property.现在,我只想知道如何处理 Dropdown 的
onchange
事件,以便它调用 Razor 页面的OnGet/OnPost
方法,我可以获取selectedFilter
属性中的值。
Basically I am doing the content filtering on change event of Dropdown.基本上我正在对 Dropdown 的更改事件进行内容过滤。
I used the https://www.learnrazorpages.com/razor-pages/forms/select-lists as reference.我使用了https://www.learnrazorpages.com/razor-pages/forms/select-lists作为参考。
Thank you in advance.先感谢您。
Update (Answer)更新(答案)
I got success by putting the SELECT into FORM element like below.通过将 SELECT 放入 FORM 元素,我获得了成功,如下所示。
<form method="post">
<!-- Other HTML -->
<select asp-for="selectedFilter" asp-items="Model.Options" onchange="this.form.submit();"></select>
<!-- Other HTML -->
</form>
And added the following OnPost method into CS file.并将以下 OnPost 方法添加到 CS 文件中。
public void OnPost()
{
//Here you will get the selected value into selectedFilter
}
Thank you everyone for helping me out谢谢大家帮助我
onchange()
calls a javascript function and you need to use ajax to post data to razor pages hanlder. onchange()
调用 javascript 函数,您需要使用 ajax 将数据发布到剃须刀页面处理程序。
Razor Pages are designed to be protected from (CSRF/XSRF) attacks. Razor Pages 旨在防止 (CSRF/XSRF) 攻击。 Hence, Antiforgery token validation are automatically included in Razor Pages.You need to send correct
RequestVerificationToken
in headers of your ajax request.因此,防伪令牌验证会自动包含在 Razor
RequestVerificationToken
中。您需要在 ajax 请求的标头中发送正确的RequestVerificationToken
。
Index.cshtml with form
带
form
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>
}
Or directly without form
或者直接不用
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>
}
Add POST
handler in your Index.cshtml.cs
and add breakpoints to check:在您的
Index.cshtml.cs
添加POST
处理程序并添加断点以进行检查:
[BindProperty]
public string selectedFilter { get; set; }
public void OnPost()
{
var data = selectedFilter;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.