使用 MVC 实现@mention(标记朋友 ASP.NET

本文关键字：朋友 ASP NET MVC 实现 @mention 使用 | 更新日期: 2023-09-27 17:56:05

我想知道是否有任何关于如何使用MVC和jquery实现标记系统（如Facebook的@mention）的文章 ASP.NET。 基本上我认为我需要解析@字符后面的字符串（在发布时，这将发送电子邮件通知，在阅读时，这将链接用户）。我可能需要某种自动完成的jquery插件。

如果有人已经完成了这个过程，我将不胜感激一些提示！

谢谢。

使用 MVC 实现@mention(标记朋友 ASP.NET

*.ascx 文件：

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

CSS 样式：

/* 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;
}

此外，您应该使用一些js函数：

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

控制器的方法：

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

类朋友经理的代码：

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;
    }
}
相关文章：