ASP.NET Core中如何将Syncfusion Data Grid数据传递至Sidebar？

我目前用Syncfusion Data Grid展示数据，需求是点击网格里的条目时，在Syncfusion Sidebar中展示该条目的详细信息，同时添加编辑/删除按钮。现在的疑问是：从Grid向Sidebar传递信息的常规流程是什么？

我当前的实现是手动查找Sidebar内的元素并逐个赋值，虽然能正常运行，但感觉不够专业。能不能直接把底层的ProjectUser模型传递给Sidebar，而非手动设置每个字段的值？或者有没有更优的实现方式？

当前代码示例 #

@using Syncfusion.EJ2
@{
    List<ProjectUser> ProjectTeam = new List<ProjectUser>
    {
        new ProjectUser{Name="UserA", Email="info@email.com"},
        new ProjectUser{Name="UserB", Email="info@email.com"},
        new ProjectUser{Name="UserC", Email="info@email.com"}
    };
}

<div class="control-section">
<div id="wrapper" class="apimaincontent">
    <div>
        <ejs-grid id="Grid" dataSource="ProjectTeam" rowSelected="rowSelected" allowSelection="true">
            <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
            <e-grid-columns>
                <e-grid-column field="Name" headerText="Name" textAlign="Left" width="60"></e-grid-column>
                <e-grid-column field="Empolyer" headerText="Empolyer" width="60"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
    </div>
</div>
    <ejs-sidebar id="left-sidebar" showBackdrop="false" type="Push" width="260px" target=".apimaincontent">
        <e-content-template>
            <div id="container">
                <div id="memberName" class="sub-title"></div>
                <div id="memberEmail" class="sub-title"></div>
            </div>
        </e-content-template>
    </ejs-sidebar>
</div>

<script>
    function rowSelected(args) {
        var selectedrecords = this.getSelectedRecords();
        var memberName = document.getElementById("memberName");
        var memberEmail = document.getElementById("memberEmail");
        memberName.innerHTML = selectedrecords[0].Name;
        memberEmail.innerHTML = selectedrecords[0].Email;
    }
</script>

优化方案与常规流程 #

1. 直接利用选中行数据对象，避免手动DOM操作

Syncfusion Grid的rowSelected事件参数args.data直接包含当前选中行的完整模型对象，无需调用getSelectedRecords()。你可以基于这个对象动态渲染Sidebar内容，无需逐个字段赋值：

<!-- 修改Sidebar内容模板为容器 -->
<ejs-sidebar id="left-sidebar" showBackdrop="false" type="Push" width="260px" target=".apimaincontent">
    <e-content-template>
        <div id="sidebarContent"></div>
    </e-content-template>
</ejs-sidebar>

<script>
    function rowSelected(args) {
        // 获取选中的完整ProjectUser对象
        const selectedUser = args.data;
        
        // 动态渲染Sidebar内容，包含编辑/删除按钮
        const sidebarContent = document.getElementById('sidebarContent');
        sidebarContent.innerHTML = `
            <div class="sub-title">姓名：${selectedUser.Name}</div>
            <div class="sub-title">邮箱：${selectedUser.Email}</div>
            <div class="btn-group">
                <button class="e-btn e-primary" onclick="handleEdit(${JSON.stringify(selectedUser)})">编辑</button>
                <button class="e-btn e-danger" onclick="handleDelete(${selectedUser.Id})">删除</button>
            </div>
        `;
        
        // 自动打开Sidebar（可选）
        const sidebarInstance = document.getElementById('left-sidebar').ej2_instances[0];
        sidebarInstance.show();
    }

    // 编辑处理函数
    function handleEdit(user) {
        // 这里实现编辑逻辑，比如弹出模态框或跳转到编辑页
        console.log('编辑用户:', user);
    }

    // 删除处理函数
    function handleDelete(userId) {
        // 这里实现删除逻辑，比如确认后调用API删除
        console.log('删除用户ID:', userId);
    }
</script>

2. 利用模板绑定实现数据关联（更优雅）

如果希望更贴近"传递模型"的思路，可以通过简单的数据绑定方式，将选中的模型对象直接关联到Sidebar的视图元素，避免拼接HTML字符串：

<!-- 定义Sidebar模板 -->
<ejs-sidebar id="left-sidebar" showBackdrop="false" type="Push" width="260px" target=".apimaincontent">
    <e-content-template>
        <div id="container">
            <div class="sub-title" data-field="Name"></div>
            <div class="sub-title" data-field="Email"></div>
            <button class="e-btn e-primary" onclick="handleEdit()">编辑</button>
            <button class="e-btn e-danger" onclick="handleDelete()">删除</button>
        </div>
    </e-content-template>
</ejs-sidebar>

<script>
    let currentSelectedUser = {};

    function rowSelected(args) {
        currentSelectedUser = args.data;
        // 绑定数据到模板元素
        document.querySelector('[data-field="Name"]').textContent = currentSelectedUser.Name;
        document.querySelector('[data-field="Email"]').textContent = currentSelectedUser.Email;
        
        const sidebarInstance = document.getElementById('left-sidebar').ej2_instances[0];
        sidebarInstance.show();
    }

    function handleEdit() {
        console.log('编辑:', currentSelectedUser);
    }

    function handleDelete() {
        console.log('删除:', currentSelectedUser.Id);
    }
</script>

常规流程总结 #

1. 获取选中数据：通过Grid的rowSelected事件的args.data参数，直接拿到当前选中行的完整模型对象，这是最直接高效的方式。
2. 传递数据到Sidebar：将选中的模型对象存储在全局变量或组件状态中，供Sidebar的渲染逻辑使用。
3. 渲染Sidebar内容：
   • 用动态HTML字符串快速生成内容（适合简单场景）
   • 用模板绑定方式实现数据与视图的关联（适合复杂场景，维护性更好）
4. 添加操作按钮：在Sidebar中嵌入编辑/删除按钮，绑定对应的处理函数，直接使用选中的模型对象完成业务逻辑。

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