In my previous post in C# Corner, we saw how to get RSS feeds from C# Corner site and display the data in a Blazor project. We saw all the post by an author, all featured posts, all latest posts, and the top read posts.

In this post, we will see the RSS feeds from the C# Corner site with pagination. We will see ten rows at a time on a page and we can have the previous, next, first and last, buttons to navigate the data as our wish. We will provide all the posts by an author, featured articles list, latest posts (all types), latest articles, latest blogs, and top read articles.

If you are new to Blazor framework, please refer to the below articles to get started with Blazor.
We can create a new Blazor project using Visual Studio 2017 (I am using free community edition). Currently, there are three types of templates available for Blazor. We can choose Blazor (ASP.NET Core hosted) template.
C# Corner RSS Feeds in Blazor with Pagination
Our solution will be ready shortly. Please note that there are three projects created in our solution - “Client”, “Server”, and “Shared”.
C# Corner RSS Feeds in Blazor with Pagination

By default, Blazor created many files in these three projects. We can remove all the unwanted files like “Counter.cshtml”, “FetchData.cshtml”, “SurveyPrompt.cshtml” from Client project and “SampleDataController.cs” file from Server project and remove “WeatherForecast.cs” file from shared project too.

Create a new “Pagination” folder in “Shared” project and add “PagedResultBase” abstract class inside this folder.
PagedResultBase.cs
  1. namespace BlazorPagination.Shared.Pagination
  2. {
  3. public abstract class PagedResultBase
  4. {
  5. public int CurrentPage { get; set; }
  6. public int PageCount { get; set; }
  7. public int PageSize { get; set; }
  8. public int RowCount { get; set; }
  9. }
  10. }

This class will be used as base class for other pagination classes. This will contain properties like “CurrentPage”, ”PageCount”, “PageSize” and “RowCount”

We can add one more class “PagedResult” inside “Pagination” folder. Please note this will be a generic class.
PagedResult.cs
  1. using System.Collections.Generic;
  3. namespace BlazorPagination.Shared.Pagination
  4. {
  5. public class PagedResult<T> : PagedResultBase where T : class
  6. {
  7. public IList<T> Results { get; set; }
  9. public PagedResult()
  10. {
  11. Results = new List<T>();
  12. }
  13. }
  14. }

Create a new “Models” folder in “Shared” project and add a “Feed” class file inside this folder. We will add two classes, “AuthorPosts” and “Feed” inside this class file.

Feed.cs
  1. using BlazorPagination.Shared.Pagination;
  2. using System;
  4. namespace BlazorPagination.Shared.Models
  5. {
  6. public class AuthorPosts
  7. {
  8. public string AuthorName { get; set; }
  9. public PagedResult<Feed> Feeds { get; set; }
  10. }
  11. public class Feed
  12. {
  13. public string Link { get; set; }
  14. public string Title { get; set; }
  15. public string FeedType { get; set; }
  16. public string Author { get; set; }
  17. public string Content { get; set; }
  18. public DateTime PubDate { get; set; }
  19. public string PublishDate { get; set; }
  21. public Feed()
  22. {
  23. Link = "";
  24. Title = "";
  25. FeedType = "";
  26. Author = "";
  27. Content = "";
  28. PubDate = DateTime.Today;
  29. PublishDate = DateTime.Today.ToString("dd-MMM-yyyy");
  30. }
  31. }
  32. }

We have used above “PagedResult” generic type inside this "AuthorPosts” class.

We can create a new folder “Extensions” inside “Server” project and add a static class “PagedResultExtensions” inside this folder.

