如何在 Asp .net 核心网站（如博客）中制作喜欢/不喜欢按钮？

Posted 2023-03-31

【中文标题】如何在 Asp .net 核心网站（如博客）中制作喜欢/不喜欢按钮？

【英文标题】：How can I make a Like/Dislike button in an Asp .net core web site like a blog?

【发布时间】：2021-08-02 08:49:42

【问题描述】：

我是使用 .net core mvc 进行 Web 开发的新手，我正在构建一个与 Wordpress 非常相似的 Web 应用程序。

基本上，我正在构建一个网站，管理员将在其中发布文章，用户将在那里阅读这些文章。 我现在必须制作一个“喜欢”按钮和一个“不喜欢”按钮，让读者发表意见。目前该过程非常简单，我在数据库中创建了一个 Article 表，并在其中添加了两列：NumberOfLikes 和 NumberOfDislikes。 然后我在文章页面上添加了两个按钮。我现在想要的就像我说的那样，以确保当我们点击喜欢按钮时，它会为 NumberOfLikes 添加 +1，反之，当我们点击不喜欢按钮时，它会添加 +1 NumbreOfDislikes。

我似乎无法弄清楚如何使用此功能，这就是我向您寻求帮助的原因。 提前致谢。

编辑

这是Article Model class 类：

public class Article
    public long Id get; set; 
    public long NumberOfLikes get; set; 
    public long NumberOfDisLikes get; set; 

这是ArticleController.cs 中的Index 操作

        public async Task<IActionResult> Index(long id)
        
            Article article = await _context.Articles
                                            .Where(a => a.Id == id)
                                            .FirstOrDefaultAsync();
            if (article == null)
            
                return NotFound();
            
            ArticleViewModel model = new ArticleViewModel();
            model.Article = article;

            await GetDataForLayout(_context);
            await _context.SaveChangesAsync();

            return View(model);
        

在/Article/Index.cshtml 视图中，我们有两个这样的按钮：

    <div>
        <button class="btn btn-success like-article">
            <i class="fas fa-thumbs-up"></i>
            <span>Like &nbsp; @article.NumberOfLikes</span>
        </button>
        <button class="btn btn-danger dislike-article">
            <i class="fas fa-thumbs-down"></i>
            <span>DisLike &nbsp; @article.NumberOfDisLikes</span>
        </button>
    </div>

我不知道输入@article.NumberOfLikes 是否可以让我看到更新后的值，但这是我想要的值。 所以我想点击这些按钮并更新文章的NumberOfLikes/NumberOfDislikes 的值而不更改页面或刷新它并使读者可以看到更改。

【参考方案1】：

您可以使用替换按钮，尝试传递id和喜欢或不喜欢的动作，然后更新文章。这是一个带有efcore的演示：

文章：

public class Article
    
        public int Id  get; set; 
        public int NumberOfLikes  get; set; 
        public int NumberOfDislikes  get; set; 

    

动作：

public async Task<IActionResult> Index()
        

            return View(_context.Article.ToList());

        
        public async Task<List<Article>> Edit(int id, bool like)
    
        var article = await _context.Article.FindAsync(id);
        if (like)
        
            article.NumberOfLikes++;
        
        else 
            article.NumberOfDislikes++;
        
        _context.Update(article);
        await _context.SaveChangesAsync();
        return _context.Article.ToList();

    

Index.cshtml：

    @model IEnumerable<WebApplication_efcore.Models.Article>
    <<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NumberOfLikes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NumberOfDislikes)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tbody1">
        @foreach (var item in Model)
        
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NumberOfLikes)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NumberOfDislikes)
            </td>
            <td>
                <button onclick="Edit(@item.Id,true)">Like</button>
                <button onclick="Edit(@item.Id,false)">Dislike</button>
            </td>
        </tr>
        
    </tbody>
</table>
<script>
    function Edit(id,like)
    
       $.ajax(
                type: "POST",
                data:  id: id, like: like ,
                url: 'Edit',
       ).done(function (result) 
                var html=""
                for (var i = 0; i < result.length; i++)
                
                    html += '<tr><td>' + result[i].id + '</td><td>' + result[i].numberOfLikes + '</td><td>' + result[i].numberOfDislikes + '</td><td><button onclick="Edit(' + result[i].id + ',true)">Like</button><button onclick="Edit(' + result[i].id +',false)">Dislike</button></td></tr>'
           
           document.getElementById("tbody1").innerHTML = html;
            );
    
</script>

结果：

【讨论】：

感谢@Yiyi 的回答。这是一个好主意，但它并没有完全符合我的要求。我会进行编辑，你应该明白。实际上我想在不刷新页面的情况下增加值。

你的意思是不想在视图中刷新更新的值，只想在db中更新？

我想在视图和数据库中刷新这些值，但不更改页面或刷新它。

如果要更改视图中的值，我们通常会刷新视图。因为更改html代码会更复杂。

我读到使用 AJAX 我们可以在不重新加载整个页面的情况下更改 DOM。但我不知道它是如何工作的。