如何在 Blazor 中实现双向绑定？

Question

当我更改滑块时，利息金额应该自动计算和显示，而无需用户单击提交按钮。

@page "/"
@using System.Text;
@using System.Net.Http.Headers;
@using Microsoft.AspNetCore.Components;
@using Newtonsoft.Json;
@using RateApp.Models;
 
<table class="table">
    <thead>
        <tr>
           
            <th>Year</th>
             
            <th>Interest</th>
             
        </tr>
    </thead>
<tbody>
@foreach (InQuestion inques in Questions)
{
    // Pass the Dto properties to the component
     <tr>
                <td>@inques.DaysBegin</td>
                
                <td>@inques.Interest</td>
                 
            </tr>}
</tbody>
</table>
 
<div class="row">
      
    <div class="col-md-3">
        <p>Deposit Amount</p>
    </div>
 
<input type="range" min="1000" max="10000" step="1000" @bind="@amount" 
@bind:event="oninput"/>
<p>@amount</p>
</div>
<br />
<div class="row">
  <p>Years:</p>
<input type="range" min="1" max="5" step="1" @bind="@years" 
@bind:event="oninput"/>
</div>
<p>@years</p>
<div>
    <button type="submit"    @onclick="Submit" >Submit</button>
</div>
<div>
    <div class="col-md-3">
        <p>Interest</p>
    </div>
    <div>@final</div>
</div>
  
 
@code {
    public class InQuestion
    { 
        public int No { get; set; }
        public int DaysBegin { get; set; }
        public int DaysEnd { get; set; }
        public decimal Interest { get; set; }
        public decimal SrInterest { get; set; }
    }
 
    public string exp;
    public string codex; public string  jsonstring ; public bool statcode;
    List<InQuestion> Questions = new List<InQuestion>();
    public int number;int years =1;decimal interest; int totalquestions;     int     maxnumber;int amount=1000; decimal imint;int final;
    protected override async Task OnInitializedAsync()
    {
        string jwturl = "https://quizapijwt.azurewebsites.net/api/";
        using (var client1 = new HttpClient())
        {
            client1.BaseAddress = new Uri(jwturl);
            client1.DefaultRequestHeaders.Clear();
            client1.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client1.GetAsync("RateCards");
            if (response.IsSuccessStatusCode)
            {
                //Storing the response details recieved from web api
                jsonstring = await response.Content.ReadAsStringAsync();
                try
                {
                    Questions = JsonConvert.DeserializeObject<List<InQuestion>>(jsonstring);
                    Questions =Questions.OrderByDescending(x => x.DaysBegin).ToList(); 
                }
                catch (Exception ex)
                {   }
              
            }
        }
    }
    private void Submit()
    {
        try
        { 
             
    var    imint  =  (from l in Questions
                       where l.DaysBegin == years
                       select l.Interest).FirstOrDefault() ; 
               
      
        decimal amt = amount;
      
       decimal  finint= Decimal.Multiply(amt, imint)   ;   
        interest=Decimal.Multiply( finint,years);
         final= (int)Math.Round((interest/100));
        }
        catch (Exception ex)
        {
              exp=ex.ToString();
        }
    }
}

注意: 此问题总结整理于：如何在 Blazor 中实现双向绑定。

Answer 1

你好,

可以通过 EventCallback<T> 执行此操作。

首先，我创建了两个名为 CurrentInterestValue 和一个 eventCallBack 的参数。我创建了一个UpdateCurrentInterestValue方法，当range值更改时会调用这个方法。我按年设置 CurrentInterestValue，并通知 EventCallback 更改 CurrentInterestValue 的值。

[Parameter]
public string CurrentInterestValue { get; set; } = "6.8";

[Parameter]
public EventCallback<string> CurrentInterestValueChanged { get; set; }

async Task UpdateCurrentInterestValue()
{
     switch (years)
     {
        case 1: CurrentInterestValue = "6.8"; break;
        case 2: CurrentInterestValue = "7"; break;
        case 3: CurrentInterestValue = "6.75"; break;
        case 4: CurrentInterestValue = "6.75"; break;
        case 5: CurrentInterestValue = "6.5"; break;
        default:
             CurrentInterestValue = "6.8"; break;
     }
     await CurrentInterestValueChanged.InvokeAsync(CurrentInterestValue);
}

然后，我将 change 事件绑定到UpdateCurrentInterestValue 方法并绑定CurrentInterestValue值。

<div class="row">
    <p>Years:</p>
    <input type="range" min="1" max="5" step="1" @bind="@years" @onchange="@UpdateCurrentInterestValue"
           @bind:event="oninput"  />
</div>
<div>
    <div class="col-md-3">
        <p>Interest is</p>
    </div>
    <div>@CurrentInterestValue</div>
</div>

有关详细信息，可以参考ASP.NET Core Blazor 数据绑定。

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。