ASP.NET MVC 记一次评论功能粗略实现
后台代码:
获得被点击微博的评论及回复
public ActionResult GetAllComm()
{
int BCId = Convert.ToInt32(Session["CId"]);
using (GDCPSIMEntities dc = new GDCPSIMEntities())
{
dc.Configuration.LazyLoadingEnabled = false;
var list = from b in dc.BroadCast
join c in dc.Comment
on b.BCId equals c.BC_Id
join u in dc.Users
on c.Id equals u.UserId
join u2 in dc.Users
on c.To_Id equals u2.UserId
where b.BCId == BCId
orderby c.CommTime descending
select new
{
commer_pic = u.MyPic,
commer_name = u.UserNickname,
c.CommTime,
c.SayText,
c.SayPic,
c.Auto_Id,
c.Reply, //子查询
c.Id,
c.BC_Id
};
var res = list.ToList().Distinct();
return Success(res);
}
}
Comment 表和 Reply 表有主外键关联, 所以 select 可以获取到 c.Reply 。
前端代码:
获得被点击微博的评论及回复
<script>
function Id(id) {
return document.getElementById(id); //获取模块的ID
}
$(function () {
var url = "/Comment/GetAllComm";
$.post(url, null, function (data) {
if (data.Status == 1) {
console.log(data.Data); //在控制台查看后台传来的 Json 数据
var dataVal = Id("data");
var html = '';
for (var i in data.Data) { // 第一层循环 ,遍历当前微博的评论
var list = '';
for (var j = 0; j < data.Data[i].Reply.length; j++) { // 第二层 循环看,遍历评论的回复(评论里有多条回复)
// 遍历出来的回复列表######################################################
list += '<div class ="r">' +
'<div>' +
'<img class="ReplyerPic" src="/' + data.Data[i].Reply[j].ReplyerPic + '" alt="" />' +
'<p class="name" >' + data.Data[i].Reply[j].ReplyNickName + '</p>' +
'<p class="time">' + fmtDate2(data.Data[i].Reply[j].ReplyTime) + '</p>' +
'<p >' + '回复 @' + data.Data[i].Reply[j].BeReplyedNickname + ':' + data.Data[i].Reply[j].BeReplyedContent + '<p class="ReplyText">' + data.Data[i].Reply[j].ReplyText + '</p>' + '</p>' +
// 回复回复,表单
'<form action="/Comment/ReplyComm" method="post" enctype="multipart/form-data">' +
' <input type="hidden" name="ReplyNickName" value="@Session["UU"]" />' +
'<input type="hidden" name="ReplyTime" value="@System.DateTime.UtcNow" />' +
'<input name="ReplyText" />' +
'<input type="hidden" name="BeReplyNickname" value=" ' + data.Data[i].Reply[j].ReplyNickName + ' " />' +
' <input type="hidden" name="BeReplyedContent" value="' + data.Data[i].Reply[j].ReplyText + '" />' +
'<input type="hidden" name="TheCommId" value="' + data.Data[i].Auto_Id + '" />' +
'<button class="ReplyBtn" type="submit">回复</button>' +
'</form>' + '<br/>' + '<br/>' + '<br/>' +
'</div>' +
'</div>';
}
// 遍历出来的评论列表*************************************************************
html += '<div class="column is-half">' +
'<div class="media">' +
'<div class="media-content">' + '<img class="CommerPic" src="/' + data.Data[i].commer_pic + '" alt="" />' +
'<p class="name">' + data.Data[i].commer_name + '</p>' +
'<p class="time">' + fmtDate2(data.Data[i].CommTime) + '</p>' +
'<p class="help">' + data.Data[i].SayText + '</p>' +
'<img class="CommPic" src="/' + data.Data[i].SayPic + '" alt="" />' +
// 回复评论,表单
'<form action="/Comment/ReplyComm" method="post" enctype="multipart/form-data">' +
' <input type="hidden" name="ReplyNickName" value="@Session["UU"]" />' +
' <input type="hidden" name="BeReplyNickname" value="' + data.Data[i].commer_name + '" />' +
' <input type="hidden" name="BeReplyedContent" value="' + data.Data[i].SayText + ' " />' +
'<input type="hidden" name="ReplyTime" value="@System.DateTime.UtcNow" />' +
'<input name="ReplyText" />' +
'<input type="hidden" name="TheCommId" value="' + data.Data[i].Auto_Id + '" />' +
'<button class="ReplyBtn" type="submit">回复</button>' +
'</form>' +
'</div>' +
'</div>' + '<br/>' + '<br/>' + '<br/>' + list + //将内层渲染好的列表项模块添加到外层大模块中
'<br/>' + '<br/>' + '<br/>' + '</div>';
}
dataVal.innerHTML = html;
}
}, "JSON");
})
</script>
通过 console.log(data.Data) 可以看到后台从数据库查到的数据:
当前评论列表中,只有第一条评论是有回复的,第二第三条回复为空
在这里插入图片描述