iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
自我挑戰組

Asp.Net Core 零基礎建立自己的Blog系列 第 19

[Day 19] .Net Core MVC Ajax 動態新增html - 載入更多文章功能 (二)

  • 分享至 

  • xImage
  •  

前端部分做好了,接下來就是做後端的部分。

目標:

  1. ArticleController.cs 裡面加上 GetMoreArticle 的action,用來接收前端的請求。
    2.加上ArticleService.cs

步驟:
step1. 加上Action,注意要加上 [ValidateAntiForgeryToken],來驗證前端的輸入。

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> GetMoreArticle()
        {
            var nextArticleId = TempData["ArticleLastId"];

            if (TempData["ArticleLastId"] != null && int.TryParse(TempData["ArticleLastId"]!.ToString(), out var i))
            {
                var model = await _article.GetMoreArticleList(i);
                var result = new List<UpdateArticleViewModel>();

                if (model is not null && model.Count > 0)
                {
                    result = model.Select(x => new UpdateArticleViewModel
                    {
                        Id = x.Id,
                        ArticleContent = x.ArticleContent,
                        Title = x.Title,
                        IsDelete = x.IsDelete
//注意這裡Take(2)
                    }).Take(2).ToList();

                    TempData["ArticleLastId"] = result.Last().Id.ToString();
                }

                return Json(result);
            }

            return Json(string.Empty);
        }

note:
1.注意這裡Take(2)的用法是設計使用者可以撈出接下來有多少文章出來。
(你也可以改成10或是100)

step2. ArticleService.cs 補上撈取資料庫的程式碼

public async Task<IList<Article>> GetMoreArticleList(long id)
        {
            return await _db.Articles
                .Where(x => x.Id < id)
                .OrderByDescending(x => x.Id)
                .ToListAsync();
        }

做好後就可以看到,可以按按鈕新增下兩篇的文章連結。


上一篇
[Day 18] .Net Core MVC Ajax 動態新增html - 載入更多文章功能(一)
下一篇
[Day 20] 文章優化,加上程式碼Highlight.js 和 css
系列文
Asp.Net Core 零基礎建立自己的Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言