How do I bind-Value a blazor field based on the bind-Value of the second field in Blazor <InputNumber component

Zabron Muyambo 41 Reputation points
2022-11-02T00:06:14.28+00:00

I have a class (Debtors) with 4 properties: CashDebtors; Debtors60, Debtors90, Debtors120, Debtors120Plus; The total sum must be 100(%) . Default for CashDebtors is 100(%) while 0 for each of the others, i.e CasgDebtorsPercent = 100 - (Debtors60 + Debtors90 + Debtors120 + Debtors120Plus)

Now, when entering each of the Debtors, I want to calculate the remaining CashDebtors value. I tried to use:

<InputNumber @bind-Value= CashDebtorsPercent />  
<InputNu,mber @bind-Value= DebtorsPercent60   @oninput="@(e=>UpdateCasDebtors)" />  
<InputNu,mber @bind-Value= DebtorsPercent90  @oninput="@(e=>UpdateCasDebtors)" />  
<InputNu,mber @bind-Value= DebtorsPercent120  @oninput="@(e=>UpdateCasDebtors)" />  
<InputNu,mber @bind-Value= DebtorsPercent120Plus @oninput="@(e=>UpdateCasDebtors)" />  
  
@code  
{  
  
private async Task UpdateCashDebtors()  
{  
    CashDebtorsPercent -= (DebtorsPercent60 + DebtorsPercent90 + DebtorsPercent120 + DebtorsPercent130);  
}  
}  

This is not working. I tried using @ValueChanged and @onchanged but nothing worked. In actual fact, I would want to use actual members of the list like:

<InputNumber @bind-Vlaue=Debtors.DebtorsPercent60 />

Please assist guys

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,375 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,194 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,006 Reputation points Microsoft Vendor
    2022-11-02T06:06:26.987+00:00

    Hi @Zabron Muyambo ,

    In the oninput event, you need to get the current entered value and assign it to the Bind value, then call the UpdateCashDebtors method to calculate the CashDebtorsPercent.

    Try to use the following code: view the source code

    256178-image.png

    The result as below:

    256245-1.gif

    In the above sample code, we directly use the properties which defined in the Razor component, if you want to the Model properties, try to change the code as below:

    256254-image.png

    Then the result like this:

    256272-2.gif


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    3 people found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful