c# - 将有序结果组织为带标签的部分

我正在尝试将返回的结果正确地放入带标签的部分-我的意思的例子。

控制器：

public IEnumerable<Users> GetUserList(int? id, int? pageNumber)
        {
            if (!id.HasValue)
                throw new HttpResponseException(HttpStatusCode.NotFound);

            int _pageNum = pageNumber.HasValue ? pageNumber.Value : 1;
            return new UserService().GetUsers(id.Value, pageNumber: _pageNum);
        }

视图：

<div id="listView"  data-bind="template: { name: 'list', foreach: Users }">
            <section id="Images">
                <section id="users"></section>
            </section>
        </div>

Knockout.js / jquery：已更新

  var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// The ViewModel for the page
var viewModel = {
    Users: ko.observableArray([]),
    users: ko.observableArray([]),
    groups: ko.computed({
        read: function(){
            var groups = [];
            var groupLetter;
            for(var i = 0; i <letters.length; i++){
                viewModel.Users.groups[letters[i]].users([]);
            }
            ko.utils.arrayForEach(viewModel.users(), function (user) {
                groupLetter = user.name()[0].toUpperCase();
                if (groups.indexOf(groupLetter) < 0) {
                    groups.push(groupLetter);
                }
                groups[groupLetter].users.push(user);
            });
            return groups.sort();
        },
        deferEvaluation: true
    }),

};
for (var i = 0; i < letters.length; i++) {
    viewModel.users.groups[letters[i]] = { users: ko.observableArray([]) };
}

//页面的ViewModel

var viewModel = {
    Users: ko.observableArray([]), //already a sorted list of users
    TotalRoster: null,
    CurrentPage: ko.observable(1),
    DataIsLoading: ko.observable(false),

};

因此，这在视图中返回：
阿曼达
鲍勃
坦率
凯特
提姆

我想在视图中显示此内容：

A（标题）

阿曼达

B（标题）

鲍勃

F（标题）

坦率

K（标题）

凯特

T（标题）

提姆

主要是供视觉参考，供观看者查看-它会为存在的用户显示字母标头，因此，如果没有名称以S开头的用户，则不会有S标头。关于我可以研究的地方或我可以称之为的任何帮助都将是很棒的。

最佳答案

您可以在客户端按用户名称对用户进行分组，如下所示：

// assuming the array is sorted
var users = ['Amanda', 'Anna', 'Bob', 'Frank', 'Francois', 'Sam'];

var lastGroup = null;
var vm = {
    groups: []
};

ko.utils.arrayForEach(users, function (user) {
    // known group
    if (lastGroup && lastGroup.name == user[0]) {
        lastGroup.users.push(user);
    } else {
        // unknown group
        lastGroup = {
            name :user[0], users : [user]
        };
        vm.groups.push(lastGroup);
    }
});



<div data-bind="foreach:groups">
    <span data-bind="text:name" style="font-weight: bold"></span>
    <br/>
    <div data-bind="foreach:users">
        <span data-bind="text:$data"></span>
        <br/>
    </div>
</div>

See fiddle