Dynamically load bunches of data from sql database using MVC 4 and C#

Question

I would like to be able to load say, 20 videos from the database and then when a user clicks a button titled "Show More", another 20 results are loaded into a div.

How could I do this? I will do it with AJAX, but I'm not sure how I would go about getting the next 20 results...

An example being Google images - you search for an image and at the bottom of the page, you have a "More" button. Porn sites often have something similar.

Any ideas?

I'm using MVC 4, .Net 4.5, Entity Framework 5, C# and the Razor view engine.

What do you use to access the data? Entity Framework? ADO.NET? — Restuta, Feb 26 '13 at 19:51
Nothing yet, I was thinking of creating a separate table with a blobID and videoID. On insert, a value of upto 20 will be assigned and popped into the DB. Then, when retrieving, a I get all videos with blob id of say...5 That would bring me back 20 videos assigned where blobID=5. It's just an idea I just thought of - no idea if it would be efficient or even work. — pookie, Feb 26 '13 at 19:54
I'm using .Take(20) to get the first set of results. How could I use skip? — pookie, Feb 26 '13 at 19:58
`(from x in Videos select x).Skip(10).Take(20)` will return 20 videos skipping first 10 — Restuta, Feb 26 '13 at 19:58
@Restuta What if want another 20 after that first call? I need to be able to then skip 20. Should I just add a counter which increments by 20? — pookie, Feb 26 '13 at 20:00
so algorithm for getting _next 20_ is something like `.Skip(n*20).Take(20)` where `n` is current skip iteration (number of times user clicked "load more" — Restuta, Feb 26 '13 at 20:01
@Restuta Great that should do it. Thanks. Not used Skip before now. — pookie, Feb 26 '13 at 20:03

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

Basically you are trying to create pages but using a different UI that loads the second page into the current page vs. switching to the next page:

See this answer for the pagination related question and now just make your ajax call to get the required page and load it to your current page ..

How do I do pagination in ASP.NET MVC?

instead of:

<%=Html.ActionLink("next page", "Search", new {
                query, startIndex = startIndex + pageSize, pageSize }) %>

you can do this:

 <%= Ajax.ActionLink("next page", "Search", 
         new { query, startIndex = startIndex + pageSize, pageSize },            
         new AjaxOptions {UpdateTargetId = "VideoContainer", InsertionMode = InsertionMode.InsertAfter})
         %>

edited May 23 '17 at 11:52

Community

1
1

answered Feb 26 '13 at 20:01

Mortalus

10,574
11
67
117

Thanks, this would probably work too, but I think the .Skip() is the way I will go. – pookie Feb 26 '13 at 20:12
Note that in the link this is also a skip and take method but it is implemented in such a way that it will allow pagination for any controller action by providing default parameter to your rout data. so basically you are doing the same. :) – Mortalus Feb 26 '13 at 20:14
Hmm... How could I add pageSize and startIndex? I've added the route but I still get "cannot resolve symbol startIndex, pageSize". Also added the params to the Action method. Any ideas? – pookie Feb 26 '13 at 20:37
Did you pass the parameters or did you mean that you have defined defaults for them in the rout map? try passing the parameters directly via Query String if that works something is wrong with your default rout values defenition – Mortalus Feb 27 '13 at 03:28
I set it up with defaults in the route map and with parameters added to the actionlink as above - startIndex, pageSize. I just want a clean way to increment n in Skip(n*20).Take(20). I have it working using Session, but I'd prefer to have a JS variable called "Clicks" or something, increment that each time the user clicks the actionlink and pass it to the action method. – pookie Feb 27 '13 at 18:16

Dynamically load bunches of data from sql database using MVC 4 and C#

1 Answers1