Blazor Server如何通过@if语句动态移除HTML标签的ondrag系列事件

解决方案1：使用Blazor原生空事件绑定特性（最简便） #

Blazor原生支持当事件绑定的委托值为null时，自动不在DOM上挂载对应的事件监听器，完全满足你彻底移除拖拽事件的需求，不需要拆分标签、也不需要写冗余的重复代码。
完整可运行代码如下：

<div class="row" 
     @ondragover="@(isSortOn ? (Action<DragEventArgs>)(e => e.PreventDefault()) : null)">
    @foreach (var photo in files)
    {
        <div class="col-xl-3 col-lg-4" 
             @key="photo.Id" 
             tabindex="1"
             @ondragstart="@(isSortOn ? (Action)(() => StartDrag(photo)) : null)"
             @ondragover="@(isSortOn ? (Action)(() => DragOver(photo)) : null)">
               <div class="card">Card contents here</div>
        </div>
     }
</div>

说明：代码中的强制类型转换是为了满足三元运算符两边类型一致的要求，避免编译器报类型不匹配错误。当isSortOn为false时，所有拖拽相关事件绑定值为null，Blazor不会生成对应的事件监听，性能和手动删除属性完全一致，也不会受不稳定的draggable属性影响。

解决方案2：拆分渲染逻辑（适合复杂场景） #

如果你的卡片还有其他需要根据排序模式切换的属性，可以把公共的卡片内容封装为RenderFragment，用if/else渲染两种不同属性的外层标签，避免重复编写内部逻辑：

<div class="row" 
     @ondragover="@(isSortOn ? (Action<DragEventArgs>)(e => e.PreventDefault()) : null)">
    @foreach (var photo in files)
    {
        // 封装公共的卡片内容
        RenderFragment cardContent = @<div class="card">Card contents here</div>;
        
        @if (isSortOn)
        {
            <div class="col-xl-3 col-lg-4" 
                 @key="photo.Id" 
                 tabindex="1"
                 @ondragstart="@(()=> StartDrag(photo))"
                 @ondragover="@(()=> DragOver(photo))">
                @cardContent
            </div>
        }
        else
        {
            <div class="col-xl-3 col-lg-4" 
                 @key="photo.Id" 
                 tabindex="1">
                @cardContent
            </div>
        }
     }
</div>

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