PagedResultExtensions.cs
  1. using BlazorPagination.Shared.Pagination;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  6. namespace BlazorPagination.Server.Extensions
  7. {
  8. public static class PagedResultExtensions
  9. {
  10. public static PagedResult<T> GetPagedResult<T>(this IEnumerable<T> query, int page, int pageSize) where T : class
  11. {
  12. var result = new PagedResult<T>
  13. {
  14. CurrentPage = page,
  15. PageSize = pageSize,
  16. RowCount = query.Count()
  17. };
  19. var pageCount = (double)result.RowCount / pageSize;
  20. result.PageCount = (int)Math.Ceiling(pageCount);
  22. var skip = (page - 1) * pageSize;
  23. result.Results = query.Skip(skip).Take(pageSize).ToList();
  25. return result;
  26. }
  27. }
  28. }

We have added a static “GetPagedResult” method in this class. We will use this static method as an extension method later in this post.

We can create a new API Controller “FeedsController.cs” in “Server” project.
Add below code to “FeedsController.cs” to get all posts by an author.
  1. readonly CultureInfo culture = new CultureInfo("en-US");
  3. [Route("allpostsbyauthor/{authorId}/{page}")]
  4. [HttpGet]
  5. public AuthorPosts GetPage(int page, string authorId)
  6. {
  7. AuthorPosts authorPosts = new AuthorPosts();
  9. try
  10. {
  12. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/members/" + authorId + "/rss");
  13. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  14. i.Name.LocalName == "item")
  15. select new Feed
  16. {
  17. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  18. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  19. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  20. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  21. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  22. FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",
  23. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  24. };
  26. authorPosts.AuthorName = entries.FirstOrDefault().Author;
  27. authorPosts.Feeds = entries.OrderByDescending(o => o.PubDate).GetPagedResult(page, 10);
  28. return authorPosts;
  29. }
  30. catch
  31. {
  32. authorPosts.AuthorName = "NOT FOUND!";
  33. PagedResult<Feed> feeds = new PagedResult<Feed>();
  34. Feed feed = new Feed();
  35. authorPosts.Feeds = feeds;
  36. return authorPosts;
  37. }
  38. }

Code for featured articles.

  1. [Route("featuredarticles/{page}")]
  2. [HttpGet]
  3. public PagedResult<Feed> Featured(int page)
  4. {
  5. try
  6. {
  8. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/featuredarticles.aspx");
  9. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  10. i.Name.LocalName == "item")
  11. select new Feed
  12. {
  13. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  14. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  15. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  16. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  17. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  18. FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",
  19. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  20. };
  22. return entries.OrderByDescending(o => o.PubDate).GetPagedResult(page, 10);
  23. }
  24. catch
  25. {
  26. PagedResult<Feed> feeds = new PagedResult<Feed>();
  27. return feeds;
  28. }
  29. }

Code for latest posts (All Types).

  1. [Route("latestallposts/{page}")]
  2. [HttpGet]
  3. public PagedResult<Feed> LatestAllPosts(int page)
  4. {
  5. try
  6. {
  8. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");
  9. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  10. i.Name.LocalName == "item")
  11. select new Feed
  12. {
  13. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  14. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  15. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  16. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  17. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  18. FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",
  19. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  20. };
  22. return entries.OrderByDescending(o => o.PubDate).GetPagedResult(page, 10);
  23. }
  24. catch
  25. {
  26. PagedResult<Feed> feeds = new PagedResult<Feed>();
  27. return feeds;
  28. }
  29. }

Code for latest articles.

  1. [Route("latestarticles/{page}")]
  2. [HttpGet]
  3. public PagedResult<Feed> LatestArticles(int page)
  4. {
  5. try
  6. {
  8. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestarticles.aspx");
  9. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  10. i.Name.LocalName == "item")
  11. select new Feed
  12. {
  13. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  14. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  15. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  16. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  17. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  18. FeedType = "Article",
  19. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  20. };
  22. return entries.OrderByDescending(o => o.PubDate).GetPagedResult(page, 10);
  23. }
  24. catch
  25. {
  26. PagedResult<Feed> feeds = new PagedResult<Feed>();
  27. return feeds;
  28. }
  29. }

