How to reload/call OnGet or OnPost method on DropDown change in ASP.NET Razor Page

Question

I'm using the Asp.Net Core Razor Pages for one of my static website.

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

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

Basically I am doing the content filtering on change event of Dropdown.

I used the https://www.learnrazorpages.com/razor-pages/forms/select-lists as reference.

Thank you in advance.

---

Update (Answer)

I got success by putting the SELECT into FORM element like below.

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

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

Thank you everyone for helping me out

Shipowner

Thanks @LazZiya, That's what I am looking for. – Shipowner

I will place here a link to usefull LazZiya answer for another question – Graphitize

Answer 1

onchange() calls a javascript function and you need to use ajax to post data to razor pages hanlder.

Razor Pages are designed to be protected from (CSRF/XSRF) attacks. Hence, Antiforgery token validation are automatically included in Razor Pages.You need to send correct RequestVerificationToken in headers of your ajax request.

Index.cshtml with 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>
}

Or directly without 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:

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

Mayers

Answer 2

The solution of putting the select in it's own form did not work for me. I took a more round about approach. I created a button that had the asp-page-handler I wanted the drop down to post to, but styled the button so it was pretty much invisible. I think added some jquery such that when the drop down in question changed, it'd fire the click event of the button.

I'm sure there's a better way, but this seems to work pretty well. Here's an example:

    <select  class="form-select" 
            name="ddl" 
            id="ddl"
            asp-for="id">
        <option value="">Select Position Type</option>
            ...
    </select>
    
    <input type="submit"
        asp-page-handler="idChanged"
        style="background: transparent;border: none !important;font-size:0;"
        id="btnidChanged"
        value="HIDDEN id button" />

    $('#ddl').on('change', function() {
       $('#btnidChanged').click(); 
    });     

Disparity