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

Question

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

Controller :

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

};

所以这在 View 中返回: 阿曼达
鲍勃
坦率 凯特 蒂姆

我想在 View 中显示这个:

A(标题)

阿曼达

B(标题)

鲍勃

F(标题)

弗兰克

K(标题)

凯特

T(标题)

蒂姆

主要是为了供查看者查看的视觉引用 - 它将显示存在的用户的字母标题，因此如果没有名称以 S 开头的用户，则不会有 S 标题。任何关于我可以在哪里查看或我可以阅读的内容的帮助都会很棒。

Answer 1

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

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