Razor 视图的有界 属性 在 post 后未更新

Razor view's bounded property not updating after post

我无法在 OnPostOrder() 执行后更新下面示例剃刀视图中的 属性 价格。我编写此示例视图是为了执行以下操作:

示例视图:

@page
@{
    @functions{
        [BindProperty] public string Product { get; set; }
        [BindProperty] public decimal Price { get; set; }

        public void OnPostOrder()
        {
            Price = 25.00;
        }
    }
    List<ProductOption> productOptions = AdminUtil.GetProductOptions();
    SelectList productOptionSelectList = new SelectList(productOptions, "ProductId", "Name");
}

<form method="post" id="ProductForm" asp-page-handler="order">
    Product: <select asp-for="Product" asp-items="@productOptionSelectList"></select> <br />
    Order Amount: <input asp-for="Price" /> <br />
</form>

@section Scripts {
    <script>
        $(function () {
            $('#Product').on('change', function () {
                $("#ManualOrderForm").submit();
            });
        });
    </script>
}

我是 razor pages 的新手,所以如果这是一个重复的问题,请指出正确的方向。我找不到可比较的示例,但我可能没有搜索正确的术语。

一个似乎有意义的原因是 asp-for 生成 HTML namevalue 属性。但是当我在 OnPostOrder() 之后调试页面时,我能够点击 <input asp-for="OrderAmount" />.

发生这种情况是因为在呈现输入元素标记时,输入标签助手首先检查模型状态字典中的任何值,如果找到此 属性 的值,将使用该值。这就是您看到通过表单提交从输入元素传递的原始值的原因。

解决方案是从模型状态字典中删除此特定项目。您可以使用 ModelState.Remove 方法来执行此操作。

public IActionResult OnPost()
{       
    this.Price = 25;

    ModelState.Remove("Price");  // This line does the trick
    return Page();
}

我还建议您为您的属性使用正确的类型。如果要处理数值,请使用 intdecimal 等数字类型,而不是字符串。

this.StateHasChanged(); 对我来说效果很好

public void OnPost()
{   
    this.Price = 25; //change value
    this.StateHasChanged(); //tells page to update
}