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

问题描述

因此，下面的代码更新了 PC 浏览器（包括铬）上 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;
        }
}

标签： c#androidblazor

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

问题描述

解决方案

推荐阅读