Question

我正在寻找使用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>
            .
            .
            .

因为你可以看到它的联系人列表将格式化为一个不错的电话簿。我目前有一个iqueryable按字母顺序保存所有信息。老实说，我不确定如何使用razor构建上面的html。我想在linq中使用组函数，并提出了以下linq表达式：

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

但我遇到了方法的返回类型（匿名类型）的一些问题，我不知道如何处理。我现在正在使用以下内容：

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

我是asp.net MVC世界的新手，非常感谢任何帮助。

Answer 1

您可以为查询声明自定义返回类型，并将其用作视图模型。

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

在.cshtml使用

中

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

将vm输出分组到视图

1 个答案: