grouped vm output to a view - asp.net-mvc-3

Question

I'm looking for the best/simplest way to output the following using Razor (ASP.Net MVC 4)
<ul id="contacts">
<li data-group="a">
<a class="title">A</a>
<ul>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p4.jpg"></span> Adam Woodward
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p5.jpg"></span> Aileen Espinoza
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p6.jpg"></span> Aimee Foley
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
</ul>
</li>
<li data-group="b">
<a class="title">B</a>
<ul>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p1.jpg"></span> Baker Terry
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
</ul>
</li>
<li data-group="c">
<a class="title">C</a>
<ul>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p1.jpg"></span> Cadman Mosley
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="~/backendContent/sample/p2.jpg"></span> Cailin Jones
<span style="font-size: 11px; display: block;" class="muted">Creative Director</span>
</a>
</li>
</ul>
</li>
.
.
.
as you can see its a contact list that will be formatted to a nice phonebook. I currently have a iqueryable that holds all the information in alphabetical order. I honestly was not sure on how to use razor to structure the above html. I thought about using a group function in linq and came up with the following linq expression:
var _customers = (from c in _db.UserProfiles.Include("ParentCompanies").Include("cProfile")
where (c.ParentCompanies.Any(pc => pc.CompanyUsers.Any(cu => cu.UserName == userName)) && c.cProfile != null)
group c by c.FirstName.Substring(0, 1) into customerGroup
select new { FirstLetter = customerGroup.Key, Information = customerGroup }).OrderBy(letter=>letter.FirstLetter);
but I came across some problems with the return type of the method (anonymous type) and I was not sure how to deal with that. I am now using the following:
var _customers = (from c in _db.UserProfiles.Include("ParentCompanies").Include("cProfile")
where (c.ParentCompanies.Any(pc => pc.CompanyUsers.Any(cu => cu.UserName == userName)) && c.cProfile != null)
select c).OrderBy(f=>f.FirstName);
I am very new to the asp.net MVC world and any help would be greatly appreciated.

Answer 1

You can declare a custom return type for your query and use that as your view model.
public class GroupedCustomersViewModel
{
string FirstLetter { get; set; }
IEnumerable<UserProfile> Information { get; set; }
}
....
var _customers =
(from c in _db.UserProfiles.Include("ParentCompanies").Include("cProfile")
where (c.ParentCompanies.Any(pc => pc.CompanyUsers.Any(cu => cu.UserName == userName)) && c.cProfile != null)
group c by c.FirstName.Substring(0, 1).ToUpper() into customerGroup
select new GroupedCustomersViewModel
{
FirstLetter = customerGroup.Key,
Information = customerGroup
})
.OrderBy(letter=>letter.FirstLetter);
In your .cshtml use
#model IEnumerable<MyProject.Namespace.Models.GroupedCustomersViewModel>
...
<ul id="contacts">
#foreach(var group in Model)
{
<li data-group="#group.FirstLetter.ToLower()">
<a class="title">#group.FirstLetter</a>
<ul>
#foreach(var user in group.Information)
{
<li>
<a href="#">
<span class="thumbnail">
<img alt="" src="#user.Thumbnail"></span> #user.Name
<span style="font-size: 11px; display: block;" class="muted">#user.Title</span>
</a>
</li>
}
</ul>
</li>
}
</ul>