业务需求是要做一个论坛的只看楼主功能。
逻辑很简单,前台传参到后台获取评论的list然后遍历显示即可。
搜寻资料我尝试了两种方式:
1、从后台获取json然后在前台拼接html调用append()之类显示
2、从后台获取PartialView在前台指定位置显示
第一种方式成功了一半,能获取到正确的json但是无法在前台的回调里给@里的变量赋值(才知道前台不能给后台变量赋值,涉及到生命周期),只能拼接html显示,这样对于简单的html还好,比如<li>之类的,但是有复杂样式的div就很难。
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"];//这是后端存的当前帖子的对象
}
<input type="button" value="只看楼主" id="ajaxFloor" name="ajaxFloor" />
<div id="Jfloorlist"></div>
<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 += "<tr>" + "<td>" + replyList[i].user_name + "</td>" + "<td>" + replyList[i].reply_time + "</td>" + "<td>" + replyList[i].reply_context + "</td>" + "</tr>" } $("#Jfloorlist").html(landlordReply); } }); }); }); </script>
controller:
using Newtonsoft.Json; //先引入包
//拿到楼主评论json配合ajax [HttpPost] public JsonResult ReadLandlord(int user_id, int post_id) { List<Reply> replyList = replyService.getReplyListByUID(user_id, post_id); string result = JsonConvert.SerializeObject(replyList); return Json(result); }
第二种方法达到了预期。
model:如上
view:
@{ ViewBag.Title = "PostDetail"; Post nowPost = (Post)ViewData["nowPost"]; //这是后端存的当前帖子的对象 }
<input type="button" value="只看楼主" id="ajaxFloor" name="ajaxFloor" />
<div id="Jfloorlist"></div>
<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,自己浅薄理解如有问题欢迎指出交流。