Search code examples
c#asp.net-mvclinqwebgrid

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


Okay, so I have been wrapping my head against this one for a while now. I have the following Model structure:

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

I have my data structure as follows that is populated from a 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();

The above looks like:

enter image description here

Upon closer inspection of a particular entry, I have the following structure:

enter image description here

As you can see in the second image, I have a List called selectedmemberaddress whose count is 41 for a particular entry. This List looks like:

enter image description here

Finally I am displaying this structure in my View using a WebGrid like this:

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

As you can see that I am able to get the Key values from the structure. My question is that is there a way where I can show the associated selectedmemberaddress List values for each Key in the WebGrid. Maybe a click event would show this list but I am not sure on how to achieve that. I do not need to make any AJAX call since I already have the grouped data in my structure.

Any help would be greatly appreciated.

Thanks


Solution

  • The following article gives a very good insight and examples on Nested WebGrid in MVC: How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4