.NET MVC使用AJAX实现论坛局部刷新只看楼主

业务需求是要做一个论坛的只看楼主功能。

逻辑很简单，前台传参到后台获取评论的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，自己浅薄理解如有问题欢迎指出交流。