Blazor表单属性赋值时代码未执行仅被渲染到页面的问题
Blazor Razor语法赋值语句被直接渲染到页面的问题解决
问题原因
Razor语法有明确的解析规则:
- 写在HTML标签区域、直接以
@开头的单行表达式,默认会被识别为待渲染的输出值,不会作为C#执行语句运行 - 只有放在
@{ }包裹的显式代码块、或者@code块内的内容,才会被识别为需要执行的C#逻辑
你写的<code>@priorWorkspace = @rpt.WorkspaceName</code>完全处于HTML内容区域,Razor会直接把@priorWorkspace和@rpt.WorkspaceName的计算值拼上中间的等号当成文本输出到页面,根本不会执行赋值操作。
另外你的代码还有两个影响运行的问题:
- 已经处于C#代码上下文时(比如
@if后面的括号里、@{ }代码块内部),变量名前不需要额外加@前缀,多余的@会干扰语法解析 - 赋值逻辑顺序错误:你把赋值写在了
if判断的后面,每次循环都是先拿旧的priorWorkspace值做判断再更新变量,完全达不到同工作空间合并行展示的预期效果
修正方法
- 把需要执行的赋值语句放到
@{ }包裹的C#代码块中,去掉多余的@前缀 - 调整逻辑顺序,在每轮循环渲染完当前行后再更新
priorWorkspace变量,供下一轮循环判断使用 - 补全缺失的变量初始化、事件处理方法定义,避免空引用或语法错误
修正后的核心代码如下:
<table class="table"> <thead> <tr> <th>Select</th> <th>Workspace</th> <th>Report Name</th> <th>Report Desc</th> </tr> </thead> <tbody> @{ priorWorkspace = ""; } @foreach (var rpt in rptObj) { <tr> @if (priorWorkspace == rpt.WorkspaceName) { <td></td> <td></td> <td>@rpt.ReportName</td> <td>@rpt.ReportDesc</td> } else { <td> <input type="checkbox" value="@rpt.WorkspaceName" checked="@rpt.IsSelected" @onchange="eventArgs => { CheckboxChanged(rpt, eventArgs.Value); }"> </td> <td>@rpt.WorkspaceName</td> <td>@rpt.ReportName</td> <td>@rpt.ReportDesc</td> } </tr> @{ // 代码块内的赋值语句才会被执行 priorWorkspace = rpt.WorkspaceName; } } </tbody> </table> @code { public string priorWorkspace = ""; List<PowerBIWorkspace> rptObj = new(); private void CheckboxChanged(PowerBIWorkspace rpt, object value) { rpt.IsSelected = (bool)value; } // 你的报告列表初始化、其他业务逻辑 public class PowerBIWorkspace { public string WorkspaceName { get; set; } public string ReportName { get; set; } public string ReportDesc { get; set; } // 不要用全局isChecked变量绑定所有复选框,给每个实体加选中状态属性避免状态同步异常 public bool IsSelected { get; set; } } }
补充说明
如果要实现真正的表格行合并效果,光隐藏同组后续单元格的内容还不够,需要给每组第一个单元格加rowspan属性,提前计算每个工作空间对应的报告数量,不然表格边框、布局会出现错位,可以根据实际需求再调整。
内容的提问来源于stack exchange,提问作者brad
相关产品推荐
相关产品推荐

