如何在 Asp .net 核心网站中制作一个 Like/Dislike 按钮，如博客？

Question

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

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

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

编辑

这是Article Model class 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 的值而不更改页面或刷新它并使 reader.

可见更改

Answer 1

你可以用来替换按钮，尝试传递 id 和喜欢或不喜欢的动作，然后更新 article.Here 是一个带有 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>

结果：

如何在 Asp .net 核心网站中制作一个 Like/Dislike 按钮，如博客？

How can I make a Like/Dislike button in an Asp .net core web site like a blog?

ajax

asp.net-core-mvc

asp.net-core