Implementation of an @mention (tagging friends) using ASP.NET MVC

I'm wondering if there is any article on how to implement a tagging system (like Facebook's @mention) using ASP.NET MVC and jquery. Basically I think I'need to parse the string that follows the @ character (while posting, this will send an email notification, while reading, this will link the user). And I'd probably need some sort of an auto-complete jquery plugin.

If someone has already gone through the process, I'开发者_运维百科d appreciate a few tips!

Thanks.

*.ascx file:

/*
<div id="tf_contentbox" contenteditable="true" onclick="SetFocus()">
</div>
<div id="tf_display">
</div>
<div id="tf_msgbox">
</div>
*/

css styles:

/* Styles for taggig friends
----------------------------------------------------------*/

#tf_contentbox
{
    width: 458px;
    height: 50px;
    border: solid 2px #cdcdcd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-bottom: 6px;
    text-align: left;
}

.tf_img
{
    float: left;
    width: 150px;
    margin-right: 10px;
    text-align: center;
}
#tf_msgbox
{
    border: solid 1px #dedede;
    padding: 5px;
    display: none;
    background-color: #f2f2f2;
}
.tf_red
{
    color: #cc0000;
    font-weight: bold;
}
a
{
    text-decoration: none;
}
a:hover
{
    text-decoration: none;
}
#tf_display
{
    display: none;
    border-left: solid 1px #dedede;
    border-right: solid 1px #dedede;
    border-bottom: solid 1px #dedede;
    overflow: hidden;
}
.tf_display_box
{
    padding: 4px;
    border-top: solid 1px #dedede;
    font-size: 12px;
    height: 30px;
}

.tf_display_box:hover
{
    background: #3b5998;
    color: #FFFFFF;
}
.tf_display_box a
{
    color: #333;
}
.tf_display_box a:hover
{
    color: #fff;
}
#tf_container
{
    margin: 50px;
    padding: 10px;
    width: 460px;
}
.tf_image
{
    width: 25px;
    float: left;
    margin-right: 6px;
}

Also you should use some js-functions:

var start = /@/ig;
var word = /@(\w+)/ig;

$("#tf_contentbox").live("keyup", function () {
    var content = $(this).text();//$("#tf_contentbox").val();
    var go = content.match(start);
    var name = content.match(word);
    var dataString = 'searchword=' + name;

    if (go != null && go.length > 0) {
        $("#tf_msgbox").slideDown('show');
        $("#tf_display").slideUp('show');
        $("#tf_msgbox").html("Type the name of your friend...");
        if (name != null && name.length > 0) {
            $.ajax({
                type: "POST",
                url: "<% = Url.Action("FindFriendsForTagging", "Home") %>",
                // Home - controller, FindFriendsForTagging - action. See below.
                data: "friendNamePart=" + name,
                // friendNamePart - parametr of FindFriendsForTagging
                cache: false,
                success: function (html) {
                    $("#tf_msgbox").hide();
                    $("#tf_display").html(html).show();
                }
            });

        }
    }
    return false;
});

$(".addname").live("click", function () {
    var username = $(this).attr('title');
    var userId = $(this).attr('value');
    var old = $("#tf_contentbox").html();
    var content = old.replace(word, "");
    $("#tf_contentbox").html(content);
    var E = "<a class='tf_red' contenteditable='false' href='" + userId + "'>" + username + "</a>";        
    $("#tf_contentbox").append(E);
    $("#tf_display").hide();
    $("#tf_msgbox").hide();
    $("#tf_contentbox").focus();
});

Controller's method:

public string FindFriendsForTagging(string friendNamePart)
{
    friendNamePart = friendNamePart.Remove(0, 1);
    // Descrption of class FriendManager see below.
    IQueryable<User> model = new FriendManager().GetFriendsByDisplayName(friendNamePart).Take(10);
    StringBuilder sb = new StringBuilder();

    foreach (var user in model)
    {
        sb.Append("<div class=\"tf_display_box\" align=\"left\">");
        sb.AppendFormat("<a href=\"#\" class=\"addname\" title=\"{0}\" value=\"{1}\">", user.DisplayName, user.UserId.ToString());
        sb.Append(user.DisplayName.ToLower().Replace(friendNamePart.ToLower(), string.Format("<b>{0}</b>", friendNamePart.ToLower())));
        sb.Append("</a><br>");
        sb.Append("<span style=\"font-size:9px; color:#999999\">");
        sb.Append(HtmlHelperExtensions.ShowTypeName(user.UserType.ToString()));
        sb.Append("</span>");
        sb.Append("</div>");
    }

    return sb.ToString();
}

Code of class FriendManager:

sealed public class FriendManager
{
    private UsersDataContext dbContext = new UsersDataContext();

    public IQueryable<User> GetFriendsByDisplayName(string namePart)
    {
        // assumes the existence of the class UsersDataContext (dbml file)
        IQueryable<User> result =
            this.dbContext.Users.Where(u => u.DisplayName.ToLower().Contains(namePart.ToLower()));

        return result;
    }
}