Code for latest blogs.

  1. [Route("latestblogs/{page}")]
  2. [HttpGet]
  3. public PagedResult<Feed> LatestBlogs(int page)
  4. {
  5. try
  6. {
  8. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/blogs.aspx");
  9. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  10. i.Name.LocalName == "item")
  11. select new Feed
  12. {
  13. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  14. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  15. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  16. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  17. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  18. FeedType = "Article",
  19. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  20. };
  22. return entries.OrderByDescending(o => o.PubDate).GetPagedResult(page, 10);
  23. }
  24. catch
  25. {
  26. PagedResult<Feed> feeds = new PagedResult<Feed>();
  27. return feeds;
  28. }
  29. }

Code for the top read posts

  1. [Route("topreadposts/{page}")]
  2. [HttpGet]
  3. public PagedResult<Feed> TopReadPosts(int page)
  4. {
  5. try
  6. {
  8. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/toparticles.aspx");
  9. var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i =>
  10. i.Name.LocalName == "item")
  11. select new Feed
  12. {
  13. Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
  14. Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,
  15. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
  16. PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
  17. Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
  18. FeedType = "Article",
  19. Author = item.Elements().First(i => i.Name.LocalName == "author").Value
  20. };
  22. return entries.GetPagedResult(page, 10);
  23. }
  24. catch
  25. {
  26. PagedResult<Feed> feeds = new PagedResult<Feed>();
  27. return feeds;
  28. }
  29. }

We can go to “Client” project and add a Pager component inside the “Shared” folder so that, this component can be shared among all other pages in Blazor.

Pager.cshtml
  1. @using BlazorPagination.Shared.Pagination
  3. @if (Result != null)
  4. {
  5. <div class="row">
  6. <div class="col-md-8 col-sm-8">
  7. @if (Result.PageCount > 1)
  8. {
  9. <ul class="pagination pull-right">
  10. <li><button type="button" onclick="@(() => PagerButtonClicked(1))" class="btn">«</button></li>
  11. @for (var i = StartIndex; i <= FinishIndex; i++)
  12. {
  13. var currentIndex = i;
  14. @if (i == Result.CurrentPage)
  15. {
  16. <li><span class="btn">@i</span></li>
  17. }
  18. else
  19. {
  20. <li><button type="button" onclick="@(() => PagerButtonClicked(currentIndex))" class="btn">@i</button></li>
  21. }
  22. }
  23. <li><button type="button" onclick="@(() => PagerButtonClicked(Result.PageCount))" class="btn">»</button></li>
  24. </ul>
  25. }
  26. </div>
  27. </div>
  28. }
  30. @functions {
  32. [Parameter]
  33. protected PagedResultBase Result { get; set; }
  35. [Parameter]
  36. protected Action<int> PageChanged { get; set; }
  38. protected int StartIndex { get; private set; } = 0;
  39. protected int FinishIndex { get; private set; } = 0;
  41. protected override void OnParametersSet()
  42. {
  43. StartIndex = Math.Max(Result.CurrentPage - 5, 1);
  44. FinishIndex = Math.Min(Result.CurrentPage + 5, Result.PageCount);
  46. base.OnParametersSet();
  47. }
  49. protected void PagerButtonClicked(int page)
  50. {
  51. PageChanged?.Invoke(page);
  52. }
  53. }

We can modify the “NavMenu.cshtml” razor file.

