Razor view's bounded property not updating after post

Question

I cannot get the property Price in the example razor view below to update after OnPostOrder() executes. I wrote this example view to do the following:

• On change of the product select list, submit the ProductForm using jquery's submit().
• Use asp-page-handler to hit OnPostOrder() when the ProductForm is submitted. Note: this works in my implementation apologizes if there's a syntax problem in my example.
• I get all product options from a custom static function then get the matching product by productid.
• I set the matching product's price to the Price property. However, this doesn't update the Price property.

Example View:

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

I'm new to razor pages, so if this is a duplicate question please point me in the right direction. I haven't been able to find a comparable example, but I may not be searching the correct terms.

One reason that seems to make sense is that asp-for generates the HTML name and value attributes. But when I debug the page after OnPostOrder() I'm able to hit the <input asp-for="OrderAmount" />.

Answer 1

This is happening because when rendering the input element markup, the input tag helper first check model state dictionary for any values and if it finds a value for this property, that will be used. That is the reason you are seeing the original value passed from the input element via your form submit.

The solution is to remove this specific item from the model state dictionary. You can use the ModelState.Remove method to do so.

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

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

I also suggest you to use the correct types for your properties. If you are dealing with numeric values, use a numeric type such as int or decimal instead of string.