朋友圈发表动态

在之前我写的一篇有关于评论与回复的博客中，有很多同学都看不懂功能是如何实现的，所以我打算再写一篇有关动态发布的文章，希望大家能够理解。

微信朋友圈相信大家都有用过，可以编写文字以及图片发布在一个公共区域中，其他好友可以对其进行点赞和评论。

发布动态时涉及到的字段有三个：发布人（ID）、文字内容、图片内容

后台接收到前台传递过来的三个参数

UserID是必需的，但是文本内容和图片不是必需

发布的动态中可以有文字+图片，也可以只有文字或者只有图片

//后台接收到前台传递过来的三个参数
//UserID是必需的，但是文本内容和图片不是必需
//发布的动态中可以有文字+图片，也可以只有文字或者只有图片
public ActionResult SaveTrends(string trendstext, string trendimg, int UserID)
        {
            try
            {
                B_Trends trends = new B_Trends();
				//判断是否有图片内容
                if (trendimg != null || trendimg != "")
                {
                    string oldPath = Server.MapPath("/Document/Trends/Temp/" + trendimg);
                    string newPath = Server.MapPath("/Document/Trends/Images/" + trendimg);
					//将临时文件夹中的动态图片移动到后台文件夹中
                    if (System.IO.File.Exists(oldPath))
                    {
                        System.IO.File.Move(oldPath, newPath);
                    }
					//将最终的图片储存路径保存到数据库
                    trends.TrendsImg = "/Document/Trends/Images/" + trendimg;
                }

				//将动态有关的信息添加到实体模型
                trends.TrendsCon = trendstext;//文本内容
                trends.UserID = UserID;//用户ID
                trends.TrendsDate = DateTime.Now;//发布时间
                myModels.B_Trends.Add(trends);
                myModels.SaveChanges();//保存到数据库
                return Json(true, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                return Json(null, JsonRequestBehavior.AllowGet);
            }

        }

发布成功后会回到动态首页

有关动态查询并显示的问题，该页面其实只有一个框架，里面的动态内容是通过后台查询，然后使用append()和perpend()方法一条一条的追加上去的

（其实这个一个很low的方法，但是我又懒又蠢找不到更好的，就先将就着用用）

function findtrends(){
	$.ajax({
		type:"get",
		url:url+"/Trends/Trends/SelectTrendsList",
		datatype:'json',
		data:{
			'TrendsID':0
		},
		success:function(data){
			//console.log(data);
			//后台查询到数据后，先将显示动态的框架清空
			$("#content").empty();
			//通过循环依次将动态追加到页面上
			for(var i=0;i<data.length;i++){
				//console.log(data[i]);
				$("#content").prepend('<div class="trendscon" id="trendscon'+ i +'">'
				//添加发布者信息（发布者名称、头像、发布时间）
				+'<div class="trendsheader">'
					+'<span class="userico"><img src="image/admin.png" /></span> <span class="username">'+ data[i].username +'</span>'
					+'<span class="trendsdate">'+ data[i].trendsDate +'</span>'
					+'<i class="glyphicon glyphicon-trash hide" οnclick="deletetre('+ data[i].TrendsID +')"></i>'
				+'</div><div οnclick="toDetail('+ data[i].TrendsID +')">'
				//添加动态主体内容
				+'<div class="trendsbody">'
				+'<span class="trendstext">'+ data[i].TrendsCon +'</span>'
				+'</div><div class="trendsfooter">'
				+'</div></div></div>');
				//如果发布者与当前登录用户相同，则显示删除图标
				if(data[i].UserID==UserID){
					$("#trendscon"+ i +" i").removeClass("hide");
				}
				//如果动态有图片内容，则添加并显示图片
				if((data[i].TrendsImg)!=null){
					$("#trendscon"+ i +" .trendsbody").append('<img class="trendsimg" data-preview-src="" data-preview-group="'+i+'" src="'+url+ data[i].TrendsImg+ '" />');
				}
				//如果用户有头像，则替换默认头像
				if((data[i].UserImg)!=null){
					$("#trendscon"+ i +" .userico img").attr('src',url+data[i].UserImg);
				}

到这里我们就将动态的内容全部显示完成了，接下来就是添加该动态的有关评论

该查询涉及到两个参数，一个是该条动态的ID，另一个就是评论的ID，因为我们只显示第一层的评论，所有这个参数可以不要（写个0是为了敷衍后台），

而第二层的评论（也可以称为回复）就需要该参数。

如果要用用一句话来简单概况动态、评论及回复之间的关系的话，“评论是对动态的评论，回复是对评论的评论”。

（完了我自己都绕不出来了）

				$.ajax({
					type:"get",
					url:url+"Trends/Trends/SelectCommentList",
					datatype:'json',
					data:{
						//该查询涉及到两个参数，一个是该条动态的ID，另一个就是评论的ID，因为我们只显示第一层的评论，所有这个参数可以不要（写个0是为了敷衍后台），
						//而第二层的评论（也可以称为回复）就需要该参数。
						//如果要用用一句话来简单概况动态、评论及回复之间的关系的话，“评论是对动态的评论，回复是对评论的评论”。（完了我自己都绕不出来了）
						'TrendsID':data[i].TrendsID,
						'CommentID':0
					},
					success:function(msg){
						//设想一下，如果评论有很多条，那么我们总不能将它们全部一次性显示出来，所以要限制显示上限。
						var length = msg.length;//评论的总数
						var count = parseInt(msg.length-2);//用来计数，我设置最多显示2条，所以还有length-2条评论未显示
						if(length>0){
							$("#trendscon"+ i +" .trendsfooter").append('<div class="commentbox"></div><div class="otherrep"></div>');
							if(msg.length>2){
								$("#trendscon"+ i +" .otherrep").append(
									'<div class="remain">其他'+ count +'条相关评论</div>');
								length=2;
							}
							for(var j=0;j<length;j++){
								$("#trendscon"+ i +" .trendsfooter .commentbox").append('<div class="comment">'
								+'<span class="commentuser">'+ msg[j].U1Name +'</span>：'
								+'<span>'+ msg[j].CommentText +'</span>'
								+'</div>');
							}
							
						}
					}
				});
			}
		}
	});
}