Blazor 滑块范围输入与按钮 - 在移动 Android 浏览器与浏览器上有所不同

Question

所以下面的代码更新了 PC 浏览器(包括 chromium(上的 CheckSliderRating(( 的滑块描述，但在发布后，如果我单击"保存"按钮，滑块只会更新 Android 浏览器上的文本。有没有办法让滑块自己工作(从 CheckSliderRating(( 调用 Save(( 不起作用(？

剃刀页面/组件：

@using BlazorWithIdentity.Shared
@page "/Updrs"
<div class="unit">
<div class="label">How do you rate Blazor?</div>
<div class="labelTarget">
<input type="range"
step="1"
min="1"
max="5"
@bind-value="@rating"
@onclick="@CheckSliderRating" />
<div id="slidertext" class="label"> @sliderText  </div>
</div>
</div>
<div>
<button type="submit" @onclick="@Save">Submit</button>
</div>
@code {
SliderRatingText ratingtext;
int rating { get; set; }
string sliderText { get; set; }
protected void CheckSliderRating()
{
if (ratingtext == null)
ratingtext = new SliderRatingText();
sliderText = ratingtext.CheckRating(rating);
}
protected void Save()
{
if (ratingtext == null)
ratingtext = new SliderRatingText();
sliderText = ratingtext.CheckRating(rating);
sliderText = sliderText + " ";
}
}

类：

public class SliderRatingText
{
public string CheckRating(int rating)
{
switch (rating)
{
case 1:
sliderText = "Very slow";
break;
case 2:
sliderText = "Not too slow - fast development";
break;
case 3:
;
sliderText = "Great for small Apps";
break;
case 4:
sliderText = "Amazingly fast development";
break;
case 5:
sliderText = "Amazing -Steve Sanderson should be knighted";
break;
}
return sliderText;
}
}

Answer 1

最后添加

@bind-value:event="oninput"
@onchange="CheckSliderRating" 

解决了问题。