C# 如何为一个DevExtreme MasterDetail数据网格设置数据源，该数据网格对Master和Detail使用相同的数据源？

我有一个现有的Asp.NetCore web应用程序，它是使用C#编写的EFC构建的。 网页是用Razor创建的

我正在迁移到使用一些DevExpress-DevExtreme Asp.Net核心控件。 具体地说，我正试图使用DevExtreme数据网格来构建一个主细节数据网格。 我很难为网格的细节部分设置数据源

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

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>

以下是我的页面定义：

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>

@model IEnumerable
@{Layout=“\u devextremeleayout”ViewBag.Title=“所有所有者”}
@（Html.DevExtreme（）.DataGrid（））
.数据源（模型）
.RemoteOperations（真）
.AllowColumnReordering（真）
.RowAlternationEnabled（真）
.ShowBorders（正确）
.onContentTready（“contentReady”）
.pages（p=>p.PageSize（10））
.Pager（p=>p
.ShowPageSizeSelector（真）
.AllowedPageSizes（新[{10,25,50,100}）
)
.SearchPanel（s=>s
.可见（真实）
.highlight区分大小写（真）
)
.GroupPanel（g=>g.Visible（true））
.Grouping（g=>g.AutoExpandAll（false））
.列（列=>{
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.模板(@
客户地址：
@（Html.DevExtreme（）.DataGrid（））
.ColumnAutoWidth（真）
.ShowBorders（正确）
.列（列=>{
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）；
})
//.数据源（模型）？？我在这里做什么？
)
);
})
)
var=false；
函数contentReady（e）{
如果（！崩溃）{
崩溃=真；
e、 component.expandRow（[“EnviroCare”]）；
}
}
函数自定义OLTIP（pointsInfo）{
返回{text:parseInt（pointsInfo.originalValue）+“%”；
}

这将成功构建并运行。问题是没有显示从Address类引用的字段的数据。在上述实现中，网格的主部分和细节部分都应该使用相同的数据源（在本例中为“Model”->IEnumerable）

---

如何实现这一点？

主详细信息中的模型不是

所有者

而是

地址

请尝试以下操作：

.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>);
    })

.MasterDetail（md=>{
md.Enabled（true）；
md.模板(@
客户地址：
@（Html.DevExtreme（）.DataGrid（））
.ColumnAutoWidth（真）
.ShowBorders（正确）
.列（列=>{
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（新JS（“data.address”）；
)
);
})

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

其次，所有操作都应该是服务器端的。如果您需要

所有者的详细信息

，则需要为该porpuse执行一个API操作，然后让master detail调用该操作