如何在 asp.net core 中使用 ajax 创建评论列表？ [关闭]答案

【问题标题】：How To create a Comments list with ajax in asp.net core? [closed]如何在 asp.net core 中使用 ajax 创建评论列表？ [关闭]
【发布时间】：2020-09-03 07:07:35
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript c# ajax asp.net-core razor-pages

【解决方案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个cmets，使用ajax调用AllComment方法返回Partial视图，显示所有评论数据

@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>
}

_Comment部分视图

@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>

结果

【讨论】：