如何在获取参数集时调用 Blazor 服务器端应用程序中的方法

Question

我有一个 select 控件绑定到一个 selected 值。由于我不能同时使用@onChange 和@bind，所以@bind 版本是什么：

<select @onchange='(e  => DisplayToggle(e, "DMGReported"))' class="form-control">
    <option value=" "> </option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

其中执行：

async Task DisplayToggle(ChangeEventArgs e, string DivToToggle)
{
    selectedString = e.Value.ToString();
    //Do something with that selected value
}

使用 OnParamterSet()，它会触发一次...但如果下拉列表中的 selected 选项发生更改，则不会再次触发。尝试调用参数 get/set 内的方法会导致页面出现堆栈溢出，并重复数千次。在我偶然发现这个之后我试过了：

<select @bind="selectedString">
   <option value=" "> </option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
</select>
<p>@className</p>
string className = "";

public string selectedString
{
    get => Test(selectedString);
    set { selectedString = value; }

}

public string Test(string test)
{
   
        if (selectedString == "Yes")
        {
            className = "It worked";
        }
        else
        {
            className = "It Failed";
        }
        
    return test;
}

功能代码感谢 Brian Parker 的帮助：奇怪的是，这必须在页面上：

<p style="display:none;">@dmgReported</p>

要实现这一点：

string selectedString;
string dmgReported => packageSubmission.RepDmg switch
{
    "Yes" => ToggleDiv("Yes", "DMGNotReported", "DMGReported"),
    "No" => ToggleDiv("No", "DMGReported", "DMGNotReported"),
    _ => ToggleDiv("", "DMGReported", "DMGNotReported")
};
public string ToggleDiv(string YesNo, string DivToHide, string DivToShow)
{
    try
    {
        if (!String.IsNullOrEmpty(packageSubmission.RepDmg))
        {
            if (YesNo == "No" || YesNo == "Yes")
            {
                JSRuntime.InvokeAsync<object>("hideElement", new { id = DivToHide });
                JSRuntime.InvokeAsync<object>("showGroup", new { id = DivToShow });
            }               
            else
            {
                JSRuntime.InvokeAsync<object>("hideElement", new { id = DivToHide });
                JSRuntime.InvokeAsync<object>("hideElement", new { id = DivToShow });
            }
        }
    }
    catch { }
    return DivToHide;
}

Answer 1

您不必使用 setter。只是基于绑定值的计算属性。

<select @bind="selectedString">
   <option value=" "> </option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
</select>

<p>@className</p>

@code {
   string selectedString;
   string className => selectedString switch 
   {
       "Yes" => "It worked",
       "No" => "It failed",
       _ => ""
   };
}

BlazorRepl

如果需要使用 setter :

<select @bind="SelectedString">
   <option value=" "> </option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
</select>

<p>@className</p>
@code {
   string className;
   string selectedString;
   string SelectedString 
   {
       get => selectedString;
       set 
       {
            if(selectedString == value) return; // Do nothing
            selectedString = value;
            className = value switch 
            {
                "Yes" => "It worked",
                "No" => "It failed",
                _ => ""                
            };        
       }
   }
}

BlazorRepl

如何在获取参数集时调用 Blazor 服务器端应用程序中的方法

How to call a method in Blazor Server Side App on get set of a parameter

c#

data-binding

blazor

blazor-server-side