c# aspnet core and razorpages with page transistion

Question

I need to design a razor frontend that displays events for a particular room on a webpage. The URL structure will be like /rooms/room-1. (that part works)

I have a backend that collects all the events scheduled for that particular room on that day, which is working fine. There might be up to 13 events scheduled for that room on a given day.

However, the display screen can only show a maximum of 5 events at once.

(Getting the rows to the ui works)

1.) Therefore, I need to implement a feature where the page automatically switches to the next 5 events after a certain number of seconds, in a loop, using a pagetransistion effect

I have 0 experience in frontend design, so where do I start?

Does anyone have a good example or know where I can find one? For someone with no experience in frontend, it's frustrating to search for something on Google when I'm not sure what things are called that I need to search for.

Answer 1

I need to implement a feature where the page automatically switches to the next 5 events after a certain number of seconds, in a loop, using a pagetransistion effect

To only show a maximum of 5 events at once, you can use Skip() and Take() method to implement paging. Refer to this article: Part 3, Razor Pages with EF Core in ASP.NET Core - Sort, Filter, Paging

To auto refresh the page after a certain number of seconds, you can use the setInterval() method, it will call a function at specified intervals (in milliseconds).

In the interval function, you can check whether the Next button is disabled or not, then based on the result to redirect to the next page or the first page.

PaginatedList.cs:

public class PaginatedList<T> : List<T>
{
    public int PageIndex { get; private set; }
    public int TotalPages { get; private set; }

    public PaginatedList(List<T> items, int count, int pageIndex, int pageSize)
    {
        PageIndex = pageIndex;
        TotalPages = (int)Math.Ceiling(count / (double)pageSize);

        this.AddRange(items);
    }

    public bool HasPreviousPage => PageIndex > 1;

    public bool HasNextPage => PageIndex < TotalPages;

    public static async Task<PaginatedList<T>> CreateAsync(
        IQueryable<T> source, int pageIndex, int pageSize)
    {
        var count = await source.CountAsync();
        var items = await source.Skip(
            (pageIndex - 1) * pageSize)
            .Take(pageSize).ToListAsync();
        return new PaginatedList<T>(items, count, pageIndex, pageSize);
    }
}

EventIndex.cshtml.cs:

public class EventIndexModel : PageModel
{
    private readonly ApplicationDbContext _dbContext;

    public EventIndexModel(ApplicationDbContext applicationDbContext)
    {
        _dbContext=applicationDbContext;
    }
    public PaginatedList<Event> Events { get; set; }

    public async Task OnGetAsync(int? pageIndex)
    { 
        IQueryable<Event> eventslist = from s in _dbContext.Events
                                       select s; 
        var pageSize = 5;
        Events = await PaginatedList<Event>.CreateAsync(
            eventslist.AsNoTracking(), pageIndex ?? 1, pageSize);
    }
}

EventIndex.cshtml:

@page
@model RazorWebApp.Pages.EventIndexModel
<table class="table">
    <thead>
        <tr>
            <th>
                 Event ID
            </th>
            <th>
                Event Name
            </th>
            <th>
                Status
            </th> 
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Events)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.EventID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EventName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status)
                </td> 
            </tr>
        }
    </tbody>
</table>

@{
    var prevDisabled = !Model.Events.HasPreviousPage ? "disabled" : "";
    var nextDisabled = !Model.Events.HasNextPage ? "disabled" : "";
}

<a asp-page="./EventIndex" id="btnprevious" 
   asp-route-pageIndex="@(Model.Events.PageIndex - 1)" 
   class="btn btn-primary btnprevious @prevDisabled">
    Previous
</a>
<a asp-page="./EventIndex" id="btnnext"
   asp-route-pageIndex="@(Model.Events.PageIndex + 1)" 
   class="btn btn-primary @nextDisabled">
    Next
</a>

@section Scripts{

    <script>
        $(function () { 
            //create a function click the Next button to load the next page.
            function dynamicClickNext() {   
                if ($("#btnnext").hasClass("disabled")) {
                    window.location.href =  "/EventIndex?pageIndex=1";
                }
                else{
                    window.location.href = $("#btnnext").attr("href");
                }

            } 
            //Call dynamicLoadEvents every 3 second:
            setInterval(dynamicClickNext, 3000); 
        });
    </script>
}

The result as below:

Besides, you can display the event list in a partial page, then use the setInterval method and JQuery Ajax to load the partial page in the main page.

Here are some relate articles about use JQuery Ajax to load partial page, you can refer them:

ASP.Net Core Razor Pages: Load Partial View using jQuery AJAX

Partial Page Update with AJAX in Razor Pages