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

Posted 2023-03-27

【中文标题】如何在 asp.net core 中使用 ajax 创建评论列表？ [关闭]

【英文标题】：How To create a Comments list with ajax in asp.net core? [closed]

【发布时间】：2020-09-03 07:07:35

【问题描述】：

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

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

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

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

【参考方案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>

结果