Reload whole form page on change value in dropdownlist

Question

I have a rarzor page. It is an Detail/Edit page.

Here the page:

@page
@model Categories.Pages.DetailsModel

<select>
    <option value="" selected="selected">Seleziona una categoria</option>
    @foreach (var category in Model.Categories)
    {
        <option value="@category.Code">@category.Name</option>
    }
</select>

<form method="post">
    @Html.AntiForgeryToken()

    <input type="hidden" asp-for="SelectedCategory.Code" />

    <input type="text" asp-for="SelectedCategory.Name" />
    <input type="tel" asp-for="SelectedCategory.InboundTelephoneNumber" />
    <input type="tel" asp-for="SelectedCategory.OutboundTelephoneNumber" />

    <input type="number" asp-for="SelectedCategory.FeePercentage" />
    <input type="number" asp-for="SelectedCategory.MinFeeRealizable" />
    <input type="number" asp-for="SelectedCategory.MaxFeeRealizable" />
    <input type="number" asp-for="SelectedCategory.OrderInMenu" />

    <button type="submit">Edit</button>
</form>

I load the page with this method:

public async Task OnGet(string categoryCode = null)
{
    this.Categories = await this._client.GetCategories();

    if (!string.IsNullOrWhiteSpace(categoryCode))
    {
        this.SelectedCategory = await this._client.GetCategoryDetails(categoryCode);
    }
}

public async Task OnPost(...)
{
    ...
}

First time categoryCode is null and I just fill the dropdownlist in the page. Then I would like to call again the OnGet method, when i change the selected value in the dropdownlist. In this way I could load the whole info on the page, with data of the selected category.

Finally, when I do a submit of the page I want to edit the values.

Is it possible to call the OnGet when I change selection in the dropdownlist?

Thank you

Answer 1

Here is a working demo you could follow:

<select onchange="PassSelectedValue(this)">   //add this...
    <option value="" selected="selected">Seleziona una categoria</option>
    @foreach (var category in Model.Categories)
    {
        <option value="@category.Code">@category.Name</option>
    }
</select>  
<form method="post">
    @Html.AntiForgeryToken()
    <input type="hidden" asp-for="SelectedCategory.Code" />    
    <input type="text" asp-for="SelectedCategory.Name" />
    <input type="tel" asp-for="SelectedCategory.InboundTelephoneNumber" />           
    <input type="tel" asp-for="SelectedCategory.OutboundTelephoneNumber" />   
    <input type="number" asp-for="SelectedCategory.FeePercentage" />
    <input type="number" asp-for="SelectedCategory.MinFeeRealizable" />
    <input type="number" asp-for="SelectedCategory.MaxFeeRealizable" />
    <input type="number" asp-for="SelectedCategory.OrderInMenu" />    
    <button type="submit">Edit</button>
</form>
@section Scripts
{
    <script>
        function PassSelectedValue(selectObject) {
            console.log(selectObject.value);  //For testing the selected item
            //if you have a Details.cshtml in Pages folder
            //the request url should be like below....
            window.location.href = "Details?categoryCode=" + selectObject.value;
        }
    </script>
}