在下拉列表中更改值时重新加载整个表单页面

Question

我有一个剃须刀页面。这是一个 Detail/Edit 页面。

这里是页面：

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

我用这个方法加载页面：

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(...)
{
    ...
}

第一次categoryCode为空，我只是在页面中填写dropdownlist。然后，当我更改下拉列表中的选定值时，我想再次调用 OnGet 方法。这样我就可以在页面上加载整个信息，以及所选类别的数据。

最后，当我提交页面时，我想编辑值。

当我在下拉列表中更改选择时，是否可以调用 OnGet？

谢谢

Answer 1

这是一个您可以关注的工作演示：

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

在下拉列表中更改值时重新加载整个表单页面

Reload whole form page on change value in dropdownlist

onchange

submit

asp.net-core

razor-pages