NavMenu.cshtml
  1. <div class="top-row pl-4 navbar navbar-dark">
  2. <a class="navbar-brand" href="">Blazor Pagination</a>
  3. <button class="navbar-toggler" onclick=@ToggleNavMenu>
  4. <span class="navbar-toggler-icon"></span>
  5. </button>
  6. </div>
  8. <div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
  9. <ul class="nav flex-column">
  10. <li class="nav-item px-3">
  11. <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
  12. <span class="oi oi-home" aria-hidden="true"></span> Home
  13. </NavLink>
  14. </li>
  15. <li class="nav-item px-3">
  16. <NavLink class="nav-link" href="/page">
  17. <span class="oi oi-list-rich" aria-hidden="true"></span> All Posts by an Author
  18. </NavLink>
  19. </li>
  20. <li class="nav-item px-3">
  21. <NavLink class="nav-link" href="/featuredarticles/1">
  22. <span class="oi oi-list-rich" aria-hidden="true"></span> Featured Articles
  23. </NavLink>
  24. </li>
  25. <li class="nav-item px-3">
  26. <NavLink class="nav-link" href="/latestallposts/1">
  27. <span class="oi oi-list-rich" aria-hidden="true"></span> Latest Posts
  28. </NavLink>
  29. </li>
  30. <li class="nav-item px-3">
  31. <NavLink class="nav-link" href="/latestarticles/1">
  32. <span class="oi oi-list-rich" aria-hidden="true"></span> Latest Articles
  33. </NavLink>
  34. </li>
  35. <li class="nav-item px-3">
  36. <NavLink class="nav-link" href="/latestblogs/1">
  37. <span class="oi oi-list-rich" aria-hidden="true"></span> Latest Blogs
  38. </NavLink>
  39. </li>
  40. <li class="nav-item px-3">
  41. <NavLink class="nav-link" href="/topreadposts/1">
  42. <span class="oi oi-list-rich" aria-hidden="true"></span> Top Read Posts
  43. </NavLink>
  44. </li>
  45. </ul>
  46. </div>
  48. @functions {
  49. bool collapseNavMenu = true;
  51. void ToggleNavMenu()
  52. {
  53. collapseNavMenu = !collapseNavMenu;
  54. }
  55. }

AllPostsByAuthor.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/page"
  5. @page "/page/{Page}"
  7. @inject HttpClient Http
  8. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  10. <h4>C# Corner All Post Details by an Author</h4>
  12. <input placeholder="Enter Author Id" bind="@authorId" />
  13. <input type="button" class="btn btn-default" onclick="@(async () => await GetFeeds())" value="Get Posts" />
  14. <br />
  15. <br />
  16. <p><b>@author</b></p>
  18. @if (feeds == null || feeds.Results.Count == 0)
  19. {
  20. if (!pageLoaded && authorId != "" && author != "Invalid Author Id!")
  21. {
  22. <p><em>Loading...</em></p>
  23. }
  24. }
  25. else
  26. {
  27. if (!author.ToUpperInvariant().Contains("NOT FOUND") && author != "Invalid Author Id!" && authorId != "")
  28. {
  29. counter = (feeds.CurrentPage - 1) * 10;
  31. <table class="table table-striped">
  32. <thead>
  33. <tr>
  34. <th>Sl.No.</th>
  35. <th>Post Title</th>
  36. <th>Post Type</th>
  37. <th>Content</th>
  38. <th>Publish Date</th>
  39. </tr>
  40. </thead>
  41. <tbody>
  42. @foreach (var feed in feeds.Results)
  43. {
  44. counter++;
  45. <tr>
  46. <td>@counter</td>
  47. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  48. <td>@feed.FeedType</td>
  49. <td>@feed.Content</td>
  50. <td>@feed.PublishDate</td>
  51. </tr>
  52. }
  53. </tbody>
  54. </table>
  56. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  57. }
  58. }
  60. @functions{
  62. PagedResult<Feed> feeds;
  63. AuthorPosts authorPosts;
  64. string author;
  65. int counter;
  66. string @authorId;
  67. bool pageLoaded;
  69. [Parameter]
  70. protected string Page { get; set; } = "1";
  72. protected override void OnInit()
  73. {
  74. authorId = "";
  75. pageLoaded = true;
  76. author = "";
  77. }
  79. protected override async Task OnParametersSetAsync()
  80. {
  81. await LoadFeeds(int.Parse(Page));
  82. }
  84. private async Task GetFeeds()
  85. {
  86. feeds = null;
  87. pageLoaded = false;
  88. await LoadFeeds(1);
  89. }
  91. private async Task LoadFeeds(int page)
  92. {
  93. author = "";
  94. if (!pageLoaded)
  95. {
  96. if (authorId != "")
  97. {
  98. authorPosts = await Http.GetJsonAsync<AuthorPosts>("/api/feeds/allpostsbyauthor/" + authorId + "/" + page.ToString());
  100. if (authorPosts != null)
  101. {
  102. if (authorPosts.AuthorName.ToUpperInvariant().Contains("NOT FOUND"))
  103. {
  104. author = "Invalid Author Id!";
  105. }
  106. else
  107. {
  108. author = "Author Name : " + authorPosts.AuthorName;
  109. feeds = authorPosts.Feeds;
  110. }
  111. }
  112. }
  113. else
  114. {
  115. author = "Author Id should not be blank";
  116. }
  117. }
  118. }
  120. protected void PagerPageChanged(int page)
  121. {
  122. feeds = null;
  123. UriHelper.NavigateTo("/page/" + page);
  124. }
  126. }

