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:
Upon closer inspection of a particular entry, I have the following structure:
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:
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
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