Razor 视图的有界 属性 在 post 后未更新
Razor view's bounded property not updating after post
我无法在 OnPostOrder()
执行后更新下面示例剃刀视图中的 属性 价格。我编写此示例视图是为了执行以下操作:
- 更改产品 select 列表时,请使用 jquery 的
submit()
提交 ProductForm。
- 在提交 ProductForm 时使用
asp-page-handler
点击 OnPostOrder()
。 注意:这在我的实现中有效,如果我的示例中存在语法问题,我深表歉意。
- 我从自定义静态函数中获取所有产品选项,然后通过 productid 获取匹配的产品。
- 我将匹配产品的价格设置为价格 属性。 但是, 这不会更新价格 属性。
示例视图:
@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 name
和 value
属性。但是当我在 OnPostOrder()
之后调试页面时,我能够点击 <input asp-for="OrderAmount" />
.
发生这种情况是因为在呈现输入元素标记时,输入标签助手首先检查模型状态字典中的任何值,如果找到此 属性 的值,将使用该值。这就是您看到通过表单提交从输入元素传递的原始值的原因。
解决方案是从模型状态字典中删除此特定项目。您可以使用 ModelState.Remove
方法来执行此操作。
public IActionResult OnPost()
{
this.Price = 25;
ModelState.Remove("Price"); // This line does the trick
return Page();
}
我还建议您为您的属性使用正确的类型。如果要处理数值,请使用 int
或 decimal
等数字类型,而不是字符串。
this.StateHasChanged();
对我来说效果很好
public void OnPost()
{
this.Price = 25; //change value
this.StateHasChanged(); //tells page to update
}
我无法在 OnPostOrder()
执行后更新下面示例剃刀视图中的 属性 价格。我编写此示例视图是为了执行以下操作:
- 更改产品 select 列表时,请使用 jquery 的
submit()
提交 ProductForm。 - 在提交 ProductForm 时使用
asp-page-handler
点击OnPostOrder()
。 注意:这在我的实现中有效,如果我的示例中存在语法问题,我深表歉意。 - 我从自定义静态函数中获取所有产品选项,然后通过 productid 获取匹配的产品。
- 我将匹配产品的价格设置为价格 属性。 但是, 这不会更新价格 属性。
示例视图:
@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 name
和 value
属性。但是当我在 OnPostOrder()
之后调试页面时,我能够点击 <input asp-for="OrderAmount" />
.
发生这种情况是因为在呈现输入元素标记时,输入标签助手首先检查模型状态字典中的任何值,如果找到此 属性 的值,将使用该值。这就是您看到通过表单提交从输入元素传递的原始值的原因。
解决方案是从模型状态字典中删除此特定项目。您可以使用 ModelState.Remove
方法来执行此操作。
public IActionResult OnPost()
{
this.Price = 25;
ModelState.Remove("Price"); // This line does the trick
return Page();
}
我还建议您为您的属性使用正确的类型。如果要处理数值,请使用 int
或 decimal
等数字类型,而不是字符串。
this.StateHasChanged();
对我来说效果很好
public void OnPost()
{
this.Price = 25; //change value
this.StateHasChanged(); //tells page to update
}