FeaturedArticles.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/featuredarticles/{Page}"
  6. @inject HttpClient Http
  7. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  9. <h4>C# Corner Featured Articles List</h4>
  11. @if (feeds == null)
  12. {
  13. <p><em>Loading...</em></p>
  14. }
  15. else
  16. {
  17. counter = (feeds.CurrentPage - 1) * 10;
  19. <table class="table table-striped">
  20. <thead>
  21. <tr>
  22. <th>Sl.No.</th>
  23. <th>Post Title</th>
  24. <th>Post Type</th>
  25. <th>Content</th>
  26. <th>Publish Date</th>
  27. <th>Author</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. @foreach (var feed in feeds.Results)
  32. {
  33. counter++;
  34. <tr>
  35. <td>@counter</td>
  36. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  37. <td>@feed.FeedType</td>
  38. <td>@feed.Content</td>
  39. <td>@feed.PublishDate</td>
  40. <td>@feed.Author</td>
  41. </tr>
  42. }
  43. </tbody>
  44. </table>
  46. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  47. }
  49. @functions{
  51. PagedResult<Feed> feeds;
  52. string author;
  53. int counter;
  55. [Parameter]
  56. protected string Page { get; set; } = "1";
  58. protected override async Task OnParametersSetAsync()
  59. {
  60. await LoadFeeds(int.Parse(Page));
  61. }
  63. private async Task LoadFeeds(int page)
  64. {
  65. author = "";
  67. feeds = await Http.GetJsonAsync<PagedResult<Feed>>("/api/feeds/featuredarticles/" + page.ToString());
  69. }
  71. protected void PagerPageChanged(int page)
  72. {
  73. feeds = null;
  74. UriHelper.NavigateTo("/featuredarticles/" + page);
  75. }
  77. }

LatestAllPosts.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/latestallposts/{Page}"
  6. @inject HttpClient Http
  7. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  9. <h4>C# Corner Latest Posts (All Types) List</h4>
  11. @if (feeds == null)
  12. {
  13. <p><em>Loading...</em></p>
  14. }
  15. else
  16. {
  17. counter = (feeds.CurrentPage - 1) * 10;
  19. <table class="table table-striped">
  20. <thead>
  21. <tr>
  22. <th>Sl.No.</th>
  23. <th>Post Title</th>
  24. <th>Post Type</th>
  25. <th>Content</th>
  26. <th>Publish Date</th>
  27. <th>Author</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. @foreach (var feed in feeds.Results)
  32. {
  33. counter++;
  34. <tr>
  35. <td>@counter</td>
  36. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  37. <td>@feed.FeedType</td>
  38. <td>@feed.Content</td>
  39. <td>@feed.PublishDate</td>
  40. <td>@feed.Author</td>
  41. </tr>
  42. }
  43. </tbody>
  44. </table>
  46. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  47. }
  49. @functions{
  51. PagedResult<Feed> feeds;
  52. string author;
  53. int counter;
  55. [Parameter]
  56. protected string Page { get; set; } = "1";
  58. protected override async Task OnParametersSetAsync()
  59. {
  60. await LoadFeeds(int.Parse(Page));
  61. }
  63. private async Task LoadFeeds(int page)
  64. {
  65. author = "";
  67. feeds = await Http.GetJsonAsync<PagedResult<Feed>>("/api/feeds/latestallposts/" + page.ToString());
  69. }
  71. protected void PagerPageChanged(int page)
  72. {
  73. feeds = null;
  74. UriHelper.NavigateTo("/latestallposts/" + page);
  75. }
  77. }

