如何在不点击控制器方法的情况下基于点击在 webgrid 列中显示 C# 列表

Question

好吧，我已经为这个问题苦苦思索了一段时间。我有以下 Model 结构：

public class MemberAddressBook
{
    [Key]
    public long MemberID { get; set; }

    [Required]
    public string EmailAddress { get; set; }

    [Required]
    [Display(Name = "Title")]
    [MaxLength(30, ErrorMessage = "Title cannot be longer than 30 characters.")]
    public string Title { get; set; }

    [Required]
    [Display(Name = "Message")]
    public string EmailMessage { get; set; } 

    [Required]
    [Display(Name = "Selected Union Member")]
    public IEnumerable<string> selectedMemberID { get; set; }

    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string MemberCardNumber { get; set; }
    public IEnumerable<MemberAddressBook> selectedMemberAddress { get; set; }
}

public class GroupMessageBookList: MemberAddressBook
{
    public string Description { get; set; }
    public long? MembershipTypeID { get; set; }
    public List<GroupMessageBookList> selectedGroupsOnly { get;set; }
}

我的数据结构如下，是从 Web API:

填充的

    groupaddressbook.selectedGroupsOnly = listgroupaddressbook
        .GroupBy(x => new { x.Description, x.MembershipTypeID })
        .Select(gcs => new GroupMessageBookList()
        {
            Description = gcs.Key.Description,
            MembershipTypeID = gcs.Key.MembershipTypeID,
            selectedMemberAddress = gcs.ToList()
            }).ToList();

上面看起来像：

仔细检查特定条目后，我有以下结构：

正如您在第二张图片中看到的，我有一个名为 selectedmemberaddress 的 List，其特定条目的计数为 41。这个 List 看起来像：

最后，我在 View 中使用 WebGrid 显示此结构，如下所示：

<div style="overflow: auto!important; height:300px" class="transactionGrid">
    @{
        var grid = new WebGrid(source: Model.selectedGroupsOnly, canPage: false, canSort: true);
        @grid.GetHtml(
            tableStyle: "webGrid",
            htmlAttributes: new { id = "SelectAllWebGrid" },
            headerStyle: "grid-header",
            rowStyle: "gridRow",
            mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: " < Previous",
            nextText: "Next >",
            lastText: "Last >>",
            caption: "Group Details",
            columns: grid.Columns(
            grid.Column(
            format: @<text>
                    <input type="checkbox" value="@item.MembershipTypeID" name="childChkbox" id="checkAll" />
            </text>,
            header: "{checkall}"
            ),
            //grid.Column("Group Name/See Details", format: @<text>@Html.ActionLink((string)item.Description, "GetMemberDetailsOnGroups", "AddressBook", new { groupid = item.MembershipTypeID }, null)</text>, style: "titleColumn")
            grid.Column("Description", "Group Name")
            ))
    }
</div>

如您所见，我能够从结构中获取 Key 值。我的问题是，有没有一种方法可以显示 WebGrid 中每个 Key 的关联 selectedmemberaddress List 值。也许单击事件会显示此列表，但我不确定如何实现。我不需要进行任何 AJAX 调用，因为我的结构中已经有了分组数据。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

以下文章对 MVC 中的嵌套 WebGrid 提供了很好的见解和示例： How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4

如何在不点击控制器方法的情况下基于点击在 webgrid 列中显示 C# 列表

How to display a C# List inside a webgrid column based on click without hitting Controller method

c#

linq

asp.net-mvc

webgrid