I have a bunch of images in a .cshtml file which can be clicked, toggling them on and off for a filter.

Below is an example of one

 <div id="attack">
                    <img  src="images/Attack_icon_(detail).png" alt="Attack icon" />
                    <input  id="attack-level" placeholder="Attack Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
</div>

I am using entity framework to read from the database

        public List<Activity> allActivities = new List<Activity>();
        public void OnGet()
        {
            allActivities = _context.Activities.ToList();


        }

For further context I'm using razor pages

I'm unsure what the best solution is as I'm still new to front-end, potential things I've thought of:

1. pass data to the backend of which images are selected and filter on the backend before looping the list on the front end to display results

2. Passing the entire list through unfiltered and filtering on the front end

I'm going to assume through the backend as it makes sense for more "heavy lifting" to be done there from my limited knowledge

CodePudding user response：

Client-side filtering is for a small amount of data and is primarily for presentation purposes. Server side handles large amount data, and provides stability and scalability

check this article