如何为 DevExtreme MasterDetail DataGrid 设置 DataSource，它对 Master 和 Detail 使用相同的 DataSource？

Question

我有一个现有的 Asp.NetCore Web 应用程序，该应用程序是使用以 C# 编写的 EFC 构建的。这些网页是使用 Razor 构建的。

我正在迁移到使用一些 DevExpress DevExtreme Asp.Net 核心控件。具体来说，我正在尝试使用 DevExtreme DataGrid 来构建主从数据网格。我在为网格的详细信息部分设置数据源时遇到困难。

考虑我的模型中的以下 class 定义：

public class Address
{
    [Key]
    public Guid AddressId { get; set; }
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

public class Owner
{
    [Key]
    public Guid OwnerId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address OwnerAddress { get; set; }
    public string PhoneNumber { get; set; }
    public string CellNumber { get; set; }
}

这是我的页面定义：

@model IEnumerable<Owner>
@{ Layout = "_DevExtremeLayout"; ViewBag.Title = "All Owners";}

@(Html.DevExtreme().DataGrid<SmartTracPoc.Models.Owner>()
    .DataSource(Model)
    .RemoteOperations(true)
    .AllowColumnReordering(true)
    .RowAlternationEnabled(true)
    .ShowBorders(true)
    .OnContentReady("contentReady")
    .Paging(p => p.PageSize(10))
    .Pager(p => p
        .ShowPageSizeSelector(true)
        .AllowedPageSizes(new[] { 10, 25, 50, 100 })
    )
    .SearchPanel(s => s
        .Visible(true)
        .HighlightCaseSensitive(true)
    )
    .GroupPanel(g => g.Visible(true))
    .Grouping(g => g.AutoExpandAll(false))
    .Columns(columns => {

        columns.AddFor(m => m.FirstName);
        columns.AddFor(m => m.LastName);
        columns.AddFor(m => m.PhoneNumber);
        columns.AddFor(m => m.CellNumber);      
    })
    .MasterDetail(md => {
        md.Enabled(true);
        md.Template(@<text>
            <div class="master-detail-caption"><%- data.FullName %> 's Address:</div>
            @(Html.DevExtreme().DataGrid<SmartTracPoc.Models.Owner>()
                .ColumnAutoWidth(true)
                .ShowBorders(true)
                .Columns(columns => {
                    columns.AddFor(m => m.OwnerAddress.StreetAddress);
                    columns.AddFor(m => m.OwnerAddress.City);
                    columns.AddFor(m => m.OwnerAddress.State);
                    columns.AddFor(m => m.OwnerAddress.ZipCode);
                    columns.AddFor(m => m.OwnerAddress.Country);
                })
                //.DataSource(Model)  ??????? What do I do here?
            )
        </text>);
    })
)

<script>
    var collapsed = false;
    function contentReady(e) {
        if (!collapsed) {
            collapsed = true;
            e.component.expandRow(["EnviroCare"]);
        }
    }

    function customizeTooltip(pointsInfo) {
        return { text: parseInt(pointsInfo.originalValue) + "%" };
    }
</script>

这构建并成功运行。问题是地址 class 中引用的字段没有显示任何数据。在上面的实现中，网格的 Master 和 Detail 部分应该使用相同的数据源（在本例中为“Model”-> IEnumerable）。

如何实现？

Answer 1

您在主详情中的模型不是 Owner 而是 Address 请尝试以下操作：

.MasterDetail(md => {
        md.Enabled(true);
        md.Template(@<text>
            <div class="master-detail-caption"><%- data.FullName %> 's Address:</div>
            @(Html.DevExtreme().DataGrid<SmartTracPoc.Models.Address>()
                .ColumnAutoWidth(true)
                .ShowBorders(true)
                .Columns(columns => {
                    columns.AddFor(m => m.StreetAddress);
                    columns.AddFor(m => m.City);
                    columns.AddFor(m => m.State);
                    columns.AddFor(m => m.ZipCode);
                    columns.AddFor(m => m.Country);
                })
                .DataSource(new JS("data.address"));
            )
        </text>);
    })

这就是为什么我不推荐使用 MVC 控件，使用 JQuery 更容易控制组件。

其次，所有操作都应该在服务器端进行。如果您想要 Owner 的详细信息，则对该海豚执行 API 操作，然后让主详细信息调用该操作。

如何为 DevExtreme MasterDetail DataGrid 设置 DataSource，它对 Master 和 Detail 使用相同的 DataSource？

How do I set the DataSource for a DevExtreme MasterDetail DataGrid which uses the same DataSource for both Master and Detail?

c#

devextreme

entity-framework-core

asp.net-core