Sueetie Member Profile Following and Friends display is online at http://sueetie.org. For members, click on "Welcome, [Your Name]!" for a look. As a reminder, you can tag members to follow in Sueetie blogs and forums (BlogEngine.NET and YetAnotherForum.NET) and in the future in Sueetie wikis and media galleries. You can also follow members on their NEW Public Member Profile page. More on that in a bit.
Here are some Sueetie Guys I'm currently following displayed on my Member Account Page. I can also view those following me and any community friends, or those I'm following who are also following me. Clicking on any member avatar takes me to their NEW Public Member Profile page.
I continued my quest to get a handle on JQuery by using it to build this feature. The basic logic is populating the "FollowArea" DIV tag with the results of a WCF method. The method returned three values so I used a List<Triplet> to simplify the client-side HTML. Here's that method.
[OperationContract]
public List<Triplet> GetFollowList(int userid, int followTypeID)
{
// 0 - following, 1 - followers, 2 - friends
List<Triplet> followList = new List<Triplet>();
if (userid == -2)
userid = SueetieContext.Current.User.UserID;
var q = from c in SueetieUsers.GetSueetieFollowList(userid, followTypeID)
select new Triplet(c.UserID, c.DisplayName, c.ThumbnailFilename);
followList.AddRange(q.ToList());
return followList;
}
The JQuery code that generates the avatar list uses the standard Triplet identifiers of First, Second and Third.
function pageLoad() {
(function($) {
$.fn.emptyFollowList = function() {
return this.empty();
}
$.fn.loadFollowList = function(inputDataArray) {
this.emptyFollowList();
var input = new Sys.StringBuilder("");
$.each(inputDataArray, function(index, inputData) {
input.append("<div class='followThumb'><a href='profile.aspx?u=" +
inputData.First + "'><img src='/images/avatars/" +
inputData.Third + "'></a><br /><a href='profile.aspx?u=" +
inputData.First + "'>" + inputData.Second + "</a></div>");
});
this.html(input.toString());
return this;
}
populateFollows('-2', '0');
})(jQuery);
}
There's a bit more JQuery code to finish it off, but that's the gist of it. All client-side all the time is our motto.
To Sueetie community members, please check out your Account Page Following and Friends function. For you non-member hold-outs, you can view Following and Friends on the NEW Public Member Profile pages. Here's mine.