.net core 20的数据绑定<;投入>;但只有一种常见的onchange方法
我有一个计算表,用户可以在其中输入几个位置(基本价格、多个选项),这些位置应该加起来等于总数。我正在努力把所有的位置加起来,形成最终的总数。问题是,@bind=”“不允许我为每个.net core 20的数据绑定<;投入>;但只有一种常见的onchange方法,.net-core,blazor,blazor-server-side,blazor-client-side,.net Core,Blazor,Blazor Server Side,Blazor Client Side,我有一个计算表,用户可以在其中输入几个位置(基本价格、多个选项),这些位置应该加起来等于总数。我正在努力把所有的位置加起来,形成最终的总数。问题是,@bind=”“不允许我为每个输入调用一个onchange事件,因此我必须为每个位置实现一个事件处理程序(总共大约20个) 现在不幸的是,当我改变基本价格时,这会改变我的总数,但这还不能动态地工作,而是只对基本价格执行。我需要一个解决方案,在这里我可以传递对已更改为CalculateBottomLines()方法的字段的引用。这里我使用属性设置器重新
输入调用一个onchange事件,因此我必须为每个位置实现一个事件处理程序(总共大约20个)
现在不幸的是,当我改变基本价格时,这会改变我的总数,但这还不能动态地工作,而是只对基本价格执行。我需要一个解决方案,在这里我可以传递对已更改为CalculateBottomLines()
方法的字段的引用。这里我使用属性设置器重新计算总数,并@bind:event=“oninput”
在输入时触发
<input type="number" @bind="calc.BasicPrice" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Option" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Total" class="form-control" readonly />
@code {
SomeModel calc = new SomeModel();
public class SomeModel
{
public double BasicPrice
{
get => basicPrice;
set { basicPrice = value; UpdateTotal(); }
}
public double Option
{
get => option;
set { option = value; UpdateTotal(); }
}
public double Total { get; set; }
internal void UpdateTotal()
{
Total = BasicPrice + Option;
}
private double basicPrice;
private double option;
}
}
@代码{
SomeModel calc=新的SomeModel();
公共类模型
{
公共双基地
{
get=>basicPrice;
设置{basicPrice=value;UpdateTotal();}
}
公共双重选择权
{
get=>选项;
设置{option=value;UpdateTotal();}
}
公共双总计{get;set;}
内部void UpdateTotal()
{
总计=基本价格+期权;
}
私人双基地;
私人双重选择权;
}
}
您的总计需要将所有值相加,而不是在每次输入更改时递增更改,否则,当有人多次更改一个输入时,您将得到错误的总计。不需要onchange事件,只需绑定用户可以输入的值,使用value=@calc.Total
而不是binding和calc.Total,它应该是一个将所有单个项相加的函数Total=>BasicPrice+Option+…
。如果有你没有提到的额外的复杂性,请更新你的问题。我确实计算了所有的个人职位来计算总数。如果在BasicPrice字段中输入一个新的数字,则会触发CalculateBottomLines方法,在该方法中,新总数将被计算并显示在其自己的字段中。这个想法是让onchange事件只出现在输入中,用户可以在输入中实际更改某些内容。仍然使用一个函数来计算总数,那么你就不需要事件了。你能再详细说明一下它是什么样子吗?我在这里跟不上你。。。每次有人更改BasicPrice或20个选项之一的值时,我都必须触发“UpdateTotal”方法……我按照Brian解释的方式尝试,但只要在BasicPrice(或任何其他)字段中键入内容,我就会收到访问冲突:r程序“[17028]iisexpress.exe”已退出,代码为-1073741819(0xc0000005)“访问冲突”。@d00d这里是一个正在工作的回购,上面粘贴了代码。。。是的,谢谢,我刚用一个新文件试过。它对我有效,但在我的常规razor文件中给了我访问冲突的麻烦。我们必须找出问题所在。无论如何谢谢你!好的,我可以找到我的错误。我让UpdateTotal函数连接到Total的setter,这导致了一个无限循环。。。
<input type="number" value="@calc.BasicPrice"
@onchange="(e) => CalculateBottomLines(calc.BasicPrice.GetType(), e)"
class="form-control" />
@code {
private void CalculateBottomLines(Type field, ChangeEventArgs input)
{
input.Value = input.Value.ToString().Replace(".", ",");
// Update the input variable
calc.BasicPrice = Convert.ToDecimal( input.Value.ToString() ); // <-- The name of the receiving variable has to be determined dynamically, depending on the field that was changed
// Update the total
calc.Total = calc.BasicPrice + calc.Option;
}
}
<input type="number" @bind="calc.BasicPrice" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Option" @bind:event="oninput" class="form-control" />
<input type="number" @bind="calc.Total" class="form-control" readonly />
@code {
SomeModel calc = new SomeModel();
public class SomeModel
{
public double BasicPrice
{
get => basicPrice;
set { basicPrice = value; UpdateTotal(); }
}
public double Option
{
get => option;
set { option = value; UpdateTotal(); }
}
public double Total { get; set; }
internal void UpdateTotal()
{
Total = BasicPrice + Option;
}
private double basicPrice;
private double option;
}
}