QQ空间留言例子

        最近弄了一个类似于QQ空间的留言问题，弄得我一个头两个大，一开始我弄了可以回复的功能，结果，顶部的那条内容可以回复，但是接下来的留言就不可以回复了，以为是自己后台的问题，结果一直在改后台，改了半天，居然是js的问题。

这个务必要记录下来，以后遇到这种问题就好办了！！！

 

C# MVC  View前台：

<script>

//点击回复按钮， 显示对应的回答框 id==对应的文章Id
function onReply(id) {
//隐藏所有的回复框
$(".reply_text").hide();
//隐藏所有的提交按钮
$(".reply_btn").hide();
//$(("#replytxt_" + id)) == $("#replytxt_20") 20就是传入的文章Id
//显示对应的回复框和提交按钮
$(("#replytxt_" + id)).css({"display":"block"});
$(("#replybtn_" + id)).css({ "display": "block" });
}
//点击提交按钮_id==对应的文章Id
function onReplysub(_id) {
//文章id
var id = _id;
//获取回复内容
var ans = $(("#replytxt_" + id)).val();
//去调用后台，执行操作
$.ajax({
type: "POST",
url: '/Default/AddReply',
cache: true,
async: false,
data: {
ID: id,
Answer: ans
},
success: function (data) {
alert("回复成功!");
//回复成功刷新页面
window.location.reload();
},
error: function () {
alert('回复失败！');
}
});
}

</script>

html/css

<ul>
<li>
<div class="reply">
<button type="button" onclick="onReply(@qa.Id)">回复</button>
</div>
</li>
<li class="reply_list">
<textarea style="width:300px; height:100px; border-radius:4px;display:none;" placeholder="回复 @qa.Quizzer ：" id="replytxt_@qa.Id" class="reply_text"></textarea>
</li>
<li>
<input type="text" id="quesid_@qa.Id" value="@qa.Id" hidden="hidden" />
</li>

<li>
<div class="reply-content">
<a href="javascript:;" id="replybtn_@qa.Id" onclick="onReplysub(@qa.Id)" style="display:none;" class="reply_btn">提交</a>
</div>
</li>
</ul>

 

Controller 控制器代码：

/// <summary>
/// 回复reply
/// </summary>
/// <param name="answer"></param>
[HttpPost]
public void AddReply(string answer,int Id)
{
QAndA qanda = db.QandAs.FirstOrDefault(q=>q.Id==Id);
qanda.Answer = answer;
qanda.AnswerTime = DateTime.Now;
db.SaveChanges();

}

 

或许你们有更好的方法建议的话，互相学习借鉴……