首页 > 技术文章 > QQ空间留言例子

mechelle-olivia 2017-09-14 09:47 原文

        最近弄了一个类似于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();

}

 

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

推荐阅读