LatestArticles.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/latestarticles/{Page}"
  6. @inject HttpClient Http
  7. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  9. <h4>C# Corner Latest <b>Articles</b> List</h4>
  11. @if (feeds == null)
  12. {
  13. <p><em>Loading...</em></p>
  14. }
  15. else
  16. {
  17. counter = (feeds.CurrentPage - 1) * 10;
  19. <table class="table table-striped">
  20. <thead>
  21. <tr>
  22. <th>Sl.No.</th>
  23. <th>Article Title</th>
  24. <th>Content</th>
  25. <th>Publish Date</th>
  26. <th>Author</th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. @foreach (var feed in feeds.Results)
  31. {
  32. counter++;
  33. <tr>
  34. <td>@counter</td>
  35. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  36. <td>@feed.Content</td>
  37. <td>@feed.PublishDate</td>
  38. <td>@feed.Author</td>
  39. </tr>
  40. }
  41. </tbody>
  42. </table>
  44. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  45. }
  47. @functions{
  49. PagedResult<Feed> feeds;
  50. string author;
  51. int counter;
  53. [Parameter]
  54. protected string Page { get; set; } = "1";
  56. protected override async Task OnParametersSetAsync()
  57. {
  58. await LoadFeeds(int.Parse(Page));
  59. }
  61. private async Task LoadFeeds(int page)
  62. {
  63. author = "";
  65. feeds = await Http.GetJsonAsync<PagedResult<Feed>>("/api/feeds/latestarticles/" + page.ToString());
  67. }
  69. protected void PagerPageChanged(int page)
  70. {
  71. feeds = null;
  72. UriHelper.NavigateTo("/latestarticles/" + page);
  73. }
  75. }

LatestBlogs.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/latestblogs/{Page}"
  6. @inject HttpClient Http
  7. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  9. <h4>C# Corner Latest <b>Blogs</b> List</h4>
  11. @if (feeds == null)
  12. {
  13. <p><em>Loading...</em></p>
  14. }
  15. else
  16. {
  17. counter = (feeds.CurrentPage - 1) * 10;
  19. <table class="table table-striped">
  20. <thead>
  21. <tr>
  22. <th>Sl.No.</th>
  23. <th>Blog Title</th>
  24. <th>Content</th>
  25. <th>Publish Date</th>
  26. <th>Author</th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. @foreach (var feed in feeds.Results)
  31. {
  32. counter++;
  33. <tr>
  34. <td>@counter</td>
  35. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  36. <td>@feed.Content</td>
  37. <td>@feed.PublishDate</td>
  38. <td>@feed.Author</td>
  39. </tr>
  40. }
  41. </tbody>
  42. </table>
  44. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  45. }
  47. @functions{
  49. PagedResult<Feed> feeds;
  50. string author;
  51. int counter;
  53. [Parameter]
  54. protected string Page { get; set; } = "1";
  56. protected override async Task OnParametersSetAsync()
  57. {
  58. await LoadFeeds(int.Parse(Page));
  59. }
  61. private async Task LoadFeeds(int page)
  62. {
  63. author = "";
  65. feeds = await Http.GetJsonAsync<PagedResult<Feed>>("/api/feeds/latestblogs/" + page.ToString());
  67. }
  69. protected void PagerPageChanged(int page)
  70. {
  71. feeds = null;
  72. UriHelper.NavigateTo("/latestblogs/" + page);
  73. }
  75. }

TopReadPosts.cshtml

  1. @using BlazorPagination.Shared.Models
  2. @using BlazorPagination.Shared.Pagination
  4. @page "/topreadposts/{Page}"
  6. @inject HttpClient Http
  7. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
  9. <h4>C# Corner Top Read Posts List</h4>
  11. @if (feeds == null)
  12. {
  13. <p><em>Loading...</em></p>
  14. }
  15. else
  16. {
  17. counter = (feeds.CurrentPage - 1) * 10;
  19. <table class="table table-striped">
  20. <thead>
  21. <tr>
  22. <th>Sl.No.</th>
  23. <th>Post Title</th>
  24. <th>Post Type</th>
  25. <th>Content</th>
  26. <th>Publish Date</th>
  27. <th>Author</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. @foreach (var feed in feeds.Results)
  32. {
  33. counter++;
  34. <tr>
  35. <td>@counter</td>
  36. <td><NavLink href[email protected] target="_blank">@feed.Title</NavLink></td>
  37. <td>@feed.FeedType</td>
  38. <td>@feed.Content</td>
  39. <td>@feed.PublishDate</td>
  40. <td>@feed.Author</td>
  41. </tr>
  42. }
  43. </tbody>
  44. </table>
  46. <Pager Result=@feeds PageChanged=@PagerPageChanged />
  47. }
  49. @functions{
  51. PagedResult<Feed> feeds;
  52. string author;
  53. int counter;
  55. [Parameter]
  56. protected string Page { get; set; } = "1";
  58. protected override async Task OnParametersSetAsync()
  59. {
  60. await LoadFeeds(int.Parse(Page));
  61. }
  63. private async Task LoadFeeds(int page)
  64. {
  65. author = "";
  67. feeds = await Http.GetJsonAsync<PagedResult<Feed>>("/api/feeds/topreadposts/" + page.ToString());
  69. }
  71. protected void PagerPageChanged(int page)
  72. {
  73. feeds = null;
  74. UriHelper.NavigateTo("/topreadposts/" + page);
  75. }
  77. }

We can modify the Index.cshtml as well.

Index.cshtml
  1. @page "/"
  3. <h3>C# Corner RSS Feeds in Blazor with Pagination</h3>
  4. <hr />
  5. <p>
  6. We will see the RSS feeds from C# Corner site with pagination.
  7. We will see ten rows at a time in a page and we can have the previous,
  8. next, first and last buttons to navigate the data as our wish.
  9. We will provide all the posts by an author, featured articles list,
  10. latest posts (all types), latest articles, latest blogs, and top read articles.
  11. </p>

We have completed all the coding part. We can run the application now.

C# Corner RSS Feeds in Blazor with Pagination

You can click the “All Posts by an Author” link and enter author id to get all the post details for an author.

C# Corner RSS Feeds in Blazor with Pagination
I have given my own author ID. We will get the below details.
C# Corner RSS Feeds in Blazor with Pagination
You can get the pagination at the bottom of the page.
C# Corner RSS Feeds in Blazor with Pagination
If you click the last page button, you will get the last page details as shown below.
C# Corner RSS Feeds in Blazor with Pagination
We can get the featured articles list,
C# Corner RSS Feeds in Blazor with Pagination
We can get the latest posts (all types) list,
C# Corner RSS Feeds in Blazor with Pagination
We will get the latest articles list,
C# Corner RSS Feeds in Blazor with Pagination
We will get the latest blogs list,
C# Corner RSS Feeds in Blazor with Pagination
We can get the top read post details also.
C# Corner RSS Feeds in Blazor with Pagination

In this post, we have seen pagination in Blazor application. We have created a Pager component for that. We have got data from C# Corner RSS feeds. We have seen all the posts by an author, featured articles list, latest posts (all types), latest articles, latest blogs, and top read posts details.

I have got the idea of Blazor pagination from GunnarPeipman’s blog. I would like to express my sincere thanks to him.
I have deployed this application in Azure as a web app. If you want to check the functionalities discussed in this post, please check this URL We will discuss more features of Blazor in upcoming articles.