如何在 asp.net 核心中创建带有 ajax 的评论列表？

Question

我想制作一个评论列表，我想在页面加载时显示例如 5 条评论。就像一个下拉列表中有 5 个项目（评论）并且有一个名为 Load More 的按钮我想要类似的东西当用户点击 Load More 按钮时它发送一个页面 AJAX 请求和服务器响应它。

我不知道 JavaScript 编程，所以我需要一个示例（前端和后端）。

我是编程新手，如果有人做过这件事或知道怎么做，请发送示例。

（我正在使用 Razor 页面 Web 应用程序）

Answer 1

这是一个简单的工作演示，您可以参考：

型号

public class Comment
{
    public int Id { get; set; }
    public string Content { get; set; }
    public DateTime CreateTime { get; set; }
}

评论列表页面模型

public class CommentListModel : PageModel
{
    private readonly SampleContext _context;

    public CommentListModel(SampleContext context)
    {
        _context = context;
    }
    [BindProperty]
    public List<Comment> Comments { get; set; }
    public void OnGet()
    {
        Comments = _context.Comment.OrderByDescending(c => c.CreateTime).Take(5).ToList();
    }

    public async Task<IActionResult> OnGetAllCommentAsync()
    {
        Comments = _context.Comment.OrderByDescending(c => c.CreateTime).ToList();
        return Partial("_CommentPartial", Comments);
    }
}

CommentList 页面，加载页面时显示 5 条评论并使用 ajax 调用 AllComment 方法到 return 显示所有评论数据的部分视图

@page
@model RazorPages3_1.CommentListModel

<div id="commentlist">
<table class="table table-striped">
    @foreach (var comment in Model.Comments)
    {
        <tr>
            <td>@comment.Content</td>
            <td>@comment.CreateTime</td>
        </tr>
    }
    <tr>
        <a href="javascript:void(0)" id="clicklink">Load more</a>
    </tr>
</table>
</div>

@section Scripts
{
 <script>
  $("#clicklink").click(function () {
    $.ajax({
        type: "get",
        url: "/CommentList?handler=AllComment",
        success: function (response) {
            $("#commentlist").html(response);
        }
    });
  });
 </script>
}

_评论部分观点

@model List<RazorPages3_1.Models.Comment>
<table class="table table-striped">
  @foreach (var comment in Model)
  {
   <tr>
    <td>@comment.Content</td>
    <td>@comment.CreateTime</td>
   </tr>
  }
</table>

结果

如何在 asp.net 核心中创建带有 ajax 的评论列表？

How To create a Comments list with ajax in asp.net core?

javascript

c#

ajax

asp.net-core

razor-pages