Blazor Server应用中参数Get/Set调用方法及@bind替代@onchange实现下拉框交互的问题与解决方案

1. 如何在属性的Get/Set中正确调用方法避免栈溢出 #

你之前遇到的栈溢出问题，根源在于属性getter的无限递归调用。看一下你写的代码：

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

当你访问selectedString时，getter会调用Test(selectedString)，而Test方法里又访问了selectedString，这会再次触发getter，形成无限循环，最终导致栈溢出。

正确的写法：使用私有后备字段 #

要解决这个问题，你需要为属性定义一个私有后备字段，把属性的读写逻辑和业务逻辑分开：

// 私有后备字段，存储实际值
private string _selectedString;
string className = "";

// 公开属性，封装读写逻辑
public string SelectedString
{
    get => _selectedString;
    set
    {
        _selectedString = value;
        // 在setter中安全调用自定义方法
        UpdateClassName();
    }
}

private void UpdateClassName()
{
    className = _selectedString == "Yes" ? "It worked" : "It Failed";
}

这样，当属性值被修改时，setter会先更新后备字段，再调用自定义方法，完全避免了递归问题。

2. 用@bind替代@onchange实现下拉框值变更逻辑 #

你原来的代码用@onchange处理下拉框变化，但想换成@bind。这里有两种推荐方案：

方案一：利用属性的setter（兼容所有Blazor版本） #

结合上面的正确属性写法，直接在setter中执行你的DisplayToggle逻辑：

<select @bind="SelectedString" class="form-control">
  <option value=" "></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

private string _selectedString;
public string SelectedString
{
    get => _selectedString;
    set
    {
        _selectedString = value;
        // 调用你的异步方法
        await DisplayToggle(value, "DMGReported");
    }
}

async Task DisplayToggle(string selectedValue, string DivToToggle) {
  // 对选定值执行相关操作
}

方案二：使用@bind:after（Blazor 6.0+ 推荐） #

如果你的项目使用Blazor 6.0或更高版本，可以用@bind:after直接绑定后触发方法，代码更简洁：

<select @bind="selectedString" @bind:after="() => DisplayToggle(selectedString, "DMGReported")" class="form-control">
  <option value=" "></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

string selectedString;

async Task DisplayToggle(string selectedValue, string DivToToggle) {
  // 对选定值执行相关操作
}

3. 你的最终可行代码原理解释 #

你最终的代码能生效，核心在于Blazor的依赖追踪机制，我们来拆解一下：

关键代码分析 #

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) {
  // 调用JS显示/隐藏元素的逻辑
}

• dmgReported是一个只读计算属性（表达式体成员），它的值完全依赖于packageSubmission.RepDmg的当前值。
• 页面上的<p style="display:none;">@dmgReported</p>是核心：Blazor的组件渲染系统只会追踪模板中明确引用的变量。如果没有这个隐藏元素，Blazor不知道dmgReported依赖packageSubmission.RepDmg，所以当packageSubmission.RepDmg变化时，不会重新计算dmgReported，自然也不会执行ToggleDiv方法。
• 当packageSubmission.RepDmg变化时，Blazor检测到模板中的@dmgReported需要更新，会重新计算dmgReported的值，从而触发ToggleDiv方法，执行JS互操作来控制DOM元素的显示/隐藏。

这个写法虽然能生效，但更优雅的方式其实是用前面提到的@bind:after或者属性setter，避免依赖隐藏元素的“hack”写法。

内容的提问来源于stack exchange，提问作者jnelson