.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,自己浅薄理解如有问题欢迎指出交流。

 

上一篇:体验一下nest.js利用缓存带来的方便


下一篇:Java设计模式-外观模式(Facade模式)