.NET MVC使用AJAX实现论坛局部刷新只看楼主
业务需求是要做一个论坛的只看楼主功能。
逻辑很简单，前台传参到后台获取评论的list然后遍历显示即可。
搜寻资料我尝试了两种方式：
1、从后台获取json然后在前台拼接html调用append()之类显示
2、从后台获取PartialView在前台指定位置显示
第一种方式成功了一半，能获取到正确的json但是无法在前台的回调里给@里的变量赋值（才知道前台不能给后台变量赋值，涉及到生命周期），只能拼接html显示，这样对于简单的html还好，比如
model：
using System; using System.Collections.Generic; using System.Linq; using System.Web; public class Reply { public int reply_id { get; set; } public int post_id { get; set; } public int user_id { get; set; } public string reply_time { get; set; } public string reply_context { get; set; } public string avater { get; set; } public string user_name { get; set; } public int user_point { get; set; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; public class Post { public int post_id { get; set; } public string post_titile { get; set; } public string post_img { get; set; } public int user_id { get; set; } public string user_name { get; set; } public int section_id { get; set; } public string plate_name { get; set; } public string post_context { get; set; } public string goods { get; set; } public string state { get; set; } public string create_time { get; set; } public string update_time { get; set; } public int num { get; set; } }
view：
@using Newtonsoft.Json; //插件可以nuget下载,序列化用的
@{ ViewBag.Title = "PostDetail"; Post nowPost = (Post)ViewData["nowPost"];//这是后端存的当前帖子的对象
}
"button" value="只看楼主" id="ajaxFloor" name="ajaxFloor" />
"Jfloorlist">
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#ajaxFloor").click(function () { $.ajax({ type: "POST", url: "/Reply/ReadLandlord", data: "user_id=@nowPost.user_id&post_id=@nowPost.post_id", dataType: "json", success: function (response) { //console.log(response); var replyList = JSON.parse(response); //console.log(replyList); var landlordReply = ""; for (var i = 0; i < replyList.length ; i++) { landlordReply += "" + " " } $("#Jfloorlist").html(landlordReply); } }); }); }); </script>" + replyList[i].user_name + " " + "" + replyList[i].reply_time + " " + "" + replyList[i].reply_context + " " + "
controller：
using Newtonsoft.Json; //先引入包
//拿到楼主评论json配合ajax [HttpPost] public JsonResult ReadLandlord(int user_id, int post_id) { ListreplyList = replyService.getReplyListByUID(user_id, post_id); string result = JsonConvert.SerializeObject(replyList); return Json(result); }
第二种方法达到了预期。
model：如上
view：
@{
ViewBag.Title = "PostDetail";
Post nowPost = (Post)ViewData["nowPost"]; //这是后端存的当前帖子的对象
}
"button" value="只看楼主" id="ajaxFloor" name="ajaxFloor" />
"Jfloorlist">
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#ajaxFloor").click(function () { $('#Jfloorlist').load("@Url.Action("ReadLandlord", "Reply")?user_id=@nowPost.user_id&post_id=@nowPost.post_id") }); }); </script>
controller:
// 只看楼主评论 public ActionResult ReadLandlord(int user_id, int post_id) { if (Request.IsAjaxRequest()) { return PartialView(replyService.getReplyListByUID(user_id, post_id)); } return View(replyService.getReplyListByUID(user_id, post_id)); }
楼主也是刚开始学.net mvc和ajax，自己浅薄理解如有问题欢迎指出交流。