如何将数据从 Syncfusion Data Grid 传递到 ASP.NET Core 中的侧边栏？

Question

我正在使用 Syncfusion 数据网格来显示信息。当单击数据网格中的项目时，我想在 Syncfusion 侧栏中显示此信息（以及一些附加更新/删除按钮）。我的问题是将此信息从数据网格传递到侧边栏的正常流程是什么？

这里是使用的代码示例 - 单击数据网格项目时，调用函数来手动查找侧栏中的项目并设置它们的值。它有效，但对我来说似乎很业余。有没有办法将底层模型（ProjectUser）传递到侧边栏，而不是手动设置值？或者也许我应该使用完全不同的方法来实现这一目标？

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

<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>

Answer 1

侧边栏作为布局组件，允许我们在其内容区域内渲染各种组件。根据所选的内容元素，能够动态管理操作。在您的应用程序中，您在内容中呈现 HTML 元素，这使您能够通过基于 HTML 的方式更改innerHTML 来动态更新内容值。这是有效实现您的要求的可能方法。

问候，

拉贾